How to Create Two Columns in Contact Form 7

Contact Form 7 outputs a flat list of form fields without any built-in layout system. Creating two columns requires adding CSS classes to form fields and writing CSS that arranges them in a grid. It sounds more technical than it is – the code below handles the complete two-column layout with responsive stacking on mobile.

Understanding How Contact Form 7 Outputs HTML

Each field in Contact Form 7 is wrapped in a <p> tag when you use the default form template. The form tag editor lets you add CSS classes to individual fields. Adding a class of half-width to two adjacent fields and then targeting those classes with CSS grid achieves the two-column effect.

Step 1: Add CSS Classes to Fields

In your Contact Form 7 form editor, click on a field shortcode to open the field editor. Add a class in the Class attribute field:

[text* your-name class:half-field placeholder "Your Name"]
[email* your-email class:half-field placeholder "Your Email"]

Fields with the half-field class will be placed side by side. Fields without this class span the full width.

Need help with your WordPress site? Describe your project and get a free estimate.

Step 2: Add the CSS

Add this CSS to your theme’s customizer (Appearance -> Customize -> Additional CSS) or to your child theme’s stylesheet:

.wpcf7 form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.wpcf7 form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Full width fields */
.wpcf7 form p:not(:has(.half-field)) {
  grid-column: 1 / -1;
}

/* Two-column fields */
.wpcf7 form p:has(.half-field) {
  grid-column: span 1;
}

/* Submit button always full width */
.wpcf7 form .wpcf7-submit {
  grid-column: 1 / -1;
}

/* Stack on mobile */
@media (max-width: 600px) {
  .wpcf7 form {
    grid-template-columns: 1fr;
  }
}

Step 3: Alternative Method Using Wrappers

If the CSS grid approach does not work with your theme (some themes add their own styling that conflicts), use an HTML wrapper approach instead. In the form editor, add raw HTML divs around the fields you want side by side:

<div class="cf7-row">
  [text* your-name placeholder "Your Name"]
  [email* your-email placeholder "Your Email"]
</div>

Then target the wrapper with CSS:

.cf7-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .cf7-row {
    grid-template-columns: 1fr;
  }
}

Step 4: Three and Four Column Layouts

The same approach works for three columns by changing grid-template-columns: 1fr 1fr to grid-template-columns: 1fr 1fr 1fr. For a mixed layout (one row of three columns and one row of two), use different wrapper divs with different grid column counts for each row.

Making It Work With Popular Themes

Some themes (particularly older WooCommerce-focused themes) add their own CSS to Contact Form 7 that uses float-based layout. If the CSS grid approach does not work, add float: none !important to the field wrappers to clear the theme’s floats before applying grid: .wpcf7 form p {{ float: none !important; }} Then apply the grid CSS as described above. The combination of clearing floats and applying CSS grid works on virtually all themes including those with legacy float-based form styling.