This guide shows you how to build a reusable form styling system in Divi 5 using Design Variables, Option Group Presets, Element Presets, and the Preset Manager. By the end, a single change to a preset or variable propagates to every form on your site. The full walkthrough is on the Elegant Themes blog.
Prerequisites: An active Divi 5 license and familiarity with the Visual Builder. If you plan to follow the Contact Form 7 section, the Contact Form 7 plugin must be installed and activated separately — Divi 5’s CF7 module renders those forms inside the builder, but does not replace the plugin itself.
Important for agencies: Editing a saved preset updates every module using it across the site immediately. Test changes on a staging environment before applying to production — exporting your current presets first gives you a quick snapshot to restore from if something goes wrong.
How the system is structured
- Design Variables
- Store reusable values — colors, spacing, and fonts — centrally. More on Design Variables.
- Option Group Presets
- Apply those values to reusable style groups like inputs, checkboxes, and radio buttons.
- Element Presets
- Package complete module designs including any option group presets.
- Preset Manager
- Accessible via its icon in the Visual Builder left sidebar — lets you find, edit, reorder, import, and export all presets from one place. More on the Preset Manager.
Building the form
Open a page in the Visual Builder, add a row, and insert a Contact Form module from the module picker. In the module settings → Content tab, click Add New Field. Each field needs a Field ID (lowercase with underscores, e.g. phone_number — this is the key WordPress uses to match the submitted value, including in any email template that references it) and a Title (the visible label). Use the Field Type dropdown to choose Input, Email, Textarea, Checkboxes, Radio Buttons, or Select Dropdown.
Styling inputs
In the Design tab, the Input option group controls standard text fields. Set background, border, and border radius first. Assign Design Variables here: a color variable for the field background, another for the border. To assign or create a Design Variable, click the variable icon next to the color field — this opens the Design Variables panel where you can select an existing variable or create a new one on the spot. When brand colors change later, updating the variable propagates to every form using that preset automatically. Set spacing last — input padding determines whether the form feels open or cramped. Use the same number variables you use elsewhere on the site so form fields feel connected to buttons, cards, and sections.
Styling checkboxes and radio buttons
Open the Checkbox and Radio option groups in the Design tab. Use background and indicator controls to define the selected state clearly. Keep radio buttons visually distinct from checkboxes — rounded vs. square — so visitors can distinguish single-choice from multiple-choice inputs at a glance. Border width has a larger visual impact on these small controls than on a full input, so test it carefully.
Focus and checked states
Use the state switcher (the Default / Hover / Focus toggle row at the top of the Design tab) to move from Default into Focus or Checked. For Focus, update the input border color — a brand-colored border on the active field is the clearest way to show where the visitor is in the form. A subtle background change can support this, but keep it restrained. For Checked, style the checkbox or radio background so the selected state is unmistakable. You only define what changes in each interaction state; everything else inherits from the default styles.
Saving presets
To save an Option Group Preset: hover over the Input, Checkbox, or Radio group header in the Design tab, click the preset icon, choose “New Preset From Current Styles,” and name it descriptively — for example, Form Input Default or Site Checkbox Default. Setting a preset as the default for its group means future modules start from that style without any manual setup.
To save an Element Preset: open the module preset dropdown at the top of the settings panel, choose “New Preset From Current Styles,” and name it by role — for example, Primary Contact Form. Element Presets capture the full module design including spacing, typography, button styling, and any option group presets already applied.
Applying presets to other modules
Add an Email Optin module. If your Input preset is set as the default for that option group, the module inherits the same field styles immediately. Otherwise, open the Design tab, find the field option group, open the preset menu, and choose your saved preset. Both modules now share the same input styles — update the preset once and both follow.
Managing presets site-wide
Click the Preset Manager icon in the Visual Builder left sidebar. Use the Element tab for full module presets and the Group tab for Option Group Presets. Search by name or filter by module type. Click Edit Preset to open a preview, make your change, and save — every module using that preset updates across the site. Presets can also be exported and imported, useful for reusing a form design system across client sites.
Contact Form 7
Add the Contact Form 7 module from the module picker, select the CF7 form you want to render, and style it from Divi’s Design tab using the same Input, Checkbox, and Radio option groups. Saved Option Group Presets and Design Variables apply here too, keeping CF7 forms inside the same visual system as native Divi forms instead of requiring separate custom CSS.