Contact Form 7 is WordPress’s most popular free form plugin, powering millions of sites. But it has one persistent annoyance: it automatically wraps form elements in <,p>, and <,br />, tags, breaking custom layouts and CSS styling.
Here’s how to fix it, three methods, from simplest to most flexible.
The Problem: Unwanted HTML in Your Forms
By default, Contact Form 7 runs WordPress’s wpautop() function on your form markup. This adds paragraph tags around each line and converts line breaks to <,br />, tags.
The result? Your carefully crafted form layout breaks. Flexbox and grid layouts get disrupted. Custom CSS doesn’t behave as expected. Form fields end up with unwanted spacing.
This is especially frustrating when you’re building multi-column forms, inline field groups, or forms with custom styling.
Method 1: wp-config.php (Recommended)
The simplest and most reliable fix. Add this single line to your wp-config.php file:
define( 'WPCF7_AUTOP', false ),This globally disables the auto-paragraph feature for all Contact Form 7 forms on your site. It’s the cleanest approach because:
- It loads before any theme or plugin code
- It survives theme changes
- It affects all forms consistently
- Zero performance overhead
Where to add it: Open wp-config.php in your WordPress root directory. Add the line anywhere above the /* That's all, stop editing! */ comment.
Method 2: Theme Filter (functions.php)
If you prefer to keep the change within your theme, add this filter to your theme’s functions.php file or a custom plugin:
add_filter( 'wpcf7_autop_or_not', '__return_false' ),This does the same thing but ties the behavior to your active theme. If you switch themes, you’ll need to add it again.
Best for: Theme-specific customizations where you want the fix bundled with other theme modifications.
Method 3: Per-Form Control with CSS
If you only want to fix specific forms (not all), you can keep autop enabled and override with CSS:
.wpcf7-form p {
display: contents,
}
.wpcf7-form br {
display: none,
}This visually removes the paragraph and break elements without actually disabling the feature. Useful when you need autop for some forms but not others.
Which Method Should You Use?
| Method | Scope | Survives Theme Change | Best For |
|---|---|---|---|
wp-config.php |
All forms | Yes | Most sites (recommended) |
functions.php filter |
All forms | No | Theme-specific setups |
| CSS override | Per form | Depends | Selective fixes |
After Disabling Autop: Form Markup Tips
Once you remove the auto-formatting, you’re in full control of your form HTML. Here are some tips for clean Contact Form 7 markup:
- Use div wrappers for layout:
<,div class=“form-row“>,...<,/div>, - Apply flexbox or grid directly to
.wpcf7-formfor multi-column layouts - Group related fields with
<,fieldset>,for accessibility - Add labels explicitly, without autop, labels need proper wrapping
Common Issues After Removing Autop
Forms look compressed: Without auto-paragraphs, fields may stack without spacing. Add CSS margin or padding to your form fields.
Validation messages misaligned: CF7’s error messages may shift position. Use .wpcf7-not-valid-tip to style them.
Conditional fields break: If you’re using CF7 conditional fields plugins, test after disabling autop, some rely on the paragraph structure.
Need help building custom WordPress forms? We build advanced form solutions for businesses, from multi-step forms to payment-integrated checkouts. Get in touch.
