Contact form 7 is very popular and lucrative plugin and it is also a favorite of many folks. Why?
The first advantage is that it is free and secondly you can customize it as per your needs but you should have the knowledge of HTML and CSS.
Lets see how can you customize contact form 7.
First of all install the plugin, after installation you will find a contact menu at left.
Open contact->contact form, this is a settings page, you can manage all things from here. On this page you will find an existing form with a short-code , use it to show the form on front-end.
Simply create a page and Put the code there. That's it, you have completed the setup. Now visitors will find it and they will be able to submit messages.
Now we'll customize this default form.
Sometimes this simple form is not enough for you and you need to expand it with some more fields. To make this possible follow the below steps:
1. Click on the form link, it will take you to the edit page.
2. Here on the left you'll see a form's coding and a dropdown on right side.
3. Look at the below syntax first:
As you can see "[text" is a type and "your-name] is field's name, star is used for required field.
4. Let's insert one more field.
5. It will display without any title, so add a title. Now the code will be:
6. If you don't want to write or unable to remember the code, not to worry just use dropdown to create the code.
7. Click on the generate tag dropdown, you'll see a list of field's type.
8. Mouse over any field type and click on it.
9. A form will open with various options. Here only one option is useful "Name", the rest is optional.
10. Fill that box with the field name which you want to create, like address.
11. See for this line at the end "Copy this code and paste it into the form left." You'll get [text Address], use this code in the form. Then save it.
12. It should be like below:
Just so to add the fields.
After the above modification, you will need to receive the data for newly added fields. To do this, updation of mail template is required. How? Just insert the tag in the template as you have done above but here tag will contain only the name of the field not type like:
That's it.
It doesn't provide any option to customize the style, you have to edit its style sheet. It is recommended to use theme's stylesheet or add another.
A common css class is wpcf7. We'll use this because we do not want to change the style of the other form.
Fields styling:
The above code will apply on all input elements whose type is text, but we'll use wpcf7 class with this selector so it will not affect other forms of your website.
You can also declare your own id or class to make changes in styling, for example if you want to update textarea style.
Now add this class to the tag:
Actually it is an addon and to save your time i think it is a best solution. It has some customizable template.
So as usual you have to install and activate the plugin, after that a contact style menu will appear with three sub-menus 'Valentine's Day', 'Xmas style' and 'custom style'.
In first two options, you'll get different ready to use templates. You can customize the form with the help of custom style.
That's all for the customization of contact form 7. Hopefully, as I mentioned above, it will be easier for you to use it.
The first advantage is that it is free and secondly you can customize it as per your needs but you should have the knowledge of HTML and CSS.
Lets see how can you customize contact form 7.
First of all install the plugin, after installation you will find a contact menu at left.
Open contact->contact form, this is a settings page, you can manage all things from here. On this page you will find an existing form with a short-code , use it to show the form on front-end.
Simply create a page and Put the code there. That's it, you have completed the setup. Now visitors will find it and they will be able to submit messages.
Now we'll customize this default form.
Customization of contact form 7
Adding more fields
Sometimes this simple form is not enough for you and you need to expand it with some more fields. To make this possible follow the below steps:
1. Click on the form link, it will take you to the edit page.
2. Here on the left you'll see a form's coding and a dropdown on right side.
3. Look at the below syntax first:
<p>Your Name (required)<br /> this is a title for field
[text* your-name] </p> this is a code to create field, called tag
[text* your-name] </p> this is a code to create field, called tag
As you can see "[text" is a type and "your-name] is field's name, star is used for required field.
4. Let's insert one more field.
[tel telephone]
5. It will display without any title, so add a title. Now the code will be:
<p>Telephone<br />
[tel telephone]</p> - tel type is for telephone number field in html5
[tel telephone]</p> - tel type is for telephone number field in html5
7. Click on the generate tag dropdown, you'll see a list of field's type.
8. Mouse over any field type and click on it.
9. A form will open with various options. Here only one option is useful "Name", the rest is optional.
10. Fill that box with the field name which you want to create, like address.
11. See for this line at the end "Copy this code and paste it into the form left." You'll get [text Address], use this code in the form. Then save it.
12. It should be like below:
<p>Address<br />
[text address]</p>
[text address]</p>
Just so to add the fields.
Editing mail template
After the above modification, you will need to receive the data for newly added fields. To do this, updation of mail template is required. How? Just insert the tag in the template as you have done above but here tag will contain only the name of the field not type like:
[telephone]
That's it.
Styling your contact form 7
It doesn't provide any option to customize the style, you have to edit its style sheet. It is recommended to use theme's stylesheet or add another.
A common css class is wpcf7. We'll use this because we do not want to change the style of the other form.
Fields styling:
input[type="text"]
{
background-color: #F2F2F2; /* background for field
color: #555; /* For text inside the field */
width: 50%; /* Width of field*/
}
{
background-color: #F2F2F2; /* background for field
color: #555; /* For text inside the field */
width: 50%; /* Width of field*/
}
The above code will apply on all input elements whose type is text, but we'll use wpcf7 class with this selector so it will not affect other forms of your website.
.wpcf7 input[type="text"]
{
background-color: #F2F2F2;
color: #555;
width: 50%;
}
{
background-color: #F2F2F2;
color: #555;
width: 50%;
}
You can also declare your own id or class to make changes in styling, for example if you want to update textarea style.
.mytextarea
{
border: 2px solid #765942;
border-radius: 10px;
height: 60px;
width: 50%;
}
{
border: 2px solid #765942;
border-radius: 10px;
height: 60px;
width: 50%;
}
Now add this class to the tag:
[textarea your-message class:mytextarea]
Contact form 7 customization plugin
Actually it is an addon and to save your time i think it is a best solution. It has some customizable template.
So as usual you have to install and activate the plugin, after that a contact style menu will appear with three sub-menus 'Valentine's Day', 'Xmas style' and 'custom style'.
In first two options, you'll get different ready to use templates. You can customize the form with the help of custom style.
That's all for the customization of contact form 7. Hopefully, as I mentioned above, it will be easier for you to use it.
2 Comment
Great tutorial. I used to use contact form7 all the time but have sense moved to ninja forms. I find the interface easier to use for clients and the plugin is overall a little more user friendly. Do you have experience with using ninja forms?
BalasThanks for your comment.
BalasYes I have worked on ninja forms. It is a cool plugin.