---
title: "Divi CF7 Styler"
url: "https://divipeople.com/docs/divi-cf7-styler-doc.md"
canonical: "https://divipeople.com/docs/divi-cf7-styler-doc/"
published: "2025-03-14"
modified: "2026-04-30"
author: "Fahim Reza"
tags:
  - "Free Plugins"
---

# Divi CF7 Styler

**[Divi CF7 Styler](https://divipeople.com/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](https://divipeople.com/divi-cf7-styler/)**, follow these steps:

### Step 1: Prerequisites

Make sure you have the following installed and activated:

- Divi Theme
- **[Contact Form](https://wordpress.org/plugins/contact-form-7/)[7](https://wordpress.org/plugins/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**: [dcs_col_full]
- **Half width**: [dcs_col_half]
- **One-third**: [dcs_col_third]
- **Two-thirds**: [dcs_col_two_third]
- **One-fourth**: [dcs_col_fourth]
- **Three-fourths**: [dcs_col_three_fourth]

### ****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]
```