Columns or Grid

Video Documentation

Please see this:

Written Documentation

In this documentation, we will show you how to create columns/grids using Ultimate Addons For Contact Form 7. Basic knowledge of WordPress administration is required to use these add-ons.

We’ll get you to setup Columns/Grids by the following steps…

1. Turn on the Feature First

If you have installed Contact Form 7 and Ultimate Addons For Contact Form 7 in your system, you will find a Contact option in your Admin Screen. Open Contact>Ultimate Addons.

Opening Ultimate Addons - Themefic

After you click on Ultimate Addons, you will get access to the Ultimate Addons window and see a list of features with radio buttons available for you on your dashboard. From the options you turn on the Column or Grid option and Save Changes from below.

Turn on the feature - Themefic

2. Setup Your Contact Form

Now it is time to setup your contact form in columns/grids. Open Contact>Contact Forms. You will find a Contact Form 1 already set up and placed for you in the Dashboard. You can either work on the existing or create a new form from the Contact>Add New.

Contact Form Contact Form 1 - Themefic

Open Contact form 1 (or the form you just created). You will get a Contact Form Editor on your admin screen with an Add column Option.

add Column - Themefic

3. Choose your Column Type and Insert Tag

Now, click on Add Column. You will find options for integrating 2, 3, and 4 columns on your Contact Form. The free version of the plugin offers you this. For Pro users there is a customized option of creating columns in the panel. We will get to that later on a different documentation.

Insert Tag - Themefic

From Insert Tag option you can enter the number of columns you want from the options given on the tray. Click on your desired Insert Tag and you will find the tag in your administration panel.

your code - Themefic

You will see the tag/syntax inside the administration panel like this.

4. Rearrange Your Codes

Suppose for the three columns, you want your name, email, and subject text field inside three columns/grids in one row. Now, it’s all about rearranging your codes inside the column tags.

Rearranging the Syntaxes - Themefic

Copy/paste your text fields (e.g. Name, Email, URL, Number, Date etc) inside –Your Code– area.

Rearranging the Syntaxes 2 - Themefic

5. Copy the Shortcode

After you have arranged your syntaxes the following way, you save your codes. Then copy the Shortcode above the administration panel.

Copy Short Code - Themefic

6. Place the Shortcode Inside Your Website Page

After you’ve copied the Shortcode from the administration panel, go to the Page where you want to place your Contact Form.

Copy Paste the Short Code - Themefic

You can place your Contact Form anywhere on your website page. After you’ve placed the Shortcode inside your Page, Click Update. Then, preview the changes…

Final form - Themefic

Your Contact Form is ready with the Columns/Grids and ready to use.