Style Your Form
Set colors once for the whole form, then fine-tune any element with normal Divi design settings.
Start With Brand Colors#
On the form module, open the Design tab and go to Brand Colors. One set of colors covers fields, labels, focus states and the button, with tabs for Color, Hover and Focus.
Fine-Tune Each Part#
| Design group | What it styles |
|---|---|
| Font Styles | Field text, labels, placeholders and help text |
| Button Settings | The submit button and its icon |
| Success Message | The box shown after sending |
| Error Message | Validation messages |
These groups override Brand Colors when you set them. All have Divi's usual responsive and hover controls.
Style One Field#
Open a Form Field and use its Design tab. Field types with their own controls, such as Slider, Toggle and Date/Time, have their own groups there too.
Lay Out the Form#
- Form Layout: Stacked, or Inline for a one-line newsletter form. Inline stacks on phones.
- Button Width and Button Alignment: under Form Settings.
- Field Width: on each field, for each screen size.
- Text Direction: Auto, right-to-left or left-to-right.