How to create grid layout for Contact Form 7

Contact Form 7 is popular form builder plugin. It has over million active installs.

Contact form 7 doesn’t have an in-build grid to layout the form element. It’s a pain-point for users.

The Grid & Styler For Contact Form 7 And Divi plugin provides a grid layout functionality.

Pre-requisites

  1. A WordPress website
  2. Divi Theme by Elegant Themes
  3. Contact Form 7 plugin
  4. Grid & Styler For Contact Form 7 And Divi plugin

Tools

  1. Computer

Total Duration : 5 minutes

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 1 - Create a contact form

Create a contact form
  1. Create a Contact Form 7 by going to WordPress Admin > Contact > Add New
  2. You'll get a form with default fields on it as per the screenshot above.
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 2 - Use the grid elements to create desired layout.

Use the grid elements to create desired layout.
  1. Change the contact form template above to include grid element items consisting of rows and columns. The row and columns are defined below
  2. Up-to a 4-column grid layout is supported. We provide the following elements.
    • row This element creates a row for grid. It embed columns of different sizes as children.
    • 1-col This element creates a column. It occupies full width of its parent row. This column will embed a form element like text, textarea, checkbox etc.
    • 1/2-col This element creates a half column. It occupies half the width of its parent row. This column will embed a form element like text, textarea, checkbox etc.
    • 1/3-col This element creates a one third column. It occupies one third the width of its parent row. This column will embed a form element like text, textarea, checkbox etc
    • 1/4-col This element creates a one fourth column. It occupies one fourth the width of its parent row. This column will embed a form element like text, textarea, checkbox etc
    • 2/3-col This element creates a two third column. It occupies two third the width of its parent row. This column will embed a form element like text, textarea, checkbox etc
    • 3/4-col This element creates a three fourth column. It occupies three fourth the width of its parent row. This column will embed a form element like text, textarea, checkbox etc
  3. One can use a combination of columns with a row to create the layout. Following are the combinations.
    • One row with one column
    • One row with two 1/2-col
    • One row with three 1/3-col.
    • One row with one 1/3-col and one 2/3 col (and vice-a-versa)
    • One row with four 1/4-col
    • One row with one 1/4-col and one 3/4 col (and vice-a-versa)
  4. The form template below can be used to replace divi's contact form.
FREE DOWNLOAD

Start your FREE trial. No credit cards required.