Contact Form 7 Step By Step Tutorial

In this step by step tutorial I’ll show you how you can EASILY create a contact form using the WordPress plugin Contact Form 7. Without any knowledge you can add a professional looking contact form to your blog or CMS in a few steps.

A contact form on your website or blog is one of the best ways for your visitors to contact you. Normally, this would be a job for tech guys. Today, thanks to WordPress and a nice plugin called “Contact Form 7″, everybody can do this. And to make it even more easier for you, I wrote this short tutorial.

There are only a couple of steps you have to do:

• Install and activate the plugin
• Create and edit a contact form (or use the standard form)
• Attach the contact form you created to a page

Install and activate the plugin

First install and activate the following plugin: Contact Form 7.

If you don’t know how to install and activate a WordPress plugin, please check out one of my previous posts about installing plugins.

You can find more information about this plugin on:

• The plugin’s official page on WordPress.org
• The plugin’s official website

Contact form page overview

To create / edit contact forms, click the “Contact” button in the left menu:

You will now see the following page:

Let’s take a look at all the different parts of this page:

1. Overview of existing forms and “Add new” link to create a new form
2. Title of the form you’re editing including the tag to copy and past in a page to attach the form to a page. You can also copy or delete the current form.
3. The actually form, here can you design your form. Combine html and the form-tags to do this.
4. Here you can create new tags to use in your form (3)
5. Settings of the mail that you wel receive after a visitor submits the form.
6. Message body of the mail that you will receive after a visitors submits the form.
7. You can use Mail 2 as a confirmation mail, check “Use mail (2)”.
8. The Save button to save all your changes.

Using the standard form

After activating the plugin, it’s possible to use directly the standard contact form. This is a great solution if you don’t have a lot or time. In fact, I used this standard form for multiple sites! The only thing you have to check is if your correct email address is filled in. Check the settings of the mail you will receive:

After doing this, go directly to the “Attach the contact form to a page” part.

If you want this basic form in another language, go to “Creating a new contact form” where you will learn to choose the language when creating a new form.

Editing a contact form

For a lot of readers, using the standard form will not be an option. Luckily, it’s easy to edit this form. Before we do this, it’s important to know a little more about how Contact Form 7 works.

How Contact Forms 7 works

Each contact form exists of html and tags. Let my explain this with the standard form as an example:

When we take a look at the first field, we see this:

This is the field where your visitor fill in his/her name. The  -tags indicate that we have 1 paragraph, the -tag is a line break. This means that the input field itsself will be on the second line.  So on the first line, we only have text: Your name (required). You can easily change this text to something else like: Your Full Name (required). It doesn’t affect the field.  On the second line we have our actual tag: 

• text: this indicates that this is a text-field.
• *: this indicates that this field is required.
• your-name: this is the name of the field.

The name of the field has to be unique. It’s okay to change this fieldname. To create extra fields it’s easy to copy / paste existing fields, but don’t forget to rename them. If you know some html you also can create another layout for your form, for example using a table.

Generating new tags

It’s possible to create a lot of different sorts of tags in Contact Form 7:

• Text field
• Email field
• Text area
• Drop-down menu
• Checkboxes
• Radio buttons
• Acceptance
• Quiz
• CAPTCHA
• File upload
• Submit

To generate a new tag, click the “Generate tag” button:

Now select the sort of field you want to create. For example, I will select a drop-down menu. The following fields will appear to generate the drop-down menu:

(This screen depends on the sort of tag you want to generate!)

Now, let’s give it a name and fill in some choices:

• First, fill in the name
• Write one choice per line

There are also some extra choices, for example to make this field required. After you did this, the tag will be generated automaticly (in the box with the brown background):

Note that the tag to add to the mail message body also is generated here (in the box with the green background).

Now all we have to do is to copy the tag code to the form. So in your form, you could add following code:

<p>Your job<br />
[select your-job "consultant" "sales" "designer"] </p>

Change mail message body

Now, it’s important that we also add the fields we created to our mail message. To put the value of the field in a mail message, the only thing you have to do is to add a tag just containing the name of your field . For example, you could add the following text and code to the mail message:

Your job:
[your-job]

This is how the result looks like:

Creating a new contact form

In a lot of cases, editing the standard form will be just fine. But in some cases you’ll need to create a new form. A possible reason could be that you need more then 1 contact form, or that you need a contact form in another language.

How to do this?

• Click the “Add new” link:

  
• Create a default form or choose another language:

  
• Now you get a new standard form:
  
  
Don’t forget to give it a name. Therefore you have to click on “Untitled” and fill in a name. Don’t forget to click on the “Save” button!!
• Now you can edit your new form!

Attach the contact form to a page

Okay, after we created our contact form, the only thing left is to attach this to a page. First thing we have to do is to copy the name of the form:

• Go to “Contact” > “Edit” in the left menu.
• Select the contact form you want to attach to a page
• On top of the contact form, copy the code including the tags:

  

Now attach this contact form to a page:

• Open the page where you want to attach the contact form
• Paste the code (including the tags) in the page:
  
• Save / Update the page

Don’t forget to test your form!

Change the standard messages (optional)

It’s possible to change some standard messages. For example, if a visitor fills in the form and clicks the “Send” button, he or she will see a message. You can change these standard messages in the “Messages” part:

These messages are hided by default. Changing these messages is optional.

Result

Now, your visitors will be able to see the following form:

Extensions

Thanks to the popularity of the Contact Form 7 plugin, there are some extensions.

Contact Form 7 To Database Extension

Thanks to this plugin it’s possible to store the input of your visitors into your database.

More information:
Contact Form 7 to database extension on WordPress.org

jQuery calendar

For the moment, there is no standard functionality to select dates with a date picker / calendar. But thanks to jquery and with a little bit of coding, this is perfectly possible. I’ll keep this for a following article.

Mail to person depending on the value in a drop-down list (multiple recipients)

It’s possible you might need to create a mail form that has to mail to a certain person depending on the subject in a dropdown-list. There’s no extension for this, but this is actually very easy to create.  You can find a step by step guide for this in the following article: Contact Form 7 multiple recipients tutorial.

Conclusion

As you can see, the Contact Form 7 is a very simple to use but powerful plugin. With this plugin, it’s possible to create awesome contact forms in just a couple of minutes.

I hope you liked this article. Don’t hesitate to leave a comment or to write down other tips to create a contact form!

Related Posts