In this tutorial you will learn to create contact form using “Contact Form 7” plugin in wordpress or “contact form 7” plugin integration with wordpress
Contact form 7 Plugin is used for creating multiple contact forms, In this plugin you can create and manage multiple contact forms easily. It’s simple but flexible, i think it’s one of the best contact form plugin.
Installation of Plugin
First of all, open your wordpress dashboard, goto “Plugins>> Add New”.
Now type “contact form 7” in Plugin search box. and click on “Install Now>>activate” button to activate the plugin. See the following screenshot for help.
After activation the plugin, you can see a “contact” menu in your wordpress admin panel, check following screenshot
How to use contact form 7
After activation the plugin in your wordpress, goto “Contact>>contact forms”. check following screenshot
Now you can see a page like following screenshot, in this page, you can see list of your contact forms and there shortcodes which you will create. But by default, here is only one contact form is given.
To use this form in your wordpress site posts/pages, copy the given shortcode and paste it in your page or post, where you want to use your contact form, it’s your own choice. the front-end look of this form is given below.
Create a new contact form
To create a new contact form goto “contact>> add new”. check the below screenshot
Here You can see a code of contact form like following screenshot. Here first of all set form title and then manage,delete and add new fields in this form according to your own choice.
Adding fields in contact form 7 plugin
To adding fields click on any given field according to your choice. Check the following screenshot for help
When you will click on any of the field which you want to add, a Popup will be open like following screenshot
You can manage Your field in this popup, according to your need. You can make field type required or not, change name field, In default value you can add place holder text and tick on check box “Use this text as the placeholder of the field”.. After all these setting, click on “Insert Code”, after click single line text field code will be add in your form. check following screen shot
To create label for your new field. Use the label tags “<label> Name: </label>” and insert your field code in between the label tags. Check the following screen short for help
Contact Form 7 codes to adding fields with label
You can use the following codes to adding fields in contact form 7
Name field Code
To adding name field in contact form 7 use the following code in the form
<label> Name: [text* Name placeholder "Your Name"]</label>
E-mail field code
To adding e-mail field in contact form 7 you can use following code in the form
<label> E-mail: [email* E-mail placeholder "E-mail"]</label>
Website Url field code
To add web url field in contact form 7, use the following code
<label> Website: [url Url placeholder "www.example.com"]</label>
Phone Number field Code
To add the Phone Number field in contact form 7, use the following code in the form
<label> Phone No: [tel Phone placeholder "+923001234567"]</label>
Numeric Value field Code
To add the numeric field in contact form 7, insert the following code in the form
<label> Select Quantity: [number Quantity]</label>
Date field code
to add the date field in contact form 7, use the following code in the form
<label> Date: [date date]</label>
Multiple Line text or description field code
To add the multiple line text field in contact form 7, insert the following code into the form
<label> description: [textarea textarea-717]</label>
Drop down field Code
Use the following code in form, to add drop down field in contact form 7
<label> Select: [select menu-120 "A" "B" "C"]</label>
Checkbox field code
Use the following code in form, to add checkbox field in contact form 7
<label> Tick checkbox: [checkbox checkbox-288 "A" "B" "C" "D"]</label>
Radio button field code
To add checkbox field in contact form 7, Use the following code in form
<label> Radio Button: [radio radio-704 default:1 "A" "B" "C" "D" "E"]</label>
Note: If you have any confusion or problem related to this tutorial or you have any other wordpress related problem. You can comment below. we will try to answer your comments as soon as possible.