The Contact Form 7 Styler module lets you display any form built with the Contact Form 7 WordPress plugin inside the Divi Builder and style it like a native Divi contact form.
You manage fields, logic, and email settings inside Contact Form 7 as usual - the Styler module handles the design.
This module requires the Contact Form 7 plugin to be installed and activated. Any form you create in Contact Form 7 becomes selectable inside the module.
Add The Contact Form 7 Styler Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row, which will show the list of all available Divi modules.Find the Contact Form module and click on it to load it. Alternatively, you can use the Search option to find it.
The Contact Form 7 Styler Module Use Cases
Styling Existing Contact Form 7 Forms: Apply consistent Divi styling to forms you've already built in Contact Form 7 without rebuilding them as Divi contact forms.
Advanced Form Logic with Divi Design: Use Contact Form 7's advanced validation, conditional fields, and third-party integrations while keeping the form's look aligned with your Divi site.
Migrating Existing Sites to Divi: Keep the Contact Form 7 forms from a site you're redesigning with Divi and restyle them in place instead of recreating them.
Contact Form 7 Styler Module Settings Breakdown
Once you've added the Contact Form 7 Styler module, the module settings automatically pop up. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
The Content tab lets you select which Contact Form 7 form to display and configure the module's general content settings.
Form - Choose which Contact Form 7 form to display from the dropdown of forms you've created in the Contact Form 7 plugin.
Elements - Allows adding nested modules.
Background - Choose the Contact Form 7 Styler module's background styles.
Loop - Enables the loop builder.
Order - Choose the order in which the Contact Form 7 Styler module appears inside a Flexbox and Grid layout.
Meta - Choose the Contact Form 7 Styler module's Label text and force its Visibility inside the Visual Builder.
The Design tab
All the design styles and options for the Contact Form 7 Styler module are in this tab. Styles you set here apply to the rendered Contact Form 7 form.
Layout - Choose the Layout Style. It allows you to change how the child modules are being displayed.
Input - Style the Input and Textarea fields.
Checkbox - Style the Checkbox field types.
Radio - Style the Radio buttons field types.
Button - Choose the submit button styles.
Success Message - Style the form's submission success message.
Validation Message - Style the form's validation message.
Acceptance Message - Style the form's acceptance message.
Invalid Form Message - Style the form's invalid message.
Failure Message - Style the form's failure message.
Spam Message - Style the form's spam message.
Sizing - Choose the Contact Form 7 Styler module's sizing.
Spacing - Choose the Contact Form 7 Styler module's spacing.
Border - Choose the Contact Form 7 Styler module's border styles.
Box Shadow - Choose the Contact Form 7 Styler module's Box Shadow styles.
Filters - Choose the module's filters, such as hue shifts, saturation changes, and blending modes.
Transform - Choose the module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the module's animation styles.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
Attributes - Assign a CSS ID, reusable CSS classes, or custom HTML attributes to the element. Use these to apply advanced styling via your child theme's stylesheet or Divi's custom CSS settings.
CSS - Allows you to add custom CSS code to fine-tune your Contact Form 7 Styler module.
HTML - Choose the semantic HTML tag for the Contact Form 7 Styler module.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Interactions - Create custom interactions, such as showing or hiding the module, and many more.
Visibility - Choose the module's visibility based on different devices.
Transitions - Choose how long the module's animation takes.
Position - Choose precise control of the module's placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the module behaves and transforms during scrolling.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
