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

If you want to add multiple form fields in columns, you can do this using a wrapper class.

Here’s what you need to do:

• Use a parent wrapper with the class “uael-cf7-col” for each row.
• Wrap each form element inside a tag.

For example:

For a 3-column layout:

<div class="uael-cf7-col">
<span> Field 1 </span>
<span> Field 2 </span>
<span> Field 3 </span>
</div>

For a 2-column layout:

<div class="uael-cf7-col">
<span> Field 1 </span>
<span> Field 2 </span>
</div>

Note: You can replace Field 1, Field, Field 2, 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 screenshot that will help you understand how you can implement the same.

The above screenshot is an example of the backend settings in Contact Form 7. Please take a look at the screenshot below to see how it looks.

That’s all! If you face any issues, please feel free to reach out. We’re always here to help.