A style preset applies a coordinated set of visual settings to help you establish a form design quickly. In Smart Form Builder by Dragwyb, presets are available from the editor header and can be adjusted afterward in the Style controls.
Open the preset library
- Open the form in the Smart Form Builder editor.
- Click Preset Styles (the palette icon) in the editor header.
- In Form Preset Styles, browse the preset list or use Search presets… to find a style by name or description.
- Select a preset to inspect its preview and description before applying it.
Choose and apply a preset
The bundled preset library includes Theme Default, Clean, Card, Modern, Soft, Outline, Filled, Glass (Dark Skin), Glass (Light Skin), Dark, Light, Gradient, Minimal, Elevated, Side Border, Top Accent, Transparent (Dark Skin), and Transparent (Light Skin). The available presets are supplied by the installed plugin version.
- Choose a preset that fits the website’s background and overall design.
- Use the preview to inspect the general look. The preview helps with selection but does not replace checking the actual form on your page.
- When you apply the preset, confirm the warning. The editor states that applying a preset can overwrite or change existing form style settings.
- Close the modal and review the form. You can fine-tune the resulting values in the editor’s Style controls.
Review and save the result
Applying a preset updates the editor’s style settings and preview; it does not mean the form has been saved to WordPress. Click Save in the editor header after reviewing your changes. Then open Frontend Preview and check the form against your site’s theme.
- Confirm that field labels, input text, and placeholders remain readable.
- Check input focus styling and button hover styling, not only the default state.
- Check narrow/mobile layouts and any form steps or validation messages used by your form.
For individual design settings, continue with Customize Form Typography, Customize Form Field Styles, or Customize Form Buttons.
Fine-tune the global Style sections
After applying a preset, you can refine the result in the editor’s Style panel. The plugin provides seven global sections: Form Container, Labels & Help Text, Input Fields, Radio & Checkbox Fields, Steps Field, Button, and Messages & Validation. A preset may change existing style values, so inspect the relevant sections instead of assuming your previous settings remain unchanged.
- Form Container — background, CSS Filter, border, box shadow, content alignment, width, margin, padding, and Row Gap.
- Labels & Help Text — label placement and floating style, label icon position/size/spacing, label and help-text colors and typography, required asterisk color, focus border color, and bottom spacing.
- Input Fields — Normal and Focus colors, focus box shadow, typography, padding, and border.
- Radio & Checkbox Fields — option text color and typography, control size, background/border/checked colors, and option spacing.
- Steps Field — indicator type, line style, dot size, line thickness, bottom spacing, typography, and active/inactive/text/connector colors.
- Button — width type and width, alignment, typography, submit/next normal and hover colors, previous-button normal and hover colors, padding, border, and box shadow.
- Messages & Validation — success text/background colors and error/validation text/background colors.
For the meaning of each setting and the conditions that reveal it, see Form Design and Templates, then continue with the specific typography, field-style, or button guide linked there.
Screenshot to add: Form Preset Styles modal with the preset list and preview panel