[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:

  1. Open your WordPress dashboard.
  2. Navigate to Contact > Contact Forms.
  3. Select the form you want to edit.
  4. Add HTML heading tags (<h2>, <h3>, etc.) to your form where you want the sections to be separated.
  5. 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:

  1. Navigate to Appearance > Customize > Additional CSS in your WordPress dashboard.
  2. 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:

  1. Install and activate the Contact Form 7 Columns plugin.
  2. Select the form you want to edit.
  3. 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:

  1. Add the following CSS code to your Additional CSS section:

Default Contact 7 Form Example

    This form uses Akismet to reduce spam. Learn how your data is processed.

     

     

    Styled Contact 7 Form Example

      About You

      Your Address

      What's on your mind

      Other

      This form uses Akismet to reduce spam. Learn how your data is processed.

       

      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.

      WP doin dev & security
      WP doin dev & security

      Oh hi there 👋
      It’s nice to meet you.

      Sign up to receive WordPress tips in your inbox, every month.

      I don’t spam! Read my privacy policy for more info.