The Fields design options control how form fields look inside Divi 5 modules that include user inputs. These settings cover typography for input, label, and placeholder text, plus spacing, background, border, and box shadow controls for the field container.
Where to Find the Fields Options
Open the Comments Module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Design Tab: Locate the Fields option group.
Fields Customization Settings
Input Text
Controls the typography of the text users type into form fields.
Fields Font: Choose a font from the dropdown or upload a custom font for unique styling.
Fields Font Weight: Adjust the boldness of your Fields with options like light, bold, or extra-bold.
Variable Font Options: those options will only be available if you are using a Google variable font such as Robo, Google Sans Flex, or Bitcount):
Variable Font Weight: Use the slider or type in a numeric value for the font weight.
Optical Sizing: Enable automatic optical size handling.
Variable Font Width: Fine-tune variable font width using variable font interpolation.
Variable Font Slant: Fine-tune variable font slant using variable font interpolation.
Variable Font Crsv: Fine-tune variable font crsv using variable font interpolation.
Variable Font Element Shape: Fine-tune variable font element shape using variable font interpolation.
Variable Font Element Expansion: Fine-tune variable font element expansion using variable font interpolation.
Variable Font Rond: Fine-tune variable font rond using variable font interpolation.
Variable Font Grade: Fine-tune variable font grade using variable font interpolation.
Variable Font Width: Fine-tune variable font width using variable font interpolation.
Fields Text Size: You can adjust the font size of your Fields text using the slider or by entering a specific value. It also accepts Global Variables.
Fields Text Color: Choose a color to be used for the Fields text. It also accepts Global Variables.
Fields Line Height: Set the space between the lines of the Fields text, helping to improve readability. It also accepts Global Variables.
Fields Letter Spacing: Control the space between letters by adjusting the slider or entering a value. It also accepts Global Variables.
Fields Text Alignment: Set the alignment for the Fields text—left, center, right, or justified.
Fields Capitalization: Choose the Fields text's capitalization:
Uppercase - All letters are in uppercase format
Capitalize - Makes the first letter of each word uppercase.
Lowercase - All letters are in lowercase format.
Smallcaps - Lowercase letters display as smaller uppercase letters.
All Small Caps - all letters display as small caps, including letters that were already uppercase.
Fields Font Style: Select additional font styles, including:
Italic: Makes the text lean to the right.
Underline: Adds a line under the text.
Overline: adds a line above the text.
Strikethrough: draws a line through the middle of the text.
⚠️ Note: When Underline, Overline, and/or Strikethrough are enabled, you can also choose:Line Color: Choose the line's color. It also accepts Global Variables.
Line Thickness: Choose how thick or slim the line is.
Line Type: Choose the Line's type:
Solid
Double
Dotted
Dashed
Wavy
Fields Line Warp Style: Choose how text should wrap. Default keeps native browser wrapping, Balanced evens heading lines, and Pretty helps avoid single-word endings.
Default: Text can move onto a new line when it runs out of space.
Balanced: Short text breaks into lines with more even lengths
Pretty: Text wrap in a cleaner, more visually pleasing way
Fields Text Direction: Choose text flow direction. Standard Horizontal reads left-to-right across lines, while vertical modes stack glyphs top-to-bottom.
Standard Horizontal
Vertical (right to left): The text is displayed from top to bottom, and each new line starts to the left of the previous one.
Vertical (left to right): The text is displayed from bottom to top, and each new line starts to the left of the previous one.
Fields Hyphenation: When enabled, if a word is too long to fit nicely on one line, the browser can break it into parts and add a hyphen at the break.
Fields Fill Type: Choose the Fields' text fill options:
None - No Fields text fill.
Gradient - Fill the Fields text with a Gradient
Image - Fill the Fields text with an Image
Transparent - Fill the Fields text with a transparent fill.
Fields Stroke Width - Choose the thickness of the stroke.
Fields Stroke Color - Choose the Fields text's stroke color.
Fields Columns: Set how many columns the text should flow through.
Fields Text Shadow: Add a text shadow effect and customize its direction, blur, and color to add depth or emphasis to the Fields:
Direction: Adjust horizontal and vertical placement.
Blur: Control how soft or sharp the shadow appears.
Color: Set a shadow color to complement the text.
Label Text
Controls the typography of field labels (the descriptive words that identify each field, like "Name" or "Email").
Label Font: Choose a font from the dropdown or upload a custom font for unique styling.
Label Font Weight: Adjust the boldness of your Label with options like light, bold, or extra-bold.
Variable Font Weight (⚠️ only applicable for Google Variable Fonts): Use the slider or type in a numeric value for the font weight.
Variable Font Width (⚠️ only applicable for Google Variable Fonts): Fine-tune variable font width using variable font interpolation.
Label Text Size: You can adjust the font size of your Label text using the slider or by entering a specific value. It also accepts Global Variables.
Label Text Color: Choose a color to be used for the Label text. It also accepts Global Variables.
Label Line Height: Set the space between the lines of the Label text, helping to improve readability. It also accepts Global Variables.
Label Letter Spacing: Control the space between letters by adjusting the slider or entering a value. It also accepts Global Variables.
Label Text Alignment: Set the alignment for the Label text—left, center, right, or justified.
Label Capitalization: Choose the Label text's capitalization:
Uppercase - All letters are in uppercase format
Capitalize - Makes the first letter of each word uppercase.
Lowercase - All letters are in lowercase format.
Smallcaps - Lowercase letters display as smaller uppercase letters.
All Small Caps - all letters display as small caps, including letters that were already uppercase.
Label Font Style: Select additional font styles, including:
Italic: Makes the text lean to the right.
Underline: Adds a line under the text.
Overline: adds a line above the text.
Strikethrough: draws a line through the middle of the text.
⚠️ Note: When Underline, Overline, and/or Strikethrough are enabled, you can also choose:Line Color: Choose the line's color. It also accepts Global Variables.
Line Thickness: Choose how thick or slim the line is.
Line Type: Choose the Line's type:
Solid
Double
Dotted
Dashed
Wavy
Label Line Warp Style: Choose how text should wrap. Default keeps native browser wrapping, Balanced evens heading lines, and Pretty helps avoid single-word endings.
Default: Text can move onto a new line when it runs out of space.
Balanced: Short text breaks into lines with more even lengths
Pretty: Text wrap in a cleaner, more visually pleasing way
Label Text Direction: Choose text flow direction. Standard Horizontal reads left-to-right across lines, while vertical modes stack glyphs top-to-bottom.
Standard Horizontal
Vertical (right to left): The text is displayed from top to bottom, and each new line starts to the left of the previous one.
Vertical (left to right): The text is displayed from bottom to top, and each new line starts to the left of the previous one.
Label Hyphenation: When enabled, if a word is too long to fit nicely on one line, the browser can break it into parts and add a hyphen at the break.
Label Fill Type: Choose the Label's text fill options:
None - No Label text fill.
Gradient - Fill the Label text with a Gradient
Image - Fill the Label text with an Image
Transparent - Fill the Label text with a transparent fill.
Label Stroke Width - Choose the thickness of the stroke.
Label Stroke Color - Choose the Label text's stroke color.
Label Columns: Set how many columns the text should flow through.
Label Text Shadow: Add a text shadow effect and customize its direction, blur, and color to add depth or emphasis to the Label:
Direction: Adjust horizontal and vertical placement.
Blur: Control how soft or sharp the shadow appears.
Color: Set a shadow color to complement the text.
Placeholder Text
Controls the typography of placeholder text (the faded hint text that appears inside an empty field, like "Enter your email address").
Placeholder Font: Choose a font from the dropdown or upload a custom font for unique styling.
Placeholder Font Weight: Adjust the boldness of your Placeholder with options like light, bold, or extra-bold.
Variable Font Weight (⚠️ only applicable for Google Variable Fonts): Use the slider or type in a numeric value for the font weight.
Variable Font Width (⚠️ only applicable for Google Variable Fonts): Fine-tune variable font width using variable font interpolation.
Placeholder Text Size: You can adjust the font size of your Placeholder text using the slider or by entering a specific value. It also accepts Global Variables.
Placeholder Text Color: Choose a color to be used for the Placeholder text. It also accepts Global Variables.
Placeholder Line Height: Set the space between the lines of the Placeholder text, helping to improve readability. It also accepts Global Variables.
Placeholder Letter Spacing: Control the space between letters by adjusting the slider or entering a value. It also accepts Global Variables.
Placeholder Text Alignment: Set the alignment for the Placeholder text—left, center, right, or justified.
Placeholder Capitalization: Choose the Placeholder text's capitalization:
Uppercase - All letters are in uppercase format
Capitalize - Makes the first letter of each word uppercase.
Lowercase - All letters are in lowercase format.
Smallcaps - Lowercase letters display as smaller uppercase letters.
All Small Caps - all letters display as small caps, including letters that were already uppercase.
Placeholder Font Style: Select additional font styles, including:
Italic: Makes the text lean to the right.
Underline: Adds a line under the text.
Overline: adds a line above the text.
Strikethrough: draws a line through the middle of the text.
⚠️ Note: When Underline, Overline, and/or Strikethrough are enabled, you can also choose:Line Color: Choose the line's color. It also accepts Global Variables.
Line Thickness: Choose how thick or slim the line is.
Line Type: Choose the Line's type:
Solid
Double
Dotted
Dashed
Wavy
Placeholder Line Warp Style: Choose how text should wrap. Default keeps native browser wrapping, Balanced evens heading lines, and Pretty helps avoid single-word endings.
Default: Text can move onto a new line when it runs out of space.
Balanced: Short text breaks into lines with more even lengths
Pretty: Text wrap in a cleaner, more visually pleasing way
Placeholder Text Direction: Choose text flow direction. Standard Horizontal reads left-to-right across lines, while vertical modes stack glyphs top-to-bottom.
Standard Horizontal
Vertical (right to left): The text is displayed from top to bottom, and each new line starts to the left of the previous one.
Vertical (left to right): The text is displayed from bottom to top, and each new line starts to the left of the previous one.
Placeholder Hyphenation: When enabled, if a word is too long to fit nicely on one line, the browser can break it into parts and add a hyphen at the break.
Placeholder Fill Type: Choose the Placeholder's text fill options:
None - No Placeholder text fill.
Gradient - Fill the Placeholder text with a Gradient
Image - Fill the Placeholder text with an Image
Transparent - Fill the Placeholder text with a transparent fill.
Placeholder Stroke Width - Choose the thickness of the stroke.
Placeholder Stroke Color - Choose the Placeholder text's stroke color.
Placeholder Columns: Set how many columns the text should flow through.
Placeholder Text Shadow: Add a text shadow effect and customize its direction, blur, and color to add depth or emphasis to the Placeholder:
Direction: Adjust horizontal and vertical placement.
Blur: Control how soft or sharp the shadow appears.
Color: Set a shadow color to complement the text.
Spacing
Controls the space around and inside field containers.
Fields Margin: Add space outside the field on the top, right, bottom, and left.
Fields Padding: Add space inside the field (between the text and the field edges) on the top, right, bottom, and left.
Click the chainlink icon to lock opposing sides together for uniform spacing.
Background
Controls the appearance of the field background. Divi 5 offers six background types, each available as its own tab. You can combine them (for example, a color base with an image overlay and a pattern on top).
Background Color: Apply a solid color fill.
Background Gradient: Apply a multi-stop gradient with control over direction, type (linear or radial), and color stops.
Background Image: Upload or link an image and adjust size, position, repeat, and blend mode.
Background Video: Embed an MP4 or WebM video as a looping background.
Background Mask: Apply a pre-built mask shape over the background for layered visual effects.
Background Pattern: Overlay a repeating pattern on top of the background.
Border
Controls the shape and edge of the field container.
Fields Rounded Corners: Set the corner radius. Keep the chainlink icon locked for uniform corners or unlink it to round each corner independently.
Fields Border Styles: Configure the border appearance:
Border Width: Define the border thickness (minimum
1px).Border Color: Pick a static color or assign a global color variable.
Border Style: Choose solid, dashed, dotted, double, groove, ridge, inset, outset, or none.
Box Shadow
Adds a drop shadow around the field container to create depth. Pick from a library of preset shadow styles, or customize each property manually.
Horizontal Position: Move the shadow left or right of the field.
Vertical Position: Move the shadow up or down from the field.
Blur Strength: Soften or sharpen the shadow edges.
Spread Strength: Expand or contract the shadow's reach.
Shadow Color: Pick a static color or assign a global color variable.
Tips for Using Fields Options
Match Site Typography: Keep Input Text, Label Text, and Placeholder Text fonts consistent with the rest of your site for a cohesive look.
Use Global Colors: Assign global color variables to Text Color and Border Color so sitewide palette changes update fields automatically.
Keep Placeholders Subtle: Use a lighter color and reduced weight for Placeholder Text so it reads as a hint rather than entered content.
Ensure Contrast: Check that text, placeholder, and background colors meet accessibility contrast standards for readability.
Add Depth Sparingly: Use Box Shadow and Text Shadow in moderation. Subtle shadows feel polished, heavy ones feel dated.