How To Make Horizontal Forms In Contact Form 7

Ever wondered how to make horizontal forms in Contact Form 7 WordPress plugin?

By default, Contact Form 7 forms appear in a column. First name followed by last name, followed by email, etc. Using a little bit of CSS we can spice up our Contact Form 7 form to be horizontal. Or, have two rows per column.

Make Horizontal Forms In Contact Form 7

To make your form horizontal, including the submit button, just add display: flex to your form. You can do this in the customizer (by going to Appearances -> Customize -> Additional CSS) and typing the following CSS:

.wpcf7-form {
    display: flex;
    gap: 1rem;
}
.wpcf7-form > p {
    max-width: 20%;
}

The display: flex makes your form horizontal. The gap sets the distance between the columns. Then, for each form field (which WPCF7 wraps in a paragraph tag), we set the max-width to 20%. That’s because I had 5 fields and 100% divided by 5 is 20%. If you had 4 fields, you’d make the max-width 25%. If you had 3 fields, the max-width would be 33.333333%. And so, on.

Make Your Contact Form 7 Form Have Columns Of 2

A lot of times it is desired to have 2 columns per row. For example, having First Name and Last Name side by side. To do that, we just group the forms together with HTML inside of the form code. Then we style it. So make your form like this, adding a <div> before the group of two, and an </div> after the group of two.

<div class="my-row">
   <label> Your name
    [text* your-name autocomplete:name] </label>

   <label> Your email
    [email* your-email autocomplete:email] </label>
</div>

<div class="my-row">
    <label> Subject
    [text* your-subject] </label>

    <label> Your message (optional)
    [textarea your-message] </label>
</div>

[submit "Submit"]

Then, add the CSS:

.wpcf7-form .my-row {
    display: flex;
    column-gap: 1rem;
}
.wpcf7-form .my-row p {
    max-width: 50%;
}

That’s it!

Some Additional Styling

Here’s the additional styling I did in the video to center the submit button and space it out from the form.

.wpcf7-form input[type="submit"] {
   margin-left: auto;
   margin-right: auto;
   display: block;
   width: 200px;
   margin-top: 2rem;
}

More Contact Form 7

See How To Add Classes To Contact Form 7 Field and How To Add Decorative Image To Contact Form 7 Submit Button.