[ez-toc]
Intro
Contact Form 7 is a popular WordPress plugin used to create customizable contact forms. While the default style is functional, it may not always match the aesthetic of your website. In this guide, I will teach you how to improve the default style of Contact Form 7 to make it more visually appealing and user-friendly.
1. Adding Headings to Separate Each Section
Organizing your form with headings can make it easier for users to navigate and understand. Here’s how you can add headings to your Contact Form 7.
Steps:
- Open your WordPress dashboard.
- Navigate to Contact > Contact Forms.
- Select the form you want to edit.
- Add HTML heading tags (
<h2>
, <h3>
, etc.) to your form where you want the sections to be separated.
- Embed the form using the [contact-form-7 id="335f6ff" title="My Styled form" html_class="wpcf7-styled"] shortcode. Notice the extra paramater, html_class, which we’ll use to apply the styling to that form only.
2. Adding Background and Border to the Whole Form
Adding a background and border can make your form stand out on the page. You can achieve this by adding some custom CSS.
Steps:
- Navigate to Appearance > Customize > Additional CSS in your WordPress dashboard.
- Add the following CSS code to style your form:
3. Adding Two and Three Columns
Sometimes, a single-column layout can make your form look too long. Using columns can save space and improve readability.
Steps:
- Install and activate the Contact Form 7 Columns plugin.
- Select the form you want to edit.
- Use the following code to create two and three column layouts.
4. Styling the Radio Buttons
Styling radio buttons can enhance the form’s interactivity and visual appeal. Here’s how you can do it with custom CSS.
Steps:
- Add the following CSS code to your Additional CSS section:
Default Contact 7 Form Example
Styled Contact 7 Form Example
Full Code
Conclusion
By following these steps, you can significantly enhance the appearance and functionality of your Contact Form 7. Adding headings, backgrounds, borders, columns, and styling radio buttons will create a more professional and user-friendly form. Experiment with these techniques and adjust the styles to best fit your website’s design.