How to Style Contact Form 7 in the Divi Theme

Contact Form 7 is a popular WordPress form builder plugin powering over one million websites.

By default, Contact Form 7 provides minimal unstyled forms so website owners can customize the design to match their brand aesthetic. The Grid & Styler For Contact Form 7 And Divi plugin brings full visual styling controls directly into the Divi Visual Builder.

Pre-Requisites

• A WordPress Website
• Divi Theme or Divi Builder
• Contact Form 7 Plugin
• Grid & Styler For Contact Form 7 And Divi Plugin

Create a Grid Layout for Contact Form 7

1. The plugin provides visual layout tags for multi-column rows and columns (1-col, 1/2-col, 1/3-col, 1/4-col, 2/3-col, and 3/4-col).
2. Nest columns inside rows within your Contact Form 7 editor to structure your fields into responsive columns.
3. For step-by-step guidance on layout tags, read our guide on How to Create a Grid Layout for Contact Form 7.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Embed Contact Form 7 on a Divi Page

1. Open any page in the Divi Visual Builder.

2. Add the CF7 Styler Divi module to your layout row.

3. Select your Contact Form 7 form from the module settings dropdown menu.

4. Watch the video walkthrough below for a visual guide:

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Style Contact Form 7 Using the Divi Module

1. The Divi module provides comprehensive visual design controls for every form element:

   • Form Wrapper: The main outer container wrapping your contact form.
     • Customize internal padding and margins under Design Tab > Spacing.
     • Customize background color or gradient under Content Tab > Background.
     • Customize container border and corner radius under Design Tab > Border.
     • Add elevation or drop shadow effects under Design Tab > Box Shadow.
   • Row: Layout container rows structuring multi-column form grids.
     • Adjust row spacing and margins under Design Tab > Row.
   • Column: Individual column containers holding form fields.
     • Adjust column padding and margins under Design Tab > Column.
   • Label: Text labels indicating the purpose of input fields.
     • Customize typography, font size, text color, and margins under Design Tab > Label.
   • Text, Textarea & Select: Input fields grouped together for unified design. Go to Design Tab > Common - Text, Textarea & Select to style:
     • Field background colors
     • Input borders and border radius
     • Font family, text color, and placeholder styles
     • Internal field padding and margins
   • Radio / Checkbox Options Label: Text labels for multi-choice radio buttons and checkboxes.
     • Customize font styles and spacing under Design Tab > Radio / Checkbox Options Label.
   • Acceptance Field Label: Text description accompanying terms or privacy consent checkboxes.
     • Customize font family, text color, and margins under Design Tab > Acceptance Field.
   • Submit Button: The form submission button. Go to Design Tab > Button to customize:
     • Button alignment (Left, Center, Right)
     • Button typography, font weight, and text color
     • Button padding, margins, and border radius
     • Hover color transitions and drop shadows
     • Button background color or gradient
   • Field Error: Inline validation message displayed when an input field contains invalid data.
     • Customize text color, font size, and spacing under Design Tab > Field Error.
   • Form Error: Main notification banner displayed at the top when form submission fails.
     • Customize background color, border, text color, and padding under Design Tab > Form Error.
   • Form Success: Confirmation banner displayed upon successful form submission.
     • Customize background color, border, text color, and padding under Design Tab > Form Success.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial