How to Style Contact Form 7 in WordPress (2023 Guide)
Are you using Contact Form 7 on your WordPress website? While it‘s a popular and powerful free plugin, one common complaint is the bland default styling of the forms it creates. The good news is that with a bit of CSS know-how or the help of an additional plugin, you can completely customize the look and feel of your Contact Form 7 forms to match your site design.
In this guide, we‘ll cover everything you need to know to style Contact Form 7 like a pro, including:
- Why form styling matters
- Targeting Contact Form 7 elements with CSS
- Step-by-step styling with code examples
- Using CSS Hero for visual, code-free customization
- Tips and best practices for effective form design
- Exploring alternative form plugins
Why Styling Your Contact Forms is Important
Before we dive into the technical details, let‘s discuss why it‘s worth investing time into styling your contact forms in the first place. Here are a few key reasons:
Branding consistency. Your contact forms should look like a cohesive part of your website, not an afterthought. Matching colors, fonts, and other styling to your brand helps create a professional and polished impression.
User experience. A well-designed form is easier and more intuitive for visitors to fill out. Proper layout, spacing, and visual cues all contribute to better UX.
Conversion optimization. Attractively styled forms can increase the number of people who complete and submit them. Simple changes like using a contrasting color for the submit button can have a real impact.
Accessibility. Styling isn‘t just about aesthetics – it also affects usability for people with disabilities. Following accessibility best practices with your form design ensures that everyone can use them effectively.
With these benefits in mind, let‘s look at how to take control of your Contact Form 7 styles.
Using Custom CSS to Style Contact Form 7
The most flexible and powerful way to customize the look of your Contact Form 7 forms is by adding your own CSS code. While this does require some knowledge of CSS, the plugin makes it relatively easy by providing pre-defined classes that you can target.
Key Contact Form 7 CSS Selectors
Here are the main CSS selectors you‘ll use to style different parts of your forms:
.wpcf7: The outer container<div>that wraps the entire form..wpcf7-form: The<form>element itself..wpcf7-text,.wpcf7-textarea,.wpcf7-select,.wpcf7-quiz,.wpcf7-number,.wpcf7-date: The various types of form input fields..wpcf7-submit: The submit button..wpcf7-not-valid-tip: Error messages for individual fields..wpcf7-response-output: The form submission response message.
You can combine these with other selectors like :hover, :focus, and :active to target specific states, as well as create more specific compound selectors.
For example, to style just the submit button on hover, you could use:
.wpcf7-submit:hover {
background-color: #ff0000;
}Where to Add Your CSS Code
There are a few places you can add the CSS to style your forms:
- The WordPress Customizer additional CSS section
- Your child theme‘s stylesheet
- A plugin like Simple Custom CSS or WP Add Custom CSS
The Customizer is a good choice if you only have a small amount of CSS to add. For larger amounts, adding it to your child theme or via a plugin can be easier to manage.
Styling Form Fields
Now let‘s look at some specific examples of how you can style form fields with CSS.
To change the font size and color of all text inputs and textareas:
.wpcf7-text,
.wpcf7-textarea {
font-size: 16px;
color: #333333;
}To add a border and padding:
.wpcf7-text,
.wpcf7-textarea {
border: 1px solid #cccccc;
padding: 10px;
} Adjust the border color on focus:
.wpcf7-text:focus,
.wpcf7-textarea:focus {
border-color: #ff0000;
}Style dropdown selects:
.wpcf7-select {
font-size: 16px;
color: #333333;
border: 1px solid #cccccc;
padding: 10px;
background-color: #ffffff;
}Feel free to experiment with different values for colors, sizes, spacing to fit your design.
Styling labels
Contact Form 7 does not provide a separate class for form labels by default. To target them, you can use an attribute selector:
[for^="your-"] {
display: block;
margin-bottom: 5px;
font-size: 16px;
font-weight: bold;
}This will style all labels for fields that have an id starting with "your-", which is the default for Contact Form 7.
Styling the Submit Button
Styling your submit button can have a big impact on overall form appearance and conversion rates. Here‘s an example of styling it as a prominent red color:
.wpcf7-submit {
background-color: #ff0000;
color: #ffffff;
font-size: 20px;
font-weight: bold;
border: none;
padding: 15px 30px;
cursor: pointer;
}
.wpcf7-submit:hover {
background-color: #cc0000;
}This CSS:
- Sets a red background and white text color
- Increases the font size and weight
- Removes the default button border
- Adds padding to create a larger button size
- Changes the background color on hover
- Sets the cursor to a pointer on hover to indicate clickability
Styling Error Messages and Responses
Contact Form 7 displays error messages and submission responses with specific classes that you can target.
For field-specific errors:
.wpcf7-not-valid-tip {
color: #ff0000;
font-size: 14px;
margin-top: 5px;
}For the overall form submission response:
.wpcf7-response-output {
margin-top: 20px;
padding: 15px;
border: 2px solid #ff0000;
font-size: 16px;
font-weight: bold;
color: #333333;
}
.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-acceptance-missing {
border-color: #ffcc00;
}
.wpcf7-response-output.wpcf7-mail-sent-ok {
border-color: #00cc00;
}This will:
- Add spacing, padding, and a border around response messages
- Style the text with a larger, bold font
- Change border colors depending on the response (form errors, missing required acceptance field, or successful submission)
Using CSS Hero to Style Contact Form 7
If writing custom CSS isn‘t your strong suit, you can still customize your Contact Form 7 forms with the help of the CSS Hero plugin.
CSS Hero is a visual CSS editor that allows you to point and click to style elements on your site without having to write code directly. It‘s a premium plugin, but can be a good option if you need to make a lot of CSS changes and aren‘t comfortable doing it by hand.
After installing and activating CSS Hero, you can launch it while viewing a page with your contact form. Simply hover over the form and click the "Customize" button that appears to open the visual editor.
In the CSS Hero interface, you can select each form element and adjust its properties using the controls in the right panel. This includes:
- Typography (font family, size, weight, line height, letter spacing)
- Colors (text, background, borders)
- Sizes (width, height, padding, margin)
- Borders (color, width, style, radius)
As you make changes, you‘ll see them reflected in the live preview of your form. You can also undo/redo changes, and reset elements back to their defaults.
One nice feature of CSS Hero is the ability to save your customizations into presets that you can then apply to other forms across your site. This is handy for maintaining a consistent style without having to start from scratch each time.
The main limitation of using CSS Hero vs. custom CSS is that you have less fine-grained control. You‘re limited to the styling options exposed in the interface, which may not cover every customization you want to make. However, it can still be a good solution for most common styling needs, especially if you‘re not comfortable with coding.
Best Practices for Styling Contact Form 7
Regardless of whether you‘re using custom CSS or a visual editor like CSS Hero, there are some best practices to keep in mind when styling your contact forms:
Keep it simple. Don‘t go overboard with colors, fonts, or other design elements. The form should be easy to read and understand at a glance.
Use whitespace effectively. Proper spacing between form fields, labels, and other elements helps improve readability and usability.
Maintain a clear visual hierarchy. Use font sizes, colors, and other cues to prioritize important elements like the submit button and required fields.
Optimize for mobile. Make sure your form looks and functions well on smaller screens by using responsive CSS. Set appropriate font sizes and make sure tap targets are large enough for fingers.
Test thoroughly. View your styled form on various devices and browsers, and test submitting it to ensure everything works smoothly. Consider doing user testing or A/B testing different designs to optimize for conversions.
By following these guidelines and the CSS techniques outlined above, you can create Contact Form 7 forms that are both beautiful and functional.
Alternative Form Plugins to Contact Form 7
While Contact Form 7 is a solid choice for basic forms, if you find yourself wanting more advanced styling options and other features, there are several other great form plugins worth considering:
Gravity Forms: A premium plugin with a powerful visual form builder, conditional logic, and many integrations.
WPForms: Another popular premium option with a user-friendly interface, pre-built templates, and marketing integrations.
Ninja Forms: Offers both free and paid versions, with features like conditional logic, file uploads, and layout control.
Formidable Forms: A highly customizable plugin with a drag-and-drop builder, calculated fields, and user-submitted posts.
All of these alternatives offer more built-in styling options compared to Contact Form 7, which can save you time and effort. However, they do come at a cost, whereas Contact Form 7 is free. Ultimately, the best form plugin for you will depend on your specific needs and budget.
Conclusion
As we‘ve seen, styling Contact Form 7 forms doesn‘t have to be a daunting task. With some basic CSS knowledge or the help of a plugin like CSS Hero, you can transform the default output into pixel-perfect forms that match your brand and increase conversions.
Start by targeting key form elements with CSS selectors, then adjust properties like colors, sizes, and spacing to fit your design. Keep best practices like simplicity, responsiveness, and testing in mind as you go.
While Contact Form 7 is a great free option, don‘t be afraid to explore more powerful premium form plugins if you need advanced features and styling options.
By following the tips and techniques in this guide, you‘ll be well on your way to creating beautiful, functional, and user-friendly forms on your WordPress site. Happy styling!
