Skip to content

How to Create a Grid Layout for Contact Form 7

Contact Form 7 is a popular WordPress form builder plugin powering over one million websites. However, default Contact Form 7 forms do not include built-in multi-column grid layout options, requiring custom CSS code to place fields side by side.

The Grid & Styler For Contact Form 7 And Divi plugin solves this by adding intuitive grid layout tags and visual styling controls.

Pre-Requisites

Section titled “Pre-Requisites”

Create a Contact Form

Section titled “Create a Contact Form”

Create a contact form

  1. Create a new form by navigating to WordPress Admin > Contact > Add New.
  2. You will see a default form template with basic fields, as shown in the screenshot above.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Use Grid Elements to Build Your Layout

Section titled “Use Grid Elements to Build Your Layout”

Use the grid elements to create desired layout.

  1. Update your form template to organize fields into structured rows and columns.

  2. The plugin supports up to a 4-column responsive grid layout using the following elements:

    • row: Creates a layout container row that holds column elements of various widths.
    • 1-col: Occupies the full width (100%) of the parent row. Ideal for full-width fields like message textareas.
    • 1/2-col: Occupies half width (50%) of the row. Perfect for side-by-side fields like First Name and Last Name.
    • 1/3-col: Occupies one-third width (33.3%) of the row. Great for three-column layouts.
    • 1/4-col: Occupies one-fourth width (25%) of the row. Great for four-column layouts.
    • 2/3-col: Occupies two-thirds width (66.6%) of the row. Useful for asymmetric layouts.
    • 3/4-col: Occupies three-fourths width (75%) of the row. Ideal for wide input fields paired with a narrow field.

  3. You can combine different column widths within a row to build custom form layouts, such as:

    • One row with one full-width column (1-col)
    • One row with two half columns (1/2-col + 1/2-col)
    • One row with three equal columns (1/3-col + 1/3-col + 1/3-col)
    • One row with asymmetrical columns (1/3-col + 2/3-col or 2/3-col + 1/3-col)
    • One row with four equal columns (1/4-col + 1/4-col + 1/4-col + 1/4-col)
    • One row with wide and narrow columns (3/4-col + 1/4-col or 1/4-col + 3/4-col)

  4. Once configured, your Contact Form 7 form can be embedded and custom-styled directly inside the Divi Visual Builder.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial