Contact Form 7 / Layout guide
Contact Form 7 Columns
One form. The right space for every field.
Put related fields side by side, give longer answers a full row, and let the layout adapt when space gets tight. Build one, two, three or four columns with CSS or a visual layout editor.
Pair short answers. Keep the message open. On a narrow form, read from top to bottom.
Start with the structure
How do you put Contact Form 7 fields in columns?
Group each label and field in a wrapper, place those wrappers in a row, then give the row a responsive grid. A visual addon can create the arrangement through its editor instead.
A row decides the column count
Use two columns for a pair such as name and email. Use three or four for short, related answers when the form is wide enough. One form can contain a different arrangement in every row.
A field fills its own column
The field can be 100% wide inside its grid cell. Setting two inputs to 50% width does not, by itself, put their labels, wrappers and error messages into a reliable two-column row.
Choose one layout method for each form. Use the manual wrappers and CSS below, or let your visual addon manage the structure. Mixing competing row rules makes alignment harder to diagnose.
See the arrangement
Try one, two, three or four columns
Change the target column count, then reduce the available width. The fields keep their reading order while the message stays on its own full-width row.
Two-column target. The actual number of columns depends on the available form width.
Method 1 / HTML wrappers + CSS
Contact Form 7 two-column layout: a complete starter
This example puts name and email in one row when the form has at least 640px of space. Subject, message and submit each keep their own row. Below that width, every field stacks.
01 Add the structure in the Form tab
In WordPress, open Contact > Contact Forms, select the form, and edit its Form tab. Keep a copy of the original markup. For a new starter form, use the complete template below. For an existing form, keep its field names and validation options while adding the wrappers.
<div class="cf7tb-layout">
<div class="cf7tb-row cf7tb-row--2">
<div class="cf7tb-field">
<label><span>Your name (required)</span>[text* your-name autocomplete:name]</label>
</div>
<div class="cf7tb-field">
<label><span>Your email (required)</span>[email* your-email autocomplete:email]</label>
</div>
</div>
<div class="cf7tb-row cf7tb-row--1">
<div class="cf7tb-field">
<label><span>Subject</span>[text your-subject]</label>
</div>
<div class="cf7tb-field">
<label><span>Your message</span>[textarea your-message]</label>
</div>
<div class="cf7tb-field">
[submit "Send message"]
</div>
</div>
</div>Paste only the form markup and form-tags into this tab. Do not add another <form> element; Contact Form 7 supplies it.
02 Add the shared layout CSS
Put this CSS in one maintained location that loads on the form's page, such as Bricks page or site Custom CSS, WordPress Additional CSS where available, or an enqueued child-theme stylesheet. Paste it as plain CSS in a CSS editor.
/* Load this CSS on each page that uses the layout. */
.wpcf7 .cf7tb-layout {
container-name: cf7tb-layout;
container-type: inline-size;
min-width: 0;
}
.wpcf7 .cf7tb-layout,
.wpcf7 .cf7tb-layout * {
box-sizing: border-box;
}
.wpcf7 .cf7tb-layout .cf7tb-row {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
align-items: start;
margin: 0 0 20px;
}
.wpcf7 .cf7tb-layout .cf7tb-field {
min-width: 0;
margin: 0;
}
.wpcf7 .cf7tb-layout .cf7tb-field p {
margin: 0;
}
.wpcf7 .cf7tb-layout .cf7tb-field label,
.wpcf7 .cf7tb-layout .cf7tb-field label > span,
.wpcf7 .cf7tb-layout .wpcf7-form-control-wrap {
display: block;
}
.wpcf7 .cf7tb-layout .cf7tb-field label > span:first-child {
margin-bottom: 6px;
}
.wpcf7 .cf7tb-layout :is(
input[type="text"], input[type="email"],
input[type="tel"], input[type="url"],
input[type="number"], input[type="date"],
select, textarea
) {
width: 100%;
max-width: 100%;
min-width: 0;
}
.wpcf7 .cf7tb-layout .cf7tb-full {
grid-column: 1 / -1;
}
.wpcf7 .cf7tb-layout :is(label, .wpcf7-not-valid-tip) {
overflow-wrap: anywhere;
}
@container cf7tb-layout (min-width: 640px) {
.wpcf7 .cf7tb-layout :is(
.cf7tb-row--2, .cf7tb-row--3, .cf7tb-row--4
) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@container cf7tb-layout (min-width: 840px) {
.wpcf7 .cf7tb-layout .cf7tb-row--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wpcf7 .cf7tb-layout .cf7tb-row--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}The rules apply only inside .cf7tb-layout wrappers in CF7 markup. They manage columns and containment; your existing theme or form style supplies colors, borders and button appearance. Every placement of the saved form will include its new wrappers, so load this CSS wherever that layout is needed.
Width means the form's available space. These are container queries, not screen-width rules. A narrow sidebar stays single-column even on a large monitor. Browsers without container-query support retain the single-column base layout.
03 Keep the fields connected to your Mail settings
Moving an existing field into a wrapper does not require renaming it. If you add or rename fields, review the matching mail-tags in the Mail tab. For the starter above, these are the message-body values:
Name: [your-name]
Email: [your-email]
Subject: [your-subject]
Message:
[your-message]This is a message-body reference, not a complete email configuration. Keep the site's valid recipient and sender settings, save the form, and check a test submission on your own test page.
One form / Different row widths
Three columns, four columns and multiple rows
Use the same outer .cf7tb-layout wrapper and the same CSS. Change the row class to select its wide-layout target. There is no need for a separate stylesheet for each column count.
1 column
cf7tb-row--1Messages and detailed answers.
2 columns
cf7tb-row--2Pairs such as name and email.
3 columns
cf7tb-row--3A small group of related details.
4 columns
cf7tb-row--4Short answers in a wide form.
A three-column row
Insert this row inside .cf7tb-layout, alongside your other rows. It displays three columns from 840px, two from 640px to below 840px, and one below 640px.
<div class="cf7tb-row cf7tb-row--3">
<div class="cf7tb-field">
<label><span>City</span>[text city autocomplete:address-level2]</label>
</div>
<div class="cf7tb-field">
<label><span>State or region</span>[text region autocomplete:address-level1]</label>
</div>
<div class="cf7tb-field">
<label><span>Postal code</span>[text postal-code autocomplete:postal-code]</label>
</div>
</div>A four-column row with full-width notes
The first four fields share the wide row. The cf7tb-full class makes the notes field span all available columns at every breakpoint.
<div class="cf7tb-row cf7tb-row--4">
<div class="cf7tb-field">
<label><span>Reference</span>[text project-reference]</label>
</div>
<div class="cf7tb-field">
<label><span>Team size</span>[number team-size min:1]</label>
</div>
<div class="cf7tb-field">
<label><span>Start date</span>[date start-date]</label>
</div>
<div class="cf7tb-field">
<label><span>Location code</span>[text location-code]</label>
</div>
<div class="cf7tb-field cf7tb-full">
<label><span>Project notes</span>[textarea project-notes]</label>
</div>
</div>To start a separate row
Close the current .cf7tb-row and add another row inside the same outer wrapper. Use this when a new group needs a different number of columns or a deliberate starting point.
To let fields wrap naturally
Add more .cf7tb-field elements to the existing row. Five fields in a four-column grid produce four cells on the first line and one on the next. Add cf7tb-full if that last field should fill the row.
The extra fields above need matching mail-tags if their values should appear in notification emails. Use unique field names within the form.
Method 2 / Visual editing
Arrange columns with drag and drop
If you prefer to organize fields visually, use the row and column workflow in CF7 Layout Builder. Plan the same structure first, then arrange the supported fields in the editor.
Open the form in the layout editor
Start with the form you want to change and keep a copy of its current setup. Identify the fields that belong together before moving them.
Choose a row arrangement
Set the row to one, two, three or four columns using the available row controls. Reserve single-column rows for longer questions, message fields and the final action.
Drag the fields into position
Move related fields into their columns and arrange the rows in reading order. Keep each label, field and validation message together.
Save and check the actual page
Review the published layout at wide and narrow widths. Check the editor's responsive options where available, then verify the result in the front end.
Check your installed version. Exact control names and responsive options can vary. The 640px and 840px thresholds in this guide belong to the supplied CSS example; they are not a claim about the addon's default breakpoints.
For the addon and its supported workflow, see CF7 Layout Builder. For product-specific setup, start with CF7 Toolbox documentation.
Make room on smaller screens
Let the form width decide when columns stack
A four-column desktop layout is a target for a wide form, not a requirement for every device. The CSS in this guide uses these starting points:
| Row target | Below 640px | 640px to below 840px | 840px and wider |
|---|---|---|---|
| 1 column | 1 | 1 | 1 |
| 2 columns | 1 | 2 | 2 |
| 3 columns | 1 | 2 | 3 |
| 4 columns | 1 | 2 | 4 |
Widths are CSS pixels measured inside the layout container. Adjust the thresholds if your labels, field types or page layout need more room.
Keep the reading order predictable
Arrange the markup in the order people should complete the form. Let Grid place fields in that same order. Avoid using visual reordering to create a different desktop sequence from the keyboard sequence.
Test more than empty fields
Review long labels, a long email address, date controls and visible errors. An extra line of label or error text should be allowed to grow; avoid fixed row heights and clipped feedback.
- Check the form at phone widths such as 320px and 375px, as well as its actual desktop placement.
- Move through the fields with Tab. Keep a visible focus indicator and a clear label for every field.
- Test browser zoom, a missing required field and the successful submission state on your own test page.
- Keep the message and any longer instructions full-width when narrow columns make them harder to use.
When a row does not line up
Common Contact Form 7 column problems
Inspect the rendered row, its direct children and the winning CSS rule before changing the whole form.
| What you see | What to check | What to change |
|---|---|---|
| Everything stays in one column | The available container width, loaded stylesheet and row class. | Confirm the form is wide enough for the chosen breakpoint and that its row has both cf7tb-row and a column-count class. |
| A field pushes past the edge | A fixed input width, minimum width or a long unbroken label. | Keep minmax(0, 1fr), min-width: 0 and scoped 100% field widths. Remove the conflicting fixed width. |
| The second field starts on the next line | Separate wrappers, floats, percentage widths plus gaps, or missing Grid rules. | Make each label-and-field wrapper a direct grid item. Let Grid allocate the column widths and gap together. |
| There are unexpected blank cells or gaps | Extra paragraphs, line breaks or incorrectly closed wrappers in the rendered row. | Repair the nesting and remove unintended direct children. Do not hide every paragraph or line break across all CF7 forms. |
| Input tops are not level | One label wraps to a second line while the other stays short. | Shorten the labels, allow more space or use fewer columns. Avoid fixed heights that clip translated or enlarged text. |
| An error message overlaps the next row | Fixed heights, absolute positioning or clipped overflow. | Keep the error in the normal flow inside its field wrapper. Allow the row to grow to fit the tallest field group. |
| The editor and front end differ | Theme rules, addon-generated CSS and cached page styles. | Inspect the front-end computed styles, remove competing layout rules and refresh the relevant cache. |
A wrapped error can make its row taller. That is expected. The next row should move down with it, while other fields in the current row remain aligned to the top.
Quick answers
Questions about Contact Form 7 columns
Can I make a two-column form without an extra plugin?
Yes. Add HTML wrappers around the CF7 form-tags and load the CSS above. The visual addon is an alternative if you prefer arranging supported fields through an editor.
Can one form mix one, two, three and four columns?
Yes. Keep one outer .cf7tb-layout wrapper and give each row its own column-count class. Each row follows the same responsive rules, so wide arrangements reduce their column count when space is limited.
Why does a three-column row become two columns before becoming one?
The shared example uses an intermediate two-column arrangement from 640px to below 840px. A third field then begins the next line. If that is not appropriate for your field group, remove .cf7tb-row--3 from the 640px rule so it changes directly from one column to three at 840px.
How do I keep a message or submit control full-width?
Place it in its own one-column row, or add cf7tb-full to its field wrapper. This spans the wrapper across the grid; it does not automatically stretch the submit button itself.
Does changing textarea rows create multiple form rows?
No. A textarea's rows setting relates to that text area's height. Multiple form rows come from the arrangement of the field wrappers and their parent grid.
Will changing the layout affect validation or email delivery?
The layout CSS controls placement. Preserve the field names, required options and CF7-generated feedback. Review mail-tags after adding or renaming fields, then test validation and a submission after the layout change.
Finish the layout
A short check before you publish
- Every field has a visible label and stays with its validation message.
- Each row uses the intended count, and full-width fields span correctly.
- The form fits its actual page width without horizontal scrolling.
- Narrow layouts preserve the same reading and keyboard order.
- Existing mail-tags still match the fields, and an authorized test submission works.
Choose your next step
Need to change colors, borders or field appearance? Continue with the Contact Form 7 CSS style guide. Prefer to arrange the layout visually? Review the Layout Builder addon.