Are you looking for a way to show more than one Contact Form 7 fields in a single row. You might have seen web forms with fields that show first name, middle name and last name on a single line. This not only looks good visually but also it is helpful from a UX point of view to group similar or related fields together and on the same line. In this article, we will see how we can add fields with custom widths on a single line and instead of showing a single field on a single line, we will show them in two or three columns. We will not be using any other plugin to add this feature which means your website speed won’t be affected. Let’s get started.
We will do this in two steps.
In the first step, we will place some CSS code in your theme’s Additional CSS section. In the second step, we will go to Contact Form 7’s Form editing screen and write our form’s code in a way so that it shows up in two or three columns.
Copy the code below and then go to “Appearance” > “Customize” > “Additional CSS” and paste the code. Remember to press the “Publish” button after pasting.
.cf7-row {
display: flex;
}
.cf7-half label,
.cf7-one-third label,
.cf7-one-fourth label {
display: inline;
}
.cf7-half {
width: 50%;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
}
.cf7-one-third {
width: 33.333333%;
display: inline-block;
padding: 10px;
}
.cf7-one-fourth {
width: 25%;
display: inline-block;
}
@media (max-width: 767px) {
.cf7-row {
flex-wrap: wrap;
}
.cf7-half,
.cf7-one-third,
.cf7-one-fourth {
width: 100%;
}
}Now let’s see how we can set a row with two or three columns in our form.
We will first add a row and then we will either add two or three columns inside that row.
First of all, go to your form’s edit screen by going to “Contact” and then clicking on the respective form’s “Edit” link.
Before copying and pasting the following code snippets, let’s try to understand what each piece of code does.
First we will add a row by writing the following html code. <div class="cf7-row">...</div>
Inside the div tags, we will add the column divs.
For a two columns layout, we will add two of these tags. <div class="cf7-half">...</div>
For a three column layout, we will add three of these tags. <div class="cf7-one-third">...</div>
Inside the div tags for the columns, the contact form 7 tags will be written.
How to Add Three Columns to Contact Form 7
Add the following piece of code. This adds three text fields on the same line with labels First Name, Middle Name and Last Name. Each of the fields will have a width of 33%.
<div class="cf7-row">
<div class="cf7-one-third">
<label>First Name
[text FirstName]
</label>
</div>
<div class="cf7-one-third">
<label>Middle Name
[text MiddleName]
</label>
</div>
<div class="cf7-one-third">
<label>Last Name
[text LastName]
</label>
</div>
</div>How to Add Two Columns to Contact Form 7
Now, we will add a row of two fields. Each of the fields will have a width of 50%.
<div class="cf7-row">
<div class="cf7-half">
<label>First Name
[text FirstName]
</label>
</div>
<div class="cf7-half">
<label>Last Name
[text LastName]
</label>
</div>
</div>All of the above fields will become full width on screens smaller than 767px.
Outside of these rows, you can add any of the other contact form 7’s fields etc.
