Last updated on December 7, 2024: This article has been updated to include the latest techniques for styling Contact Form 7 forms in WordPress. Additionally, we’ve added a section on integrating CF7 Google Sheet Connector to send form submissions directly to Google Sheets.
With over 10+ million active users, Contact Form 7 is one of the most popular contact form plugins for WordPress. However, the default forms you add to your website can appear quite plain. Thankfully, Contact Form 7 forms can be easily styled using CSS in your WordPress theme. In this article, we’ll show you how to style Contact Form 7 forms in WordPress to make them visually appealing and user-friendly.
Getting Started
To begin, ensure that you have the Contact Form 7 plugin installed and that you’ve created your first contact form.
Once your form is ready, copy its shortcode and paste it into a WordPress post or page where you’d like the form to appear.
For demonstration purposes, we’ve added a default Contact Form 7 form to a WordPress page. Here’s how it looks without any customization:
As you can see, the form inherits basic styles from your WordPress theme, which might not align with your website’s design.
To enhance its appearance, we’ll use CSS. Add all CSS customizations to your theme’s stylesheet or child theme stylesheet for better maintainability.
Styling Contact Form 7 Forms in WordPress
Contact Form 7 generates clean and standard-compliant HTML code. Every form element is assigned specific IDs and CSS classes, making it easy to target them for customization.
For example, all forms use the .wpcf7 class. Below is a CSS snippet that applies a custom style to all Contact Form 7 forms on your website:
div.wpcf7 {
background-color: #fbefde;
border: 1px solid #f28f27;
padding: 20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background: #725f4c;
color: #FFF;
font-family: Lora, sans-serif;
font-style: italic;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
background-color: #725f4c;
width: 100%;
text-align: center;
text-transform: uppercase;
}
Here’s how the form looks after applying the CSS:
Styling Multiple Contact Form 7 Forms
If you have multiple forms on your site and want to style them differently, you’ll need to use the unique ID assigned to each form.
To find the form’s ID, open the page containing your form, right-click the form, and select Inspect Element. This will reveal the form’s HTML code. Look for the <div> tag with the id attribute.
For example:
As you can see in the screenshot above, our contact form code starts with the line:
<div id="wpcf7-f201-p203-o1" class="wpcf7" dir="ltr" lang="en-US" role="form">
The id attribute is unique to this form. You can use it in your CSS to target and style this specific form
We will use this ID in our CSS to style our contact form. We will replace .wpcf7 in our first CSS snippet with #wpcf7-f201-p203-o1.
div#wpcf7-f201-p203-o1 {
background-color: #fbefde;
border: 1px solid #f28f27;
padding: 20px;
}
#wpcf7-f201-p203-o1 input[type="text"],
#wpcf7-f201-p203-o1 input[type="email"],
#wpcf7-f201-p203-o1 textarea {
background: #725f4c;
color: #FFF;
font-family: Lora, "Open Sans", sans-serif;
font-style: italic;
}
#wpcf7-f201-p203-o1 input[type="submit"],
#wpcf7-f201-p203-o1 input[type="button"] {
background-color: #725f4c;
width: 100%;
text-align: center;
text-transform: uppercase;
}
Styling your Contact Form 7 forms is a straightforward process that can significantly enhance the user experience on your site. By using custom CSS, you can create forms that match your website’s design perfectly. If you’re not comfortable with CSS, consider using a plugin like CSS Hero or Contact Form 7 Styler to simplify the process.
Experiment with different styles and layouts to make your forms stand out. For more WordPress tips, check out our other guides!
Bonus Tip: Send your Form Submissions with CF7 Google Sheet Connector
If you’re using Contact Form 7 for your contact forms, consider enhancing its functionality with the CF7 Google Sheet Connector. This plugin allows you to automatically send form submissions directly to a Google Sheet, making it easier to organize, analyze, and manage your data.
With this integration, you can:
- Eliminate the need for manual data entry.
- Keep all your form entries securely stored in a Google Sheet.
- Share the data effortlessly with team members or collaborators.
The CF7 Google Sheet Connector is an excellent addition to any workflow that involves tracking inquiries, leads, or customer feedback efficiently.
You can also use the free version of the CF7 Google Sheet Connector plugin to seamlessly send your form submissions to Google Sheets.
Final Thoughts
Customizing your Contact Form 7 forms not only enhances your website’s aesthetics but also improves user experience and aligns with your brand’s identity. By applying CSS and unique styles, you can make your forms look professional and visually appealing.
To take your Contact Form 7 forms a step further, consider integrating the CF7 Google Sheet Connector plugin. This powerful tool allows you to send form submissions directly to Google Sheets, making data management effortless. Whether you use the free version or opt for advanced features in the PRO version, this plugin streamlines the workflow of storing, organizing, and sharing form entries.
With Contact Form 7’s flexibility and the CF7 Google Sheet Connector’s functionality, you can build efficient, beautifully styled forms that cater to your needs.
Tips for Styling Contact Form 7 Forms
- Use a Consistent Color Palette: Match the colors of your form with your website’s primary and secondary colors.
- Choose Readable Fonts: Use clean, easy-to-read fonts for better accessibility.
- Optimize for Mobile: Ensure your forms are responsive and look good on all devices.
- Test for Compatibility: Check your styled form in different browsers to ensure consistency.
Internal and External Resources
For more advanced customization, you can refer to the official Contact Form 7 Documentation.
Looking to automate form submission data to Google Sheets? Check out CF7 Google Sheet Connector, a plugin that seamlessly integrates Contact Form 7 with Google Sheets.
Get Social