Customize forms In Contact Form 7 for Beginners

Customize forms In Contact Form 7 for Beginners

Do you want to customize your Contact Form 7 forms on your WordPress website? Contact Form 7 is a form building plugin that can easily create forms for you to use on your website. It is completely free to use and is one of the most popular plugins on WordPress with over 5 million active installs. These forms can be used throughout your website and can even be used as a pop-up.Learn more about how to Customize forms In Contact Form 7 for Beginners

To get the most out of this plugin, you will need to learn how to customize your forms. These forms can be edited in many ways and the easiest is to use custom CSS code. This makes the customization possibilities almost endless. Today, I will demonstrate how to customize your forms in WordPress using the Contact Form 7 plugin.

Before we start we would like to offer you:
When having your website on WordPress you will need to choose a Good Looking Optimized theme , Speed optimization plugin and understand How to do Good SEO 

Customize forms in Contact Form 7 for Beginners

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

Creating a Form

Before you can use custom CSS to customize your form, 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.

On 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.

Method 1: Custom CSS

Adding custom CSS is really easy in WordPress and it can be easily done if you know the language. Of course, even if you do not know the language you can find plenty of examples of different form designs all over the Internet. These can be easily copied on to your website.

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

Click on Appearance and select the Customize option.

Click on the  Addition CSS option on the left-hand side. Here you can add custom CSS to your website. Copy and paste the following code into the appropriate text 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 on the “Publish” button to apply the custom CSS.

Click on the

You can now view your form on your website to see the changes. Custom CSS is a very powerful tool when it comes to design inside of WordPress. You can always update and make changes to CSS code. This includes things like changing color, margins, and font used.

Method 2: Custom Forms 7 Style

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 on it.

Click on the Contact Form 7 Style Template tab.

You can now choose which template to use on your form. This can be changed at any time.

Choose which template to use on your form.

The second method is to create a new template. On the left-hand admin panel click on 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 for those that are not skilled with CSS.

Leave a Reply