Advanced Contact Form 7 Styler

This module embeds a form you already built in Contact Form 7 and gives you Divi design controls for it. Its one job is styling: the form itself, its fields and its emails stay managed in Contact Form 7.

How to add the Advanced Contact Form 7 module

Install and activate the Contact Form 7 plugin and create a form.
Open the Visual Builder and add a section and row.
Search for "Advanced Contact Form 7" and add the module.
Enter the form ID in the Form ID setting. The ID is the number in the Contact Form 7 shortcode, for example 123.

Content

Form group

Form ID: The Contact Form 7 form ID.
Show Form Header: Off by default. Adds a header above the form.
Header Title: Rendered as an H2. Shown when Show Form Header is on.
Header Text: A short paragraph under the title.
Use Icon: Off by default. Shows an icon in the header instead of an image.
Header Image: The image shown when Use Icon is off.
Header Icon: The icon shown when Use Icon is on.
Custom Checkbox/Radio Styles: Off by default. Turn it on to use the Checkbox & Radio design settings.

The header appears only when Show Form Header is on and at least a title or header text is entered.

Design

Form Header group

Header Background, Header Padding (default 0px on all sides) and Header Bottom Spacing (0px).
Icon/Image Background: Default #efefef.
Icon Size: Default 32px.
Icon Color and Icon Padding (15px on all sides).
Title Spacing Bottom: Default 0px.

Header Text group

Font settings for the header text.

Form group

Form Background and Form Padding (default 0px on all sides).
Fullwidth Button: Off by default.
Button Alignment: Left (default), Center or Right.

Form Field group

Field Height and Field Padding (default 0px 15px).
Field Background: Default #f5f5f5.
Active Border Color: The border color when a field has focus.
Field Spacing Bottom: Default 20px.
Label Spacing Bottom: Default 7px.
Border: Border and radius options for the fields.

Field Text group

Font settings for field and label text.

Checkbox & Radio group

Size: Default 20px.
Background Color, Selected Color (default #222222), Border Color (#222222) and Border Size (1px).
Label Color

Submit Button group

Divi's standard button settings plus Font, Border, Box Shadow and Spacing for the submit button.

Success / Error Message group

Message Text Color, Message Background and Border Highlight Color: Apply to validation messages.
Success Text Color, Success Background and Success Border Color.
Error Text Color, Error Background and Error Border Color.
Message Padding and Message Margin Top: Default 0px each.

FAQ

Does this module need Contact Form 7?

Yes. If the Contact Form 7 plugin is not active, the module shows "Contact Form 7 is not active." If no form ID is entered, it shows "Please select a Contact Form 7."

Does it work in Divi 4 and Divi 5?

The plugin includes a Divi 4 version and a native Divi 5 module. Divi 4 layouts convert to the Divi 5 module. This page describes the Divi 5 settings.

Where do I edit the form fields and email settings?

In Contact Form 7. The module renders your form with the [contact-form-7] shortcode and only changes how it looks.