How to Style Contact Form 7 in WordPress
By default, Contact Form 7 works well functionally, but its appearance rarely matches the design and branding of your site. The good news is that the plugin outputs clean markup that you can easily target and customize with CSS. With a bit of planning, you can transform those generic forms into polished, conversion-focused elements that feel native to your theme.
Table of contents
Understand How Contact Form 7 Outputs HTML
Before writing any CSS, it’s important to understand what the plugin generates on the front end. When you publish a form, Contact Form 7 wraps it inside a container and uses predictable selectors that you can hook into.
In a typical output, you will see:
- A main container wrapping the whole form.
- Each input field wrapped in a paragraph element.
- Input, textarea, and select elements with recognizable structure.
- Validation errors and success messages rendered as additional elements after submission.
This consistent structure makes it straightforward to add custom form styling using your theme’s stylesheet or a custom CSS file.
Where to Add Your Custom CSS
There are several safe places to add styles without losing them during updates. The right choice depends on how you manage your WordPress setup.
Using the Theme’s Customizer
For many site owners, the fastest option is the Additional CSS area in the Customizer:
- Go to Appearance > Customize in the WordPress dashboard.
- Open the Additional CSS panel.
- Paste your CSS and click Publish.
This method is quick, user-friendly, and update-safe for most themes.
Using a Child Theme Stylesheet
If you are comfortable editing theme files, a child theme stylesheet gives you more control and versioning:
- Create and activate a child theme if you don’t already use one.
- Add your styles to the child theme’s style.css file.
- Keep all form-related CSS grouped and commented for maintainability.
This is the preferred approach for developers who want a stable, trackable place for custom code.
Using a Custom CSS Plugin
If theme access is limited or you want to centralize CSS separately, you can install a simple custom CSS plugin. Choose a lightweight solution that loads styles on the front end without adding unnecessary bloat.
Basic Styling for Inputs, Textareas, and Selects
The first step in improving the look of Contact Form 7 is to standardize the appearance of all fields: text inputs, email inputs, textareas, and select boxes.
Targeting Core Form Elements
A practical approach is to target all form elements within the main form container so that styles apply consistently to every field:
<style>
form.wpcf7-form input[type="text"],
form.wpcf7-form input[type="email"],
form.wpcf7-form input[type="url"],
form.wpcf7-form input[type="tel"],
form.wpcf7-form input[type="number"],
form.wpcf7-form input[type="date"],
form.wpcf7-form input[type="file"],
form.wpcf7-form textarea,
form.wpcf7-form select {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
line-height: 1.4;
box-sizing: border-box;
}
</style>
This example ensures all fields are full-width, consistently padded, and in line with modern design expectations. Adjust values to match your brand’s typography and spacing.
Improving Focus States
Accessible focus styles help keyboard users navigate your form and boost usability. Rather than removing the outline, enhance it:
<style>
form.wpcf7-form input[type="text"]:focus,
form.wpcf7-form input[type="email"]:focus,
form.wpcf7-form textarea:focus,
form.wpcf7-form select:focus {
border-color: #0073aa;
outline: 2px solid #cbe7ff;
outline-offset: 0;
}
</style>
Use a color with good contrast, ideally aligned with your site’s primary accent color.
Styling Labels and Field Layout
A well-designed form is not only visually appealing but also structured for quick scanning and readability. Labels, spacing, and layout matter as much as the fields themselves.
Labels and Helper Text
To improve clarity, give labels consistent typography and spacing:
<style>
form.wpcf7-form label {
display: block;
font-weight: 600;
margin-bottom: 0.35rem;
}
form.wpcf7-form p {
margin-bottom: 1.25rem;
}
</style>
Many forms include helper text or small instructions. You can target these using simple patterns like emphasized or small text within form paragraphs:
<style>
form.wpcf7-form p em,
form.wpcf7-form p small {
font-size: 0.875rem;
color: #666;
display: block;
margin-top: 0.25rem;
}
</style>
Creating Two-Column Layouts
For longer forms, splitting fields into multiple columns can improve usability on larger screens. You can add structure using simple container markup in your form and then handle layout with CSS.
Once your form markup groups fields you want in columns, use a responsive layout in your stylesheet:
<style>
form.wpcf7-form .form-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
form.wpcf7-form .form-row .form-half {
flex: 1 1 48%;
}
@media (max-width: 768px) {
form.wpcf7-form .form-row .form-half {
flex-basis: 100%;
}
}
</style>
Use simple, semantic grouping in your form code and rely on CSS flexbox for an adaptive layout that works across devices.
Button Styling for Better Conversions
The submit button is one of the most important elements in your form. It should look like a clear call to action, aligned with the buttons used elsewhere on your site.
Customizing the Submit Button
Contact Form 7 uses a regular input for the submit button, so it can be styled like any other button:
<style>
form.wpcf7-form input[type="submit"] {
display: inline-block;
background-color: #0073aa;
color: #fff;
border: none;
padding: 0.85rem 1.75rem;
font-size: 16px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
form.wpcf7-form input[type="submit"]:hover {
background-color: #005b87;
}
form.wpcf7-form input[type="submit"]:active {
transform: translateY(1px);
}
</style>
Consider updating the copy on the button to be more action-oriented (for example, “Send Message” or “Request a Quote”) in your form shortcode for better engagement.
Styling Validation Errors and Success Messages
Feedback after submission is essential for a good user experience. Contact Form 7 provides elements for validation errors and status messages that you can style to match your brand.
Global Response Messages
When a form submission succeeds or fails, a response message appears below the form. You can style these messages to be more visible and user-friendly:
<style>
div.wpcf7-response-output {
margin-top: 1rem;
padding: 0.75rem 1rem;
border-radius: 4px;
font-size: 0.95rem;
}
div.wpcf7-mail-sent-ok {
border: 1px solid #46b450;
background-color: #ecf9f0;
color: #25672e;
}
div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
border: 1px solid #dc3232;
background-color: #fcebea;
color: #a20000;
}
</style>
These classes appear conditionally based on the submission result, allowing you to use different color schemes for success and error states.
Highlighting Invalid Fields
When validation fails, individual fields receive markup that allows you to highlight them. To draw attention to problematic fields, you can use a subtle border color and background:
<style>
form.wpcf7-form span.wpcf7-not-valid-tip {
display: block;
margin-top: 0.25rem;
font-size: 0.85rem;
color: #dc3232;
}
form.wpcf7-form input.wpcf7-not-valid,
form.wpcf7-form textarea.wpcf7-not-valid,
form.wpcf7-form select.wpcf7-not-valid {
border-color: #dc3232;
background-color: #fff7f7;
}
</style>
This approach helps users quickly identify what went wrong so they can correct it without frustration.
Working with Checkboxes, Radio Buttons, and Acceptance Fields
Checkboxes, radio buttons, and specific acceptance fields often look inconsistent across browsers. You can tame their appearance by grouping them logically and applying consistent spacing and alignment.
Spacing and Alignment
Start by giving checkboxes and radio fields better spacing and more readable labels:
<style>
form.wpcf7-form .wpcf7-list-item {
display: block;
margin-bottom: 0.5rem;
}
form.wpcf7-form .wpcf7-list-item label {
font-weight: 400;
cursor: pointer;
}
form.wpcf7-form input[type="checkbox"],
form.wpcf7-form input[type="radio"] {
margin-right: 0.4rem;
}
</style>
This preserves the native form controls while improving legibility and click targets.
Acceptance Checkbox Styling
For consent or terms-acceptance fields, you can use a slightly different visual treatment to highlight their importance:
<style>
form.wpcf7-form .wpcf7-acceptance {
margin-top: 0.75rem;
padding: 0.75rem 0.75rem 0.5rem;
border-radius: 4px;
background-color: #f8f8f8;
}
form.wpcf7-form .wpcf7-acceptance label {
font-size: 0.95rem;
}
</style>
This helps users recognize the field as something they should consciously review before submitting the form.
Responsive Form Design Considerations
Well-styled forms must adapt to screens of all sizes. Contact Form 7 works naturally with responsive layouts, but your CSS should reinforce that behavior.
Mobile-Friendly Spacing
On smaller screens, generous spacing improves readability and tap accuracy. Consider slightly larger touch targets and compact line lengths:
<style>
@media (max-width: 600px) {
form.wpcf7-form input[type="text"],
form.wpcf7-form input[type="email"],
form.wpcf7-form textarea,
form.wpcf7-form select {
font-size: 16px;
padding: 0.65rem 0.9rem;
}
form.wpcf7-form input[type="submit"] {
width: 100%;
text-align: center;
}
}
</style>
This prevents cramped layouts and makes forms much easier to use with one hand on a mobile device.
Preventing Horizontal Scroll
A common issue is inputs or labels that extend beyond the viewport. To avoid horizontal scrolling, ensure your form elements respect their container width and that no fixed-width values are larger than the screen.
Use percentage widths and box-sizing: border-box; consistently so padding and borders do not accidentally push elements out of their containers.
Matching Form Styles to Your Theme
To create a seamless experience, your Contact Form 7 styles should mirror your theme’s typography, color palette, and button styles. This consistency builds trust and supports conversions.
Reusing Existing Theme Variables
If your theme uses CSS variables or a custom properties system, reuse them to keep everything aligned:
<style>
form.wpcf7-form input[type="text"],
form.wpcf7-form textarea {
font-family: inherit;
color: var(--body-color, #333);
background-color: var(--input-bg, #fff);
}
</style>
If your theme doesn’t expose variables, inspect other elements (such as global buttons or form fields) and copy their key properties into your form stylesheet.
Consistency with Other Forms
Many sites use multiple form solutions (for example, the native comment form, newsletter signups, and call-to-action forms). Aim to align the following across all of them:
- Font size and family for labels and inputs.
- Border radius and input borders.
- Button shapes, background colors, and hover states.
- Error and success color schemes.
The more consistent your forms appear, the more professional and trustworthy your site will feel.
Accessibility Best Practices When Styling
Styling should never come at the cost of accessibility. Contact Form 7 is designed to be accessible, and your CSS needs to preserve that.
Maintain Clear Focus Indicators
Do not remove outlines or focus styles without replacing them with equally visible alternatives. Users who navigate with a keyboard rely heavily on focus states to move through a form confidently.
Respect Contrast Ratios
Ensure your text and background colors meet recommended contrast ratios for readability. This includes labels, placeholders, button text, and error messages.
When in doubt, use stronger contrast, especially for important messages and form controls that must remain visible in different lighting conditions.
Troubleshooting Common Styling Issues
While styling Contact Form 7 is generally straightforward, conflicts can arise with your WordPress theme or other plugins. A systematic approach helps you identify and fix issues efficiently.
Styles Not Applying
If your CSS does not appear to work:
- Check that your selectors are specific enough to override theme defaults.
- Ensure your custom stylesheet is loading after the theme’s styles.
- Clear caching (plugin cache, server cache, and browser cache).
- Use your browser’s developer tools to inspect elements and confirm which rules are active.
Unexpected Spacing and Alignment
Themes may apply general styles to paragraphs, lists, and form elements that affect your layout. To regain control:
- Reset margins or padding on the form container children where necessary.
- Use more specific selectors that only change form elements inside the form wrapper.
- Look for margin or padding inherited from global typography rules.
Conclusion
Customizing Contact Form 7 with targeted CSS lets you move beyond generic forms and create experiences that truly match your WordPress site. By understanding the output structure, placing your styles in a safe and maintainable location, and focusing on inputs, labels, buttons, and validation messages, you gain full control over your forms’ appearance.
Combine these design improvements with responsive layouts and accessibility best practices, and your forms will look professional, feel intuitive, and work seamlessly across devices. Over time, refine your styling based on analytics and user behavior to create forms that not only match your brand, but also convert visitors more effectively.
