Form header: an optional title, text, and an image or icon above the form. Form: background, padding and border. Fields: height, padding, colours, borders and the space between them. Labels and placeholders: colour, spacing and type. Radio buttons and checkboxes: optional custom styles. Button: colours, type, alignment and full width. Messages: the success and error messages under the form. The exact controls differ a little between builders, because each one follows its builder's own design panel.

Style Your Forms in Divi, Elementor, Bricks and the Block Editor

Q: Which builders can I use?

Each builder has its own switch under CF7Mate → Settings. You can turn off the ones you do not use.

Q: How do I style a form?

Build the form under Contact → Contact Forms and save it. Open your page in the builder and add the CF7 Styler module, widget, element or block. Choose your form under Select Form. Use the design settings to style it, and save the page.

Q: Can I use a ready-made style instead?

Yes. Turn on Style presets, then wrap the form in the presets tag in the Contact Form 7 editor: The styles are sky, classic, box, minimal, dark, modern and rounded. The style presets button above the form editor writes the tag for you. A preset also works with a plain shortcode, so you do not need a builder for it. The Divi 5 module has a Design Preset setting of its own as well.

Q: The module is missing from my builder. Why?

Check that the switch for that builder is on in CF7Mate → Settings. Then reload the builder.

Pick a form in the CF7 Styler module, widget, element or block, then set colours, spacing and type in the builder you already use. Or give the form a ready-made style preset.

CF7 Mate lets you style a Contact Form 7 form inside your page builder. Add one module, pick a form, and change its colours, spacing and type with the builder’s own controls. You do not write CSS.

Which builders can I use?

Builder	Add this	Switch on the Features page
Divi 4	CF7 Styler module	Divi
Divi 5	CF7 Styler module	Divi
Elementor	CF7 Styler widget	Elementor
Bricks	CF7 Styler element	Bricks
Block editor	CF7 Styler block	Block Editor

Each builder has its own switch under CF7Mate → Settings. You can turn off the ones you do not use.

How do I style a form?

Build the form under Contact → Contact Forms and save it.
Open your page in the builder and add the CF7 Styler module, widget, element or block.
Choose your form under Select Form.
Use the design settings to style it, and save the page.

What can I change?

Form header: an optional title, text, and an image or icon above the form.
Form: background, padding and border.
Fields: height, padding, colours, borders and the space between them.
Labels and placeholders: colour, spacing and type.
Radio buttons and checkboxes: optional custom styles.
Button: colours, type, alignment and full width.
Messages: the success and error messages under the form.

The exact controls differ a little between builders, because each one follows its builder’s own design panel.

Can I use a ready-made style instead?

Yes. Turn on Style presets, then wrap the form in the presets tag in the Contact Form 7 editor:

[cf7m-presets style="sky"]
<label>Your name [text* your-name]</label>
<label>Your email [email* your-email]</label>
[submit "Send"]
[/cf7m-presets]

The styles are sky, classic, box, minimal, dark, modern and rounded. The style presets button above the form editor writes the tag for you.

A preset also works with a plain shortcode, so you do not need a builder for it. The Divi 5 module has a Design Preset setting of its own as well.

FAQ

Do I have to use a page builder?

No. A normal Contact Form 7 shortcode shows the form with every CF7 Mate feature. The visual design controls live in the builders. Without one, use a style preset or your theme’s CSS.

I used CF7 Styler for Divi. Do my modules still work?

Yes. The plugin was renamed, but the module and its settings were kept, so existing pages keep their styling.

The module is missing from my builder. Why?

Check that the switch for that builder is on in CF7Mate → Settings. Then reload the builder.

What should I do next?

Make long forms easier to fill in with steps and columns, or add star ratings, sliders and phone fields.