Skip to main content

Create Contact Form using “contact form 7” plugin in wordpress


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.
Plugin link

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.

Read This: Make secure your wordpress site

Leave a Reply

Your email address will not be published. Required fields are marked *