Field styling controls the appearance of the labels and interactive controls visitors use to complete a form. These settings are separate from each field’s label, placeholder, validation rules, and other content settings.
Open the field style sections
Open the form in the editor and select Style. The main sections relevant to field appearance include Labels & Help Text, Input Fields, and Radio & Checkbox Fields. Use the section that matches the control you want to customize.
Style labels and help text
In Labels & Help Text, you can adjust the label position and related label presentation, including floating-label options when the label position is set to floating. Available controls include Label Color, Required Asterisk Color, Help Text Color, Typography, Help Text Typography, and Spacing (Bottom). The Focus Border Color control is conditional on the floating-label settings.
Customize text inputs
Open Input Fields. The controls are grouped into Normal and Focus states:
- Normal — set Background Color, Text Color, and Placeholder Color for the standard input appearance.
- Focus — set the focused input’s Background Color, Border Color, and Box Shadow, where supported.
- Typography — adjust text presentation inside the input.
- Padding — adjust the space inside the input. The responsive dimension control provides top, right, bottom, and left values, with the available units shown by the control.
- Border — configure the input border using the border control.
Style radio buttons and checkboxes
Use Radio & Checkbox Fields for choice controls. Its available settings include option text color and typography, control size, radio background color, border color, active/checked color, and option spacing. Review checked and unchecked choices in the preview so the selected state remains easy to identify.
Check the result and save
- Keep labels, required indicators, and help text readable against the form background.
- Check both normal and focused input states; do not rely on color alone to communicate important information.
- Verify radio and checkbox selected states and ensure spacing does not make options look like one item.
- Review the layout at desktop and mobile widths, then click Save in the editor header.
For text-specific properties, see Customize Form Typography. To change submit and step-navigation buttons, see Customize Form Buttons.
Configure label placement and icon styling
In Labels & Help Text, Label Style offers Top Aligned, Left Aligned, Floating Label, and Hidden. The Floating Style control appears for Floating Label and offers Outlined (On Border), Inside (Filled / Box), and Inside & Hide on Type. The Icon Position, Icon Size, and Icon Spacing controls style the label icon. Use Focus Border Color for the floating-label focus border when that option is available. The same section also includes Label Color, Required Asterisk Color, Help Text Color, separate label/help-text typography, and Spacing (Bottom).
Style the form container
The global Form Container section controls the form wrapper rather than an individual field. Its settings are Background, CSS Filter, Border, Box Shadow, Justify Content (Left, Center, or Right), responsive Width, responsive Margin, responsive Padding, and Row Gap between rows. Width supports px, em, and %; Margin and Padding also support px, em, and %. Row Gap is configured with a default of 15px.
Style success and validation messages
Open Messages & Validation to set Success Text Color and its Background Color, plus Error / Validation Color and its Background Color. The source-configured defaults are #15803d and #dcfce7 for success, and #b91c1c and #fee2e2 for error/validation feedback. These settings change appearance; they do not change validation rules or the message content itself.
Style the multi-step indicator
The global Steps Field section controls the progress indicator, not the fields assigned to each step. Indicator Type offers Numbers & Labels (default), Progress Bar, Dots Only, and None. Depending on the selected type, available controls include Line Style (Solid, Dashed, or Dotted), Dot Size, Line Thickness, Step Bottom Spacing, Step Typography, Active Color, Inactive Color, Divider Text Color, and Line/Connector Color. Some controls only appear for specific indicator types; for example, Line Style and Dot Size are shown for Numbers & Labels and Dots Only, while indicator styling controls are hidden when Indicator Type is None.
These options change the indicator’s appearance, not the number or order of form steps. To create and configure steps, see Build a Multi-Step Form. For a detailed walkthrough of the available indicator styles and their conditional settings, see Customize Multi-Step Form Indicators.
Screenshot to add: Input Fields section showing Normal and Focus styling controls