Contact Form 7 Tutorial – A Simple Guide For New Users

Contact Form 7 is much more powerful than most of the free form plugins but, Contact Form 7 is not drag and drop. However, once you learn a few basic principles, Contact Form 7 is surprisingly easy to use.

Using Contact Form 7

Setting up email in Contact Form 7

To make a really simple form

After installing and activating the Contact Form 7 plugin

1.) Go to: Dashboard > Contact Add New
2.) Select the Form tab
3.) Contact Form 7 has automatically built a simple form for you.
4.) Make sure you click the Save button

You will now see the blue bar containing the form shortcode

5.) The blue bar contains the shortcode you need

Copy this shortcode and paste it into any web page or blog post on your website

The shortcode pasted into a WordPress web page

Adding your own form fields to the form

The form tag generator dialogue in Contact Form 7

6.) First place your cursor where you want the new form field to appear. Then click one of the form tag generator buttons.
7.) The Form Tag Generator dialogue opens.
8.) Click the insert tag button to insert the shortcode into your form.
9.)Wrap the shortcode in label tags and text

Now move on to the mail tab

10.) Select the Mail tab
11.) If any shortcodes are a darker bolder colour than the rest
12.) You need to copy these into the Message Body section of the Mail tab. Don’t forget to add some text so you know what each shortcode refers to.

Always save your settings!

It’s a good idea to save your settings as you go along.

The Contact Form 7 email settings

The email settings in contact form 7 will work out of the box for most users. I’ve made a video explaining the recommended settings just in case you do have any problems. Provided you use an email address with the same domain name as your website you should be OK. Don’t use a Yahoo or Gmail address under the Mail tab’s To or From settings.

The text below just restates what I’ve said about Contact Form 7 in the article above…

This is how you build a form using Contact Form 7

Go to: Dashboard > Contact > Add New

When you click the Add New tab Contact Form 7 automatically builds you a basic form containing five form fields. Name, email, subject and message.

If you only need a simple form, this automatically created form is ready to use. Just copy the short code from the blue bar at the top of the page, and paste it in to any web page or blog post on your site. The form will just work.

However, Contact Form 7 can build much more advanced forms than this basic starter form.

And once you learn a few basic principles, Contact Form 7 is surprisingly easy to use.

The most important points to learn for any Contact Form 7 new user…

When you build a new form or edit an existing form, you must edit the settings under TWO tabs.

The Form tab AND the Mail tab.

The Form tab builds the form you see on your web page.

The Mail tab builds the email you receive when a website user submits a form.

The shortcodes under the Form tab

You add shortcodes using buttons under the Form tab. These buttons include things like email, tel, text area and acceptance.

Just place your cursor in the editor box and then click a button. Contact Form 7 will insert the short code that corresponds to that particular button, into your web page.

After adding a shortcode under the Form tab, wrap that shortcode in a html label tag and type text that explains what the user should type into that particular box.

The label will display above the form field on your web page, explaining to the user what to type into that particular box. Such as email or phone number etc.

The short codes under the Mail tab

After you build your form using the Form-tag Generator buttons, save your work.

Then click the Mail tab.

Look for the row of shortcodes near the top of the page.

If you’ve added new shortcodes under the Form tab, but haven’t added those extra shortcodes to the Message Body section under the Mail tab yet, those newly made shortcodes will be bold.

Copy each bold shortcode from the list and then paste it into the Message Body section under the Mail tab.

For each shortcode you add to the Message Body section under the Mail tab add some text to explain what the user typed into that form field. Such as email or phone number etc.

When you’ve added the shortcodes under both the Form tab AND the Mail tab make sure you save your work.

Then look for the blue bar at the top of the page. This blue bar contains the shortcode for the full form. It will start with…
[contact-form-7 id=

Copy and paste that contact form 7 shortcode into any web page or blog post on your website and your form will be displayed in that position.

The most important point to remember

If you add a new shortcode to the Form tab. You must then add that same shortcode under the Mail tab in the Message Body box.

If you only add the shortcode under the Form tab and not under the Mail tab, that particular form field will not be emailed to you when the user submits the form.

Both tabs, Form and Mail must be filled in correctly before your form can send you the results.