Button controls determine how the form’s main action buttons look and fit within the layout. Smart Form Builder by Dragwyb provides shared styling for the submit/next button and separate settings for the previous-step button used in multi-step forms.
Open the Button controls
Open the form in the editor, select Style, and open the Button section. Make changes in small steps and inspect the preview after each group of settings.
Set width and alignment
- Width Type — choose Auto to avoid setting a custom width, or Custom to specify one. The current default is Custom.
- Width — when Custom is selected, set a responsive width using one of the available units: px, %, em, or rem. The configured default is 100%.
- Alignment — choose Left, Center, or Right for the button area.
Style the submit and next button
Use Typography to adjust the button text presentation. In the Submit / Next Button controls, the Normal tab provides Text Color and Background Color. The Hover tab provides separate text and background colors for the pointer-hover state.
Style the previous button separately
The Previous Button section has its own Normal and Hover styling controls. The available settings include text color, background color, padding, border, and box shadow. These controls are useful when a multi-step form uses a secondary action that should be visually distinct from the main action.
Button styling does not change the button’s label or the step sequence. To configure the text shown on Next and Previous buttons or to add step breaks, see Build a Multi-Step Form.
Check accessibility and save
- Keep button text readable against both normal and hover backgrounds.
- Check the width on mobile so buttons do not create awkward overflow or excessive empty space.
- Preview both main and previous-step buttons when the form has multiple steps.
- Click Save in the editor header, then open Frontend Preview to verify the rendered result.
All controls in the Button section
The global Button section contains the following groups:
- Width Type — Auto or Custom (default). The responsive Width control appears for Custom and supports px, %, em, and rem; the configured default is 100%.
- Alignment — Left, Center, or Right.
- Typography — controls the button label’s text appearance.
- Submit / Next Button — separate Normal and Hover tabs, each with Text Color and Background Color.
- Previous Button — separate Normal and Hover text/background colors for the previous-step button. These controls are conditional on step indicators being enabled.
- Padding — adjust the inner spacing around button text; the control supports px and em.
- Border and Box Shadow — configure the button outline and shadow.
Button styles do not change the button label or the form’s step sequence. Configure those in the field/step settings, then save the form and verify both the normal and hover states in Frontend Preview. For the full inventory of all global style sections, see Form Design and Templates.
Screenshot to add: Button section showing width, alignment, Normal, and Hover controls