Dragwyb Docs Dragwyb Docs
Visit Website
Updated on Oct 18, 2026

Form Design and Templates

Reference all seven global Style sections in Smart Form Builder, including container layout, labels, inputs, choice fields, step indicators, buttons, and validation messages.

Use the global Style settings in Smart Form Builder by Dragwyb to control the overall form container, labels, input controls, choice fields, multi-step indicators, buttons, and feedback messages. This guide maps every global Style section in the plugin source to the settings it contains. Open a form in the editor and select Style to find these sections.

Global Style sections and settings

1. Form Container

Use this section to control the form wrapper and the space around its fields.

  • Background — configure the container background using the background control.
  • CSS Filter — adjust CSS filter effects and the available backdrop-filter options.
  • Border and Box Shadow — style the container outline and shadow.
  • Justify Content — align the form content to Left, Center, or Right.
  • Width — set the form width; responsive controls support px, em, and %.
  • Margin and Padding — set the outer and inner spacing independently for each side, using the available px, em, or % units.
  • Row Gap — set the vertical spacing between form rows. The configured default is 15px.

2. Labels & Help Text

Use these settings to control how labels, label icons, required indicators, and help text appear.

  • Label Style — choose Top Aligned (default), Left Aligned, Floating Label, or Hidden.
  • Floating Style — when Label Style is Floating Label, choose Outlined (On Border), Inside (Filled / Box), or Inside & Hide on Type.
  • Icon Position, Icon Size, and Icon Spacing — position and size a label icon and adjust the gap around it. Icon controls are hidden when labels are hidden.
  • Focus Border Color — customize the floating label’s focus border when the floating style is not Inside & Hide on Type.
  • Label Color, Required Asterisk Color, and Help Text Color — set the colors for these text elements. The configured default for Required Asterisk Color is #ef4444.
  • Typography and Help Text Typography — configure label and help-text typography independently.
  • Spacing (Bottom) — control the gap below labels. The configured default is 6px.

3. Input Fields

This section styles text-entry controls such as inputs and text areas. The color controls are separated into Normal and Focus tabs.

  • Normal — Background Color, Text Color, and Placeholder Color.
  • Focus — Background Color, Border Color, and Box Shadow for the focused input.
  • Typography — style the text entered into the input.
  • Padding — adjust the inner spacing of input controls with responsive dimensions.
  • Border — configure the input border.

4. Radio & Checkbox Fields

Use these settings for choice options and their selectable controls.

  • Text Color and Typography — style the text beside radio buttons and checkboxes.
  • Size — adjust the size of the choice control.
  • Radio Background Color and Border Color — set the control background and outline.
  • Active / Checked Color — set the selected state color.
  • Option Spacing — control the space between choice options.

5. Steps Field

These controls affect the progress indicator shown for multi-step forms. Their visibility depends on the selected indicator type.

  • Indicator Type — choose Numbers & Labels (default), Progress Bar, Dots Only, or None.
  • Line Style — choose Solid (default), Dashed, or Dotted when the indicator type is Numbers & Labels or Dots Only.
  • Dot Size — adjust dot/step marker size for Numbers & Labels or Dots Only.
  • Line Thickness — adjust the indicator line thickness when an indicator is displayed; the configured default is 2px.
  • Step Bottom Spacing — adjust the space below the step indicator.
  • Step Typography — customize the indicator text typography when an indicator is displayed.
  • Active Color, Inactive Color, Divider Text Color, and Line/Connector Color — style the current step, inactive markers, divider text, and connecting lines. Inactive Color is shown for Numbers & Labels and Dots Only.

6. Button

This section controls submit and multi-step navigation button appearance.

  • Width Type — choose Auto or Custom (default). Width is available when Custom is selected; the configured default is 100%.
  • Alignment — align the button area Left, Center, or Right.
  • Typography — style the button text.
  • Submit / Next Button — the Normal tab contains Text Color and Background Color; the Hover tab contains separate Text Color and Background Color settings.
  • Previous Button — provides separate Normal and Hover text/background colors for the previous-step button when the form uses steps.
  • Padding, Border, and Box Shadow — adjust button spacing, outline, and shadow.

7. Messages & Validation

Use this section to style the feedback visitors see after an action or when validation fails.

  • Success Text Color and its Background Color — style the success message. The configured defaults are #15803d and #dcfce7.
  • Error / Validation Color and its Background Color — style error and validation feedback. The configured defaults are #b91c1c and #fee2e2.

Apply and verify global styles

  • Open the form in the editor and select Style.
  • Open the section that controls the element you want to change, then adjust one group of settings at a time.
  • Use responsive controls where available and check both desktop and mobile layouts.
  • Review normal and focused inputs, checked and unchecked choices, success and validation messages, and button hover states as applicable.
  • Click Save in the editor header, then open Frontend Preview to inspect the rendered form on your site.

Related design guides

Screenshot to add: Global Style panel with all section names visible, if the editor layout permits