Resources     Blog  

  1. Home
  2. WordPress Tutorials
  3. How to Customize Contact Form 7 Forms in WordPress

How to Customize Contact Form 7 Forms in WordPress

Do you want to customize your Contact Form 7 forms on your WordPress website? Contact Form 7 is a form building plugin that can create forms to use on your website. It’s free to use and is one of the most popular WordPress plugins. Forms can be used throughout your website and can even be presented in a pop-up.

To get the most out of this plugin, it’s best to learn how to customize your forms. Forms can be edited in many ways, the easiest is the use of custom CSS code. Editing the CSS makes the customization possibilities almost endless. Today, I’ll demonstrate how to customize your forms in WordPress using the Contact Form 7 plugin.

Why Customize Your Website’s Forms

Design choices are one of the most important decisions a web developer can make. Many visitors will judge a website by its appearance, which can be a bad thing for websites that don’t take design seriously. Design choices range from the theme you install to the font you use. Forms are just as important to customize because visitors interact with them directly.

Forms are used to collect information from your visitors. These could include things like account creation, email subscriptions, job applications, services, opinion polls, and much more. They’re essential in helping you learn more about your community and linking your visitors to your website.

How to Customize Contact Form 7 in WordPress

There are a lot of design choices available for Contact Form 7 forms. Changes can be made using custom CSS in WordPress, but that’s not the only way. You can also use a second plugin called Contact Form 7 Style, an add-on plugin for Contact Form 7. It has form templates that make it easy to customize a form without writing any code.

1. Installing Contact Form 7

If you are not interested in using the CSS method, then you should also take the time to download the Contact Form 7 Style plugin as well. Since it is an add-on plugin, you will need to download both.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New

Search for Contact Form 7 in the available search box. This will pull up additional plugins that you may find helpful.

Search for Contact Form 7 in the available search box.

Scroll down until you find the Contact Form 7 plugin and click the “Install Now” button and activate the plugin for use.

click the "Install Now" button

2. Creating a Form

Before you can use custom CSS to customize your form, obviously you need to create a form. The plugin allows you to create a form and then use a shortcode to display the form on pages and posts on your website.

In the left-hand admin panel, click on Contact and select the Contact Forms option. This will pull up the main settings page.

Click on Contact and select the Contact Forms option.

Feel free to make a new form that meets your needs, but I will be using the default form as an example. Copy the shortcode for the form you would like to use.

Copy the shortcode for the form you would like to use.

Paste the shortcode where you would like to display it. Now that your form is created and in position, it is time to customize it.

3. Custom CSS Method

Adding custom CSS is easy in WordPress. Even if you don’t know CSS, you can find plenty of examples of different form designs all over the internet that can be copied to your website.

In the left-hand admin panel, click on Appearance and select the Customize option.

Click on Appearance and select the Customize option.

Click the Additional CSS option on the left side. Here you can add custom CSS to your website. To see an example, copy and paste the following code into the Additional CSS box: 

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;
}

Click the “Publish” button to apply the custom CSS.

Click on the "Publish" button.

You can now view your form on your website to see the changes. Custom CSS is a very powerful tool when it comes to WordPress site design. You can always update and make changes to the CSS, things like changing color, margins, and fonts.

4. Custom Forms 7 Style Method

Install and activate the Contact Form 7 Style plugin.

This plugin offers you two options to style forms. The first and easiest to use are the premade forms. These include festive and professional templates to choose from.

Go to a form that you want to edit. You should see a new Contact Form 7 Style Template tab that was added to the plugin. Click it.

Click on the Contact Form 7 Style Template tab.

You can now choose which template to use on your form. You can change this at any time.

Choose which template to use on your form.

The second method is to create a new template. In the left-hand admin panel, click Contact Style and select the Add New option.

click on Contact Style and select the Add New option.

The Contact Form 7 Style plugin page has a very detailed demo video on how to style a form. You can change the margins, background color, border color, button color, text box color, and much more. The plugin is very useful if you’re not familiar with CSS.

Create Awesome Forms for Your Website

Forms are critical for collecting visitors’information, and making them look good can be a challenge. Some key rules should be to create forms that match your website’s theme. It doesn’t look good when colors do not match each other. It could potentially drive visitors away from your website.

Forms are not the only thing you should be concerned with. You can customize every aspect of your website to make them all blend well together. Just throwing a bunch of good design elements into the mix is not enough. They need to feel connected and it can be quite a challenge.

Which method have you used? What style have you chosen to use?

Author: Chris Racicot

Chris is the Support Manager at GreenGeeks and has been with the company since 2010. He has a passion for gaming, scripting and WordPress. When he’s not enjoying his sleep, he’s working on his guitar skills and fiddling with 3d printing.

Was this article helpful?

Related Articles

Leave a Comment

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