Skip to content

How to Add & Style CF7 Forms in Divi

Place and style any Contact Form 7 form directly inside the Divi Builder — no shortcodes, no custom CSS required.

What It Does

The CF7 Styler module is the core building block for using CF7 Mate with Divi. It lets you insert a Contact Form 7 form anywhere on your page and style every part of it — fields, labels, buttons, spacing, and colors — right from the Divi Builder interface.

Requirements

Before using this module, make sure the following are installed and active on your site:

  • Contact Form 7 — with at least one form created
  • Divi Theme (or Divi Builder plugin)
  • CF7 Mate (Free or Pro)

How to Use It

  1. Open any page in the Divi Builder.
  2. Add a new module and search for CF7 Styler (also listed as CF7 Mate) in the module list.
  3. In the Content tab, select your Contact Form 7 form from the dropdown.
  4. Switch to the Design tab to customize layout, spacing, field styles, colors, typography, and more.
  5. Click Save and preview the page — your styled form will appear exactly where you placed the module.

Tips

  • Works with both Divi 4 and Divi 5.
  • All styling is applied visually — no need to write custom CSS.
  • You can add multiple CF7 Styler modules on the same page, each pointing to a different form.
  • Combine with other CF7 Mate features, such as Grid Layout, Separator, or Icons, to build more structured, polished forms.
Was this helpful?