Form Styler (Divi)

One module that styles forms from WPForms, Fluent Forms, Ninja Forms and weForms. Pick the plugin and the form, choose one of four finished designs (or keep the plugin’s own), put short fields in columns, draw custom checkboxes — and style every part from Divi’s Design tab: labels, fields with focus and invalid states, choices, help text, section breaks, the button and the messages. The fields themselves are still edited in each form plugin. Each example is labelled with the settings that make it.

1. Four form plugins, one module

The same “Contact us” form made in each plugin, all in the Clean design with the accent colour — so a site that mixes plugins still looks like one site.

Fluent Forms · Clean

weForms · Clean

2. The four designs

One Fluent Forms form in each Form Design, accent teal. The designs are starting points: every Design tab setting overrides them.

Form Design: Clean — bordered

Form Design: Underline

3. Dark background

Form Design: Dark background, on a dark section — weForms, with a glowing button (Submit Button: background gradient and shadow) and a rounded container.

4. Fields in columns

Fields in Columns: 3 columns on desktop, 2 on tablets, 1 on phones; column gap 24 px. Text areas, choice lists and the button keep the full width. (WPForms “Workshop booking”, Soft design.)

5. Styled from the Design tab

Labels in small caps, rounded fields with a tinted focus, a full-width gradient button that lifts on hover, custom checkboxes in the accent, and a rounded success message (Fluent Forms “Workshop booking”).

What you can style

• Container, title and description
• Labels and the required mark
• Fields: text, background, border, padding, shadow, placeholder, focus, height, width
• Checkboxes & radios: size, colours, radius, spacing
• Help text and section breaks
• Button: width, alignment, fonts, background, border, shadow, hover lift
• Field errors and success / error messages

6. A newsletter card

Hide Labels (kept for screen readers), Underline design, Form Max Width 440 px centred, the button centred — weForms “Newsletter” inside a coloured card.

7. Validation and messages

Preview Messages: Always — sample field error, error message and success message in each plugin’s own classes, styled from Validation & Messages. (On a real site keep this “In the builder”.)

WPForms · Plugin default · messages shown