Use the global Style → Steps Field section in Smart Form Builder by Dragwyb to change the appearance of the progress indicator used by a multi-step form. You can choose how steps are represented, then adjust the line, markers, text, and colors that are available for that indicator type. First create a multi-step form if you have not already done so.
Open the Steps Field settings
- Open your multi-step form in the Smart Form Builder editor. For the form structure, see Build a Multi-Step Form.
- Select the Style tab in the editor.
- Expand Steps Field and choose an Indicator Type.
- Adjust the controls that appear for the selected type, then save the form and inspect it in Frontend Preview.
Choose an Indicator Type
Indicator Type determines how the visitor sees progress through the form. The configured default is Numbers & Labels.
- Numbers & Labels: show numbered steps with their labels. This is useful when visitors benefit from seeing the current step and the stages that follow.
- Progress Bar: use a progress bar instead of numbered or dot markers.
- Dots Only: show step markers without the full numbered-label presentation.
- None: hide the step indicator. The form can still use multiple steps, but the indicator-related controls that require a visible indicator are hidden.
Style lines and markers
Line Style
Line Style offers Solid (the configured default), Dashed, and Dotted. This control is available for Numbers & Labels and Dots Only; it is not shown for Progress Bar or None.
Dot Size
Dot Size adjusts the size of the step marker. It is available when Indicator Type is Numbers & Labels or Dots Only. If you change the marker size, review the connecting line and labels together so that the indicator remains visually balanced.
Line Thickness
Line Thickness controls the thickness of the indicator line and has a configured default of 2px. It is available whenever the indicator type is not None. Check the result at the actual rendered size; a line that looks balanced on desktop may appear heavy on a compact layout.
Adjust spacing and typography
Step Bottom Spacing
Step Bottom Spacing adjusts the space below the step indicator. Use it to separate the progress display from the fields in the current step. The control supports px and %.
Step Typography
Step Typography controls the typography used by the step indicator and is available when the indicator type is not None. Its shared typography options include font family, font size, weight, text transform, style, decoration, line height, letter spacing, word spacing, and alignment. For the meanings and supported units of these options, see Customize Form Typography.
Configure step colors
- Active Color: sets the color for the active step. The configured default is #1d4ed8. It is available when the indicator type is not None.
- Inactive Color: sets the color for inactive step markers. The configured default is #9ca3af. It appears for Numbers & Labels and Dots Only.
- Divider Text Color: controls the divider text color. The configured default is #374151. It is available when the indicator type is not None.
- Line/Connector Color: sets the color of the connecting line. The configured default is #e5e7eb. It is available when the indicator type is not None.
Choose settings for your form
- For a guided multi-step form: use Numbers & Labels when the names of the steps help visitors understand what is coming next.
- For a compact layout: try Dots Only and adjust Dot Size, Line Thickness, and Step Bottom Spacing so the indicator does not compete with the form fields.
- For a simplified progress display: choose Progress Bar and adjust the controls available for that type.
- For a minimal interface: choose None when the progress display is not needed. Note that Step Typography and several indicator color and line controls are then hidden.
Test the step indicator
- Preview the form with each indicator type you intend to use.
- Move forward and backward through the steps to confirm the active marker and connector remain understandable.
- Check that labels and markers remain legible on smaller screens and that the indicator has enough space above the fields.
- If you use None, confirm the form still communicates the next action clearly through its fields and navigation buttons.
- Save the form and review the published or previewed frontend form, not only the editor controls.
Related design guides
- Form Design and Templates — reference for all global Style sections.
- Build a Multi-Step Form — create the steps and configure the form flow.
- Customize Form Buttons — style submit, next, and previous buttons.
- Customize Form Typography — configure the typography settings shared by form elements.
Screenshot to add: Style tab expanded to Steps Field, showing Indicator Type and the settings visible for Numbers & Labels