How To Install and Customize Contact Form 7 For WordPress

If you have a website, chances are that you have a contact form on it. And if you have a contact form on it, chances are that you’re using ‘Contact Form 7’. A neat little plugin, ‘Contact Form 7’ adds just that – a form through which your website visitors can easily get in touch with you. It’s FREE, simple to set up, easy to use and reduces spam. Here is a live example of Contact Form 7 on my website –

http://utterlyweb.com/contact-me/

When the user submits the contact form, you will receive it as an email.

If you don’t have Contact Form 7, well, now would be a good time to get it. But whatever you do, don’t publicize your email id on your website. That’s like screaming for spammers!

Step 1 – Install Contact Form 7 for WordPress

(1) From the WordPress Dashboard, click on ‘Plugins’, ‘Add New’ –

Install contact form 7 plugin from WordPress Dashboard

(2) On the next page, search for ‘Contact Form 7’ by name –

Search for Contact Form 7 in WordPress

(3) On the search results page,  click on “Install Now” to install ‘Contact Form 7’. Make sure that the author plugin is ‘Takayuki Miyoshi’. Once installation is complete, activate the plugin.

 

Tatayuki Miyoshi is the plugin author

(4) When the plugin is active, a ‘Contact’ tab will pop up in the WordPress Dashboard. You’ll find it beneath the ‘Comments’ tab. Click on the ‘Contact’ tab and you will be taken to the ‘Contact Form 7’ screen. Select ‘Add New’.

 

Contact Form 7 tab in the WordPress Dashboard

(5) The next screen will look like –

Change email in the contact form

Scroll down to the ‘Mail’ panel and under ‘To’ give the email id where you would like to receive messages sent through the contact form.  If you would like to go with the default contact form as on  http://utterlyweb.com/contact-me/ then hop, skip and jump straight to Step 3. But if you would like to customize the form, please take a look at Step 2 as well.

Step 2- Customize Contact Form 7

The cool thing about Contact Form 7 (other than it being a really cool as-is contact form) is that you can customize it. That is to say – you can add fields, remove fields, mix up up the field types, make a field ‘required’ or not etc. To illustrate, I am going to add 2 new fields to the form – a ‘How Did You Find Out About Us’ mandatory field and an optional ‘Your Website’ field.

Shorter Way

1. Click on the ‘Generate Tag’ tab in the Form panel and select a field type e.g. the Text field.

2. If it’s a required field, check mark the box

3. Give the field a name e.g. “the-source”

4. Copy the code under “Copy this code and paste it into the form left” and paste it into the form.

5. Then, copy the code under “And, put this code into the Mail fields below” and paste it into the ‘Mail’ panel.

6. Save the form.

7. Scroll down to  ‘Step 3- Get The Short Code’

Contact Form 7 Customization

Longer Way

To do that, I will simply add the code down below to the ‘Form’ panel –

How did you find out about us (required)
[text* the-source]

Your Website
[text your-site]

Now the form panel looks like –

Customize Contact Form 7

In the image above, the ‘How did you find out about us (required)’ text marked in blue is where you will enter the field name. You can put in whatever text you deem suitable. The second line is [text* the-source] : the first component here is “text*” which means that a single text field will be generated in Contact From. The “*” makes it a mandatory field. Just get rid of the ‘*’ and use only ‘text’ in case the field is optional, as we have done for ‘Your Website’.

If you would like the field to be much bigger, as in the case of ‘Your Message’ instead of text use textarea (as in the case of ‘Your Message’). With me so far? Good!

Now onto the last bit of customization – we also need to configure Contact Form 7 so that the message shows up correctly in the email that we receive when someone sends a message. We can do that by making use of the second component of  “[text* the-source]” and define it how we want to in the “Message body” –

Configure contact form 7 message body

Note: In ‘[text* the-source]’ – you can call the second component i.e. ‘the-source’ anything you like, such as ‘customer-source’ etc. Whatever you use in the Form panel should match with what you provide in the ‘Message body’.

The corresponding contact form will be as below. Notice the two additional fields that have been added –

New Contact Form

 

Step 3- Get The Short Code

When you have customized and configured the form, click on ‘Save’ and copy the code that you will find under ‘ Copy this code and paste it into your post, page or text widget content.’ Paste the code into a WordPress page. Before you publishing, preview the page and check if the form is working correctly. If all goes well, publish the page to your website.

Contact Form 7 Short Code

In the next post, we will add captcha to Contact Form 7 to make it even more secure.

Important!

Please note that we can create and add multiple contact forms to a website. Also, once a form has been created and added to the website , it is possible to make changes to the form. From the dashboard go to ‘Contact’ and then click on the form you need to modify – just make the changes, click ‘Save’ and refresh your website to check if the changes have been implemented.

Image Credit

Leave a Reply

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