Contact Form 7 Step By Step Tutorial

In this step by step tutorial I’ll show you how you EASILY can create a contact form using the WordPress plugin Contact Form 7. Without any technical 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, creating a contact form 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 a contact form (or use the standard form)
• Attach the contact form you created to a page (or post)

Install and Activate Contact Form 7

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:

Here you get an overview of all the forms you created. When it’s the first time you visit this page, you’ll see 1 form: Contact Form 1.

If you just need a simple contact form

After activating the plugin, it’s possible to use the default contact form (Contact form 1) directly. This is a great solution if you don’t have a lot or time or you just need a simple contact form. In fact, I used this standard form for multiple sites!

How to do this?

• Click on the title of the default form (Contact form 1)
• Check if the email address under the part “Mail” is correct (this should be your email address)
  
• Click the “Save”-button if you changed the email address.
• After doing this, scroll down directly to the “Attach the contact form to a page”-part of this guide.

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

Editing a contact form

For a lot of readers, using the default 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 (= form fields). Let my explain this with the default form as an example. Open the default form (Contact form 1). Under the part “Form” you’ll see the following code:

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

<p>Your Name (required)<br />
[text* your-name] </p>

This is the field where your visitor fill in his/her name. The <p>-tags indicate that we have 1 paragraph, the <br />-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* your-name]

• text: this indicates this is a text-field.
• *: this indicates 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 can also create another layout for your form, for example using a table.

GENERATING NEW FORM FIELDS

It’s possible to create a lot of different kinds of form fields 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 (form field), click the “Generate tag” button (under “Form”, on the right part of your screen):

Now select the kind 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 options, 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

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:

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 (on top of your screen):??
• Create a default form or choose another language:??
  
• Now you get a new default form:
  
  ??You can also change the title of the form. Therefore you have to click on “Untitled” and fill in a title.
• Now you can edit your new form! Don’t forget to click on the “Save” button!!

Attach the contact form to a page or post

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

• Go to “Contact” in the left menu
• Copy the code on the right of the form title:
  

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
• TEST your form!!

Change the default messages (optional)

It’s possible to change some default 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 default messages in the “Messages” part:

Result

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

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 leave tips about Contact Form 7!