Debug a Broken Contact Form 7 Grid with Browser DevTools

Leung Charlie — Tue, 20 Oct 2026 09:05:11 +0000

A two-column Contact Form 7 form can look almost right while its inputs extend beyond the container. The labels line up, the gap looks reasonable, and the page still develops horizontal scrolling on a phone.

Start by checking two separate widths: the grid tracks and the controls inside them. A grid can be too wide even when its inputs fit their tracks. An input can also overflow a correctly sized grid.

This walkthrough uses a small, deliberately broken example to show how to distinguish those cases with Chrome DevTools. You will inspect the rendered markup, identify the declarations responsible, and apply a fix scoped to one form layout. The dimensions below are calculated examples, not measurements from a production site.

1 Create a small reproduction

Use a test form on a staging site. Record your WordPress and Contact Form 7 versions, active theme, and page builder so someone else can reproduce the same environment.

Put this markup in the Contact Form 7 Form tab:

<div class="cf7-grid-debug">
  <div class="cf7-grid-debug__grid">
    <p class="cf7-grid-debug__field">
      <label for="grid-name">Name (required)</label>
      [text* your-name id:grid-name autocomplete:name]
    </p>

    <p class="cf7-grid-debug__field">
      <label for="grid-email">Email (required)</label>
      [email* your-email id:grid-email autocomplete:email]
    </p>

    <p class="cf7-grid-debug__field cf7-grid-debug__field--full">
      <label for="grid-message">Message</label>
      [textarea your-message id:grid-message]
    </p>
  </div>

  <p>[submit "Send message"]</p>
</div>

The bracketed expressions are CF7 form-tags. CF7 renders them into controls; they will not become working inputs if pasted into an ordinary HTML file. Do not add another <form> element inside the Form tab.

Embed the saved form using its own shortcode. For this example, place one instance on the test page so the explicit input IDs remain unique. If you replace an existing form template, also review its Mail tab for references to fields that no longer exist.

Add the following CSS to a custom stylesheet or your site's supported custom CSS area. This is the deliberately broken reproduction, not the finished fix:

.cf7-grid-debug {
  max-width: 600px;
  margin-inline: auto;
}

.cf7-grid-debug__grid {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 24px;
}

.cf7-grid-debug__field {
  margin: 0;
}

.cf7-grid-debug__field--full {
  grid-column: 1 / -1;
}

.cf7-grid-debug label {
  display: block;
  margin-bottom: 6px;
}

.cf7-grid-debug .wpcf7-form-control-wrap {
  display: block;
}

.cf7-grid-debug input[type="text"],
.cf7-grid-debug input[type="email"],
.cf7-grid-debug textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #666;
  box-sizing: content-box;
  font: inherit;
}

The explicit content-box makes the second problem reproducible even on sites whose base styles normally use border-box. If your theme overrides one of these declarations, the browser may show a different result. Inspect the winning styles before proceeding.

2 Find the element that actually owns the grid

Open the published test page, right-click the name field, and choose Inspect. In the Elements panel, move upward until you reach .cf7-grid-debug__grid.

The structure should include three direct field wrappers. Inside each wrapper, CF7 renders its control markup. For example, an input may sit inside a .wpcf7-form-control-wrap span.

The direct children of the grid participate in its layout. Here, those children are the field paragraphs. The inputs sit further down the tree.

That distinction matters when debugging an existing form. A rule that changes an input's grid-column will not position its enclosing paragraph. Likewise, applying display: grid to the entire CF7 form can involve unrelated children such as its response message.

Select the intended grid wrapper and look for the grid badge beside it. Click the badge to enable the overlay. Chrome's Layout pane also offers Show track sizes, which helps compare the authored track sizes with their computed widths. See the Chrome DevTools grid inspection guide.

If the grid badge is absent, check the computed display value. Confirm that your selector matches the rendered element and that another rule has not replaced display: grid.

3 Check whether the columns leave room for the gap

In the Styles panel, find:

grid-template-columns: 50% 50%;
gap: 24px;

For a grid with a definite 600px content width, each percentage track is 300px. The gap is additional space:

300px + 24px + 300px = 624px

The tracks and gap already exceed the container before input padding enters the calculation.

Temporarily edit the track declaration in DevTools:

grid-template-columns: repeat(2, minmax(0, 1fr));

For this example, the two flexible tracks share the space remaining after the gap:

(600px - 24px) / 2 = 288px per track

The zero minimum in minmax(0, 1fr) allows each track to shrink below an automatic content-based minimum. It does not, by itself, make every child fit. A fixed-width control or oversized content can still overflow its track. The MDN minmax reference explains how the minimum and maximum track sizes work.

Keep the overlay visible. If the track boundaries now fit but an input still extends past them, move on to that input's box model.

4 Inspect the input separately

Select the name input. In the Computed panel, inspect its width, padding, border, minimum width, and box-sizing.

The reproduction deliberately combines these declarations:

width: 100%;
padding: 12px;
border: 1px solid #666;
box-sizing: content-box;

With content-box, the declared width describes the content area. Padding and borders increase the rendered outer width. In the corrected 288px track, this example produces:

288px content + 24px horizontal padding + 2px borders = 314px

Temporarily change box-sizing to border-box. The padding and borders then fit inside the declared width. See the MDN box-sizing reference.

You can also inspect the selected element through the DevTools Console. With the input still selected in Elements, $0 refers to it:

(() => {
  const control = $0;
  const style = getComputedStyle(control);

  console.table({
    computedWidth: style.width,
    renderedWidth: control.getBoundingClientRect().width,
    boxSizing: style.boxSizing,
    minWidth: style.minWidth,
    paddingLeft: style.paddingLeft,
    paddingRight: style.paddingRight
  });
})();

The rendered width is useful for this untransformed example. On a page using CSS transforms, a bounding rectangle also reflects the transform, so account for that when comparing values.

Avoid changing every input on the website. A blanket width rule can also affect checkboxes, radio buttons, and submit controls. The selectors below target only the text controls used in this example.

5 Save the complete scoped fix

Once the temporary edits explain the overflow, replace the broken CSS with this complete version:

.cf7-grid-debug {
  max-width: 600px;
  margin-inline: auto;
}

.cf7-grid-debug__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.cf7-grid-debug__field {
  min-width: 0;
  margin: 0;
}

.cf7-grid-debug__field--full {
  grid-column: 1 / -1;
}

.cf7-grid-debug label {
  display: block;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.cf7-grid-debug .wpcf7-form-control-wrap {
  display: block;
  min-width: 0;
}

.cf7-grid-debug input[type="text"],
.cf7-grid-debug input[type="email"],
.cf7-grid-debug textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid #666;
  font: inherit;
}

.cf7-grid-debug textarea {
  min-height: 128px;
  resize: vertical;
}

.cf7-grid-debug .wpcf7-not-valid-tip {
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .cf7-grid-debug__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

The track change and border-box address the two demonstrated causes. The remaining sizing rules help the wrappers and controls shrink, while text wrapping accommodates long labels and validation messages.

The 640px breakpoint is a viewport-based choice for this example. A form in a narrow sidebar may need one column even on a wide screen. Set the breakpoint or layout approach around the space your form actually receives.

Save the CSS in a location you maintain, such as an enqueued child-theme stylesheet or the site's custom CSS facility. Avoid editing Contact Form 7's plugin files. Its styling documentation describes the relevant control and validation-message selectors.

Then reload the page. Confirm the saved stylesheet supplies the corrected rules; temporary DevTools edits alone do not update the website. If an old rule remains, inspect the loaded asset and its source before clearing the relevant cache or changing selector specificity.

6 Verify the form in several states

Use the following as an acceptance checklist on the actual WordPress page. These are checks to perform, not a claim that your theme or addons have already passed them.

Check	Expected result for this example
Wide page with a 600px grid	Two 288px tracks with a 24px gap
Viewport widths of 641px and 640px	The example changes from two tracks to one at the declared breakpoint
Phone widths such as 375px and 320px	One column, with controls contained by the form
Longer field labels	Text wraps without covering an adjacent field
Missing required values	Validation messages remain readable and do not overlap controls
Keyboard navigation	Focus follows name, email, message, then submit
Another form without the custom wrapper	These scoped rules do not change it

For a quick overflow signal on the demo grid, run:

(() => {
  const grid = document.querySelector('.cf7-grid-debug__grid');

  if (!grid) {
    console.warn('The demo grid was not found on this page.');
    return;
  }

  console.table({
    availableWidth: grid.clientWidth,
    scrollableWidth: grid.scrollWidth,
    hasHorizontalOverflow: grid.scrollWidth > grid.clientWidth + 1
  });
})();

The 1px tolerance accommodates rounding in this quick check. Use it alongside visual inspection: it does not verify focus visibility, text clipping, mail delivery, or submission storage.

Trigger the form's real validation on the staging page as well. If you conduct a successful submission test, use a controlled test recipient.

7 Follow the winning rule when the problem remains

If the saved fix does not reproduce the DevTools result, collect the computed value and the source declaration for the element that still fails.

What you observe	What to inspect next
The grid declaration is crossed out	The winning selector, stylesheet order, and any important or inline declarations
The grid fits but one control extends beyond it	That control's width, min-width, box-sizing, margins, and transforms
Two columns remain on a phone	The active media query, viewport configuration, and later grid declarations
Unexpected blank rows or spacing appear	The rendered direct children, extra wrappers, paragraph margins, and line breaks
The form is narrow before its own CSS runs	The page builder or theme container's width and padding

Change one suspected cause at a time. When you need to override a theme declaration, target the affected form and property so the change remains understandable later.

8 Apply the same inspection to editor-generated layouts

A visual editor changes how a layout is authored. The rendered page still needs to be inspected in its theme and page-builder context.

For example, CF7 Toolbox's Layout Builder provides visual row and column arrangement. When investigating a form created with it, identify that installation's actual layout container and generated classes before applying a selector. The cf7-grid-debug classes in this tutorial are custom demo classes; they are not presented as the addon's output.

Check the computed display mode, the width available to each field, and the control's box model. Use the grid overlay when the actual container uses Grid. This tutorial does not establish compatibility with a particular addon version.

Before keeping a fix, record the element, the winning declaration that caused the problem, and the test that demonstrates the correction. That gives the next person maintaining the form a reason for the CSS rule.

Author affiliation: CF7 Toolbox.

AI disclosure: The text and example code were generated with AI assistance. The examples require verification in the WordPress environment where they will be used.

DEV Community: Leung Charlie