In today’s article I want to show you how to create a contact form in WordPress using the Contact Form 7 plugin. 
With this plugin you can create a form with all the fields you want in a few minutes. You can choose between including mandatory fields, optional fields, selectors for the user to indicate the service or product that they are interested in and much more.
And do you know the best of all? That Contact Form 7 is free and that it is the best plugin to create and add a contact form. Simple, easy to use and effective.
Contact form in WordPress: Tutorial Contact Form 7
The first thing you have to do go to your WordPress administration area and install it. To do this, go to Plugins > Add new and put “Contact Form 7” in the plugin search engine. Click on “Install” and then “Activate”.
Once you have done so, a new section called “Contact” will be added to the menu on the left.
Right now you can do two things.
If you want to create a simple WordPress contact form without customization, you can take the one that comes with Contact Form 7 and insert it directly into your web page. However, if what you want is something more careful and professional, you can make your own by investing a few extra minutes.
Contact form in basic WordPress
When you access the “Contact” section, you will see a list of the forms. Since you just installed the plugin, you will only have the default one, called something like “Contact Form 1”.
If you click on it, a tab will appear that says “Form” and inside you will have a text box with the typical fields of name, email, subject and message. If this works for you, all you have to do is indicate your email account to the plugin so that all the messages your visitors send you reach your usual mailbox.
To do this, go to the “Email” tab and leave the fields configured as follows:
- To: Here you must enter your email account. For example, abc@gmail.com.
- From: Here you have to enter the variable [your-name] and then put <wordpress@yourdomain.com>
- Subject: Here you have to put the title that you want the plugin to put to the messages that users send you through the form. I would put something like “Contact through the contact form.”
- You can leave the other fields as they are.
- When you finish configuring it, go to the top and, under the title of the contact form, you will see a small code in short code It will look like this:
- Copy this code and enter it on the page where you want to insert the form, usually the contact page.
- If you use a visual layout plugin such as Visual Composer (here is a tutorial), you can include the form anywhere on the web using the “Contact Form 7” element.
· Contact form in custom WordPress
- If you are reading this it is because you are not satisfied with the one that comes by default and you want to make your own contact form with custom fields.
- To create one from scratch, click on “Add new” and give it a title to identify it, something like “main contact form”.
- By default, as we have seen before, a form will appear with several fields: name, email, subject and message. I advise you to use them as a base and gradually remove or add what you need.
- To start adding new fields, create the html <label> tag and write the title of the field that you want to appear above the box where the user enters their data. Remember that html tags must be closed so put a </label> at the end so that it looks like this:
- <label> Write your phone here </label>
- At the moment what you have done is put a small text that indicates that you have to enter the phone. Now we are going to put the box where they should insert it.
- Since we said we were adding the phone field, select “phone”.
After you have filled in the fields as you need, click on the insert button and you will see how you have added a code along with the other fields. Make sure that the code generated by the plugin is within the labels you just created so that you should have something like this:
<Label> Enter your telephone number [tell * telephone] </label>
With this you have already added the telephone field as mandatory for the user.
Let’s go with another example.
Now you are going to add an optional last name field to your contact form in WordPress. To do this, we repeat the previous process and create the label:
<Label> Surname </label>
Then click on the “text” button and the pop-up window from before will appear again. In this case, leave the mandatory option unchecked and click “insert”. Remember that the short code that is generated must be between the <label> tags, so if the plugin does not place it there, copy and paste it inside so that it looks similar to this:
<Label> Surname [text * text-398] </label>
Finally, we are going to add some selectors. Imagine that on your website you offer 3 different services, and you want to know from the first moment what service the client demands. For this you can put some small fields with each service so that the user can choose and that you already know in which service they are interested.
First of all, add the <label> with its title as before. However, in this case, when dealing with selectors, to make it work well change the <label> tag to <p>:
<p> what service do you need? </p>
Now we go to the selectors. Imagine that you are a photographer and offer 3 types of services:
- Photography for weddings.
- Photography for communions.
- Photo book.
To add each selector, click on “selection buttons” and add the three options. Then click on “insert” and paste the code between the labels:
<p> what service do you need? [Radio radio-769 default: 1 «Photography for weddings» «Photography for communions» «Photo book»] </p>
Once you have finished entering these and the other fields you need, you have to take the short codes of the new fields that you have just created and enter them in the text area of the “Email” tab. If you do not do this, the user will fill in the form with all the fields but the complete information will not arrive.
How to redirect users to another page after completing the form
If you want to send users to another page after they complete the contact form, for example to a thank you for completing the form, you have to install a plugin that complements Contact Form 7 and adds this functionality.
This is very useful when you want to count the conversions if you have carried out an advertising campaign (here you will put the conversion code), or when you have offered a lead magnet and you want to put the gift content on this page.
To do this, it is as simple as installing the Contact Form 7 Redirection plugin and you will see a new tab appear in the form creation section.
