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

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

Many times users wish to add multiple form fields in columns. This can be done by using a wrapper class.

The class you』ll be using for this is: 「uael-cf7-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 tag.

For example –

For a 3 column layout:

For a 2 column layout:

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

[text* your-name placeholder 「Your Name」]

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 implement the same.

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