/ Documentation /General/How to Set Multiple Column Fields in Contact Form 7 Styler of Spectra?

How to Set Multiple Column Fields in Contact Form 7 Styler of Spectra?

Many times you wish to add multiple form fields in column structure. This can be done by using a wrapper class.

The class you’ll be using for this is: “uagb-cf7_styler-col

You will need to use a parent wrapper with the above class name for every line you wish to insert. You will also need to enclose every Form element within a <span>tag.

For example –

For a 3 column layout:

<div class="uagb-cf7_styler-col">
 <span class="uagb-cf7_styler-col-1"> Field 1 </span>
 <span class="uagb-cf7_styler-col-2"> Field 2 </span>
 <span class="uagb-cf7_styler-col-3"> Field 3 </span>
</div>

For a 2 column layout:

<div class="uagb-cf7_styler-col">
 <span class="uagb-cf7_styler-col-1"> Field 1 </span>
 <span class="uagb-cf7_styler-col-2"> Field 2 </span>
</div>

Note: You can replace Field 1Field 2Field 3, etc with the field code of Contact Form 7. Such as :

<span>[text* your-name placeholder “Your Name”]</span>

All this has to be done in the form you create using Contact Form 7. Here is a quick code that will help you understand how you implement the same.

<div class="uagb-cf7_styler-col">
<span class="uagb-cf7_styler-col-1">[text* your-name placeholder "Your Name"]</span>
<span class="uagb-cf7_styler-col-2">[email* your-email placeholder "Your Email"]</span>
</div>
<div class="uagb-cf7_styler-col">
<span>[text your-subject placeholder "Your Subject"]</span>
</div>
<div class="uagb-cf7_styler-col">
<span>[textarea your-message placeholder "Your Message"]</span>
</div>
<div class="uagb-cf7_styler-col">
<span>[submit "Send"]</span>
</div>

The above code was an example of the backend settings in Contact Form 7. Take a look at the screenshot below to see how it looks.

Cf7 Gutenberg
Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

On this page
Build Ultra High Performance
Websites, Without Coding

Whether you are a beginner, marketer, or professional, Spectra has the tools and resources you can rely on to succeed

Get Notified When Available

Note - You can purchase the Essential Toolkit now and easily upgrade to the Business Toolkit once it becomes available.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Get your hands on Spectra Pro

Enter your name and email address to get access to Spectra Pro.