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.
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.
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.
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.
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.
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.
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.
Copy/paste your text fields (e.g. Name, Email, URL, Number, Date etc) inside –Your Code– area.
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.
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.
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…
Your Contact Form is ready with the Columns/Grids and ready to use.