Get Started

How to Style Contact Form 7 in Divi 5

CF7 Mate includes a native Divi 5 module built specifically for Divi 5’s modern architecture, giving you full visual control over Contact Form 7 forms in the new Visual Builder.

What It Does

The CF7 Mate module for Divi 5 lets you place any Contact Form 7 form on your page and style every element of it — live, inside the Divi 5 Visual Builder. It is built from the ground up for Divi 5’s React-based framework, which means it behaves and feels like a native Divi module with no compatibility workarounds.

Requirements

  • Contact Form 7 installed and active with at least one form created
  • Divi 5 (latest version recommended)
  • CF7 Mate (Free or Pro)

How to Use It

  1. Open any page in the Divi 5 Visual Builder.
  2. Add a new module and search for CF7 Mate.
  3. In the Content tab, select your Contact Form 7 form from the dropdown.
  4. Use the Design tab to style your form — all changes appear live in the builder as you make them.
  5. Use the responsive controls to adjust styles per device — desktop, tablet, and mobile independently.
  6. Click Save to publish your changes.

Divi 5 — Specific Features

Live Preview Every styling change you make is reflected instantly in the Visual Builder. No need to save and preview separately — what you see in the builder is exactly what your visitors see.

Responsive Controls Divi 5’s built-in responsive system lets you set different styles for desktop, tablet, and mobile from the same Design panel. Font sizes, spacing, and layouts can all be fine-tuned per breakpoint.

Hover & Focus States Style interactive states — input focus rings, button hover colors, field highlights — visually, without writing a single line of CSS.

Full Element Coverage Style every part of the form from within the module: labels, inputs, textareas, dropdowns, checkboxes, radio buttons, the submit button, placeholder text, and validation messages.

Tips

  • CF7 Mate is built natively for Divi 5’s React architecture — it is not a Divi 4 module ported over, so you get full compatibility and performance.
  • Combine with Multi-Step Forms (Pro) to build wizard-style forms styled entirely within the Visual Builder.
  • Use Design Presets (Pro) to apply a base style instantly, then fine-tune in the Design tab.
  • For Divi 4 users, the standard CF7 Mate Divi Styler module continues to work as before.
Was this helpful?