How To create a one row form using contact form 7

Many of my clients, request Lead capture forms using cf7. They ask to display the fields side by side so it looks attractive and more convenient.

So, how to create a one row form using cf7?

In this brief tutorial, I will show you how to create a stunning one row form, using cf7.

First, we will need to create a new contact form and we can create 2 text fields, Name, Email and of course a submit button.

Here is the HTML code for our demo form:

Now check out, how my form looks, before I add the CSS code.

Of course, this will be different from one person to another, since we are not using the same theme, but we can control the look and feel of the form using css, and you can adjust that code to suite your needs.

here is the CSS code that i created for this form.

Lets see how my form looks now.

As you can see the form now shows in one row, but it needs more styling and this is why we will require to adjust the cf7 style to make this fit perfectly into my theme.

Here is the final CSS code.

And here is the final live form.

if you have any question regarding the brief tutorial, please let me know.

Thank you

You May Also Like

About the Author: Editorial Staff

Leave a Reply

Your email address will not be published. Required fields are marked *