The Fields design options allow you to customize the appearance of form fields. These settings control background colors, borders, text styles, and spacing, ensuring the fields align with your site’s overall design.
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
Background and Focus Colors
Fields Background Color: Set the background color of the fields.
Fields Text Color: Choose the text color inside the fields.
Fields Focus Background Color: Set the background color for fields when they are clicked or in use.
Fields Focus Text Color: Choose the text color for fields in focus.
Spacing
Fields Margin: Choose space around the fields by entering a numerical value or using the arrows.
Fields Padding: Choose space inside the fields (between the text and the field edges) by entering a numerical value or using the arrows.
Typography
Fields Font: Choose the font for the field text. Choose from the default fonts or upload a custom font.
Fields Font Weight: Choose the boldness of the font (e.g., light, regular, bold).
Fields Font Style: Choose stylistic effects for the text, such as:
Italicized
Capitalized
Small Capitals
Underlined
Strike-through
Fields Text Alignment: Align the text to the left, center, or right, or justify it.
Fields Text Color: Choose the module's field text color.
Fields Text Size: Adjust the font size using the range slider or by entering a specific value.
Fields Letter Spacing: Control the spacing between letters. Increase the value for more space or decrease it for tighter text.
Fields Line Height: Set the vertical spacing between lines of text for better readability.
Text Shadow
Fields Text Shadow: Add a shadow to the field text. Customize using the following options:
Horizontal and Vertical Position: Adjust the shadow’s placement.
Blur Strength: Soften or sharpen the shadow edges.
Shadow Color: Pick a shadow color that complements the text and background.
Borders and Rounded Corners
Fields Rounded Corners: Adjust the corner radius for rounded edges.
Linked Values: Keep all corners uniform by leaving the chainlink icon enabled.
Unlinked Values: Click the chainlink icon to set unique values for each corner.
Fields Border Styles:
Border Width: Define the border thickness (minimum
1px).Border Color: Choose a border color from the palette or use the color picker.
Border Style: Select from styles like solid, dashed, dotted, double, groove, ridge, inset, outset, or none.
Use Focus Borders: Toggle to enable a border that appears only when fields are in focus.
Tips for Using Fields Options
Enhance Usability: Use Focus Background Color and Focus Borders to indicate active fields clearly.
Maintain Readability: Ensure text size, spacing, and colors contrast well with the field background.
Create Consistency: Match field styles, such as Font and Border Style, with other design elements on your site.
Add Depth: Use subtle Text Shadows and Borders to make fields visually distinct.
Test Interactivity: Preview focus effects and responsiveness across devices to ensure a seamless user experience.