Divi CF7 Styler Docs

Divi CF7 Styler is a powerful Divi Builder extension that fully customizes Contact Form 7 forms with an intuitive grid system, visual form builder, and advanced styling options.

With this plugin, you can design beautiful, responsive forms inside the Divi Builder without any coding.

Installation

To install and activate Divi CF7 Styler, follow these steps:

Step 1: Prerequisites

Make sure you have the following installed and activated:

• Divi Theme
• Contact Form 7 Plugin

Step 2: Install Divi CF7 Styler

• Download the Divi CF7 Styler plugin.
• Go to WordPress Dashboard → Plugins → Add New.
• Click Upload Plugin and select the downloaded ZIP file.
• Click Install Now and then Activate.

Getting Started

1. Install & Activate the plugin.
2. Edit Your Contact Form 7 Form in WordPress.
3. Add Grid Layouts using shortcodes.
4. Customize Styles inside the Divi Builder.

How To Add Grid

The grid system lets you structure your Contact Form 7 fields into multiple columns.

Basic Shortcodes for Grid Layout

[dcs_row]
    [dcs_col_half]First Name[/dcs_col_half]
    [dcs_col_half]Last Name[/dcs_col_half]
[/dcs_row]

Available Column Sizes

• Full width:
• Half width:
• One-third:
• Two-thirds:
• One-fourth:
• Three-fourths:

Custom Classes for Columns

Users can add custom classes to columns for additional styling options:

• dcs-flex-col – Sets flex direction to column.
• dcs-flex-row – Sets flex direction to row.

dcs_row]
    [dcs_col_half class="dcs-flex-col"]First Name[/dcs_col_half]
    [dcs_col_half class="dcs-flex-row"]Last Name[/dcs_col_half]
[/dcs_row]