Contact forms are an excellent way for your website visitors to get in touch with you.
There are many benefits to using a contact form rather than simply listing an email address on your website such as:
- The convenience of being able to contact you directly through your site rather than having to open an email program.
- You can control what information you receive by having the user fill out specific fields.
- Contact forms reduce spam since?bots can’t harvest your email address from the text on your site.
- It’s easier to track how people are contacting you and where you’re receiving leads from.
It’s also quite easy to set up your own custom contact forms using a free WordPress plugin called Contact Form 7.
You will have to have a website that’s built using WordPress though.
Installing the Plugin
First log into the WordPress dashboard and go to Plugins > Add New.
Because the plugin is so popular sometimes you’ll see it on this first page and you won’t have to search for it. If you don’t see it then just type “Contact Form 7” into the Search Plugins field.
The plugin you’re looking for should come up first and looks like this:
Click the Install Now button. When the plugin is finished installing the button will change to a blue Activate button. Click that button now to activate the plugin.
With the latest version of WordPress you can install and activate new plugins directly from this screen which is nice.
Now that the plugin is installed you’ll have a new option in the WordPress dashboard menu called Contact.
This is where you’re going to manage all of your contact forms.
If you click on Contact Forms in the sub-menu you’ll be taken to a screen with a list of all your forms.
This is laid out just like the pages or posts screen so it should look a bit familiar.
You’ll also notice that the plugin comes with one form that’s already set up called “Contact form 1”.
Each contact form also has its own shortcode which looks similar to HTML code but uses square brackets instead of angled brackets.
This shortcode is used to insert the form anywhere on your site. Simply copy the entire line of code from the [ to the ] and the contact form will show up where ever you paste the shortcode. This can be on any post or page.
Creating Your Own Contact Form
The easiest way to start making your own form is by editing the one that came with the plugin, Contact form 1.
Mouse over Contact Form 1 in the list?and click on Edit.
You’ll see you also have an option to duplicate the form which is useful when you want to make similar form without starting completely from scratch.
After you click edit you’ll be taken to a contact form editor that looks like this:
You’ll see that there’s already some code there for a simple contact form. This code is a mixture of HTML and the plugin’s own shortcodes. Don’t be intimidated because it’s actually quite easy to edit.
When this form is inserted into a page on the website it looks like this:
Now let’s break down how this code creates this form.
Firstly, if you’re not familiar with basic HTML I recommend you check out our?guide to basic HTML which will help you understand this much better.
You’ll notice that this form has 4 fields, “your name”, “your email”, “subject” and “your message”.
The code for making the “your name” field is this:
<label> Your Name (required)
[text* your-name] </label>Each field of the form is usually?in between a <label> and a </label> tag.
Immediately after the <label> you have the text that appears with the field. In this case the text that appears is “Your name (required)”.
[text* your-name] is the shortcode that the plugin uses for the field. “text” means that this is a text field. The * means that this is a required field and “your-name” is the name of the field so the plugin can tell the difference between each field.Then you end with a closing </label> and that’s basically it for a simple text field.
The HTML label tag isn’t technically necessary but it’s nice?to include because if you click on the text within the label tag on the actual website it’ll automatically put the cursor into the field so you can start typing.
If you think the label tags make things more confusing then don’t worry, you don’t have to use them at all and you can still make a great looking form.
This:
Your Name (required) ? ? ? ?[text* your-name]
Will work just as well as this:
<label> Your Name (required)
[text* your-name] </label>It’s important?to understand how this code?works but fortunately you don’t have to type it yourself. You can insert your own fields using a much more intuitive editor.
For example to insert a basic text field click on the text button at the top of the editor for a pop-up that looks like this:
Under Field type you can check whether or not the field is required. If you check required and a user doesn’t fill out this field they’ll get an error message telling them to go back and fill it out before they can click send.
Name is the name of the field. This is an identifier that the plugin uses to tell which field is which. Give it a simple but descriptive name because you’ll need to be able to tell what it is later.
Default Value is what the field is going to say by default and if you check Use this text as the placeholder of the field the text will already be in the field so the user has to delete it first or edit it.
If you check the box by Akismet and have the Akismet plugin installed and set up then before the form sends the information it’ll check with Akismet whether or not it’s spam.
For example if you create an email field and check the Akismet box then before the form sends the information it’ll check to see if that’s a known email for sending spam, if it is then it won’t let the user click the submit button.
You don’t need to worry about Id attribute or Class attribute. Id attribute is used for fancy things like abandonment tracking and Class attribute is used for assigning specific CSS classes to that field so it’ll have separate?formatting from default.
When you’re all done click the blue Insert Tag button.
You’ll notice the code for this tag went right at the end of the field because that’s where the?cursor was.
This is why you need a basic understanding of how this code works, so you?can clean this up and make everything work properly.
We’re?going to add the label tags and a message to appear over the field. This field?is also going to appear as the last field right above the submit button. The code looks like this when it’s cleaned up:
When we?made this field we filled in almost all the options why is why there’s the bit about akisment, the placeholder and the default text in quotation marks.
With this added field our?form now looks like this on the actual website:
You can see my example field with the placeholder text at the bottom.
You’ll also see that our?code for this field is spread over two lines and the second line is indented. This isn’t necessary and it’s just something people do so their code is easier to read.
Typing:
<label> My Example Field
[text* text-field-example placeholder akismet:author "Example"] </label>Will look exactly the same on your site as:
<label>My Example Field [text* text-field-example placeholder akismet:author "Example"]</label>
It’s just a bit easier to read on the backend.
Now lets take a look at some of the other fields you can create.
Types of Form Fields
Text is the simplest most basic field and we’ve already covered that.
Next is Email and this works pretty much exactly the same as a text field however it’s a bit different for someone filling out the form.
The email field has all the same options as the text field when you’re building the form but when someone goes to fill in this field on your website the plugin will make sure they enter an email address. If they don’t enter a valid email address they’ll get an error.
If you want to collect someone’s email always use an email field instead of a text field. If you use a regular text field the user might type in something that’s not an email address and you’ll have no way to email them back.
The next field is URL which again works just like the Text or Email fields except it checks to make sure the user has entered a URL into the field.
Tel is a field for entering in a telephone number and the plugin will check to make sure a valid phone number has been added in. It doesn’t matter how you enter the number as long as it’s an actual telephone number 1234567 and 123-4567 will both work 1234567ABC won’t work.
The Number field is for entering in a number and has some new options that we haven’t seen yet.
The first option is to have either a Spinbox or a Slider.
The Spinbox looks like this:
You can directly type in a number or use the up and down arrows on the right of the field to count up or down.
The Slider looks like this:
The slider doesn’t specifically have any numbers listed so it’s probably best to use this option if you set the range to something small like 1 to 5.
As you can see in the screenshot about you can enter a range with a min and max number and the user will have to enter a number within that range.
The Date field will let you enter a date using a little calendar that looks like this:
You can also set a minimum and maximum date and when you enter those in the editor they have to be in the format YYYY-MM-DD so a minimum date of 2016-08-31 for example.
The text area field is just like a regular text area except the box is much bigger. Just like a text field the user can type anything. This is best used for a large answer or in a simple form like the default one it’s used for the user to enter their whole message.
The drop down field lets you create drop down lists where the user has to select one of multiple options.
In the section for options you enter all the options for your drop down menu with one per line.
You can check Allow multiple selections but then your menu looks really weird and it’s better to use checkboxes then.
You can also Insert a blank item as the first option which is usually a good idea because people who fill out the form as fast as possible will often just leave the first option selected. If you’re doing any sort of survey or research then this can affect your results.
The drop-down menu will look something like this:
Checkboxes work similar to a drop down menu except you get several boxes that you can check.
By default it’ll put the box first followed by the name of the option but if you select Put a label first, a checkbox last it’ll put the box after the text.
Wrap each item with a label element will add the <label> and </label> tags to each option which isn’t necessary unless you’re trying to do something fancy so don’t worry about this option.
If you try to put label tags around a checkbox field you’ll get an error. For example if your code looks like this:
<label> Checkbox Example [checkbox checkbox-76 "Option 1" "Option 2" "Option 3"]</label>
It’ll give you an error. For checkboxes you can’t use these label tags because your browser sees each check box as its own form element and wrapping them all in a label tag causes problems.
These label tags can be a bit confusing but don’t worry because you don’t have to use them at all. You can completely ignore everything?we’ve said about them.
Make checkboxes exclusive means that you can only select one checkbox in the form. Checkboxes are usually used to select multiple options so if you only want them to select one option you should probably use radio buttons.
Here’s how they look on the form on the website:
Radio buttons function pretty much exactly like checkboxes except they look a bit different and you can only select one option.
You also can’t put the radio button shortcode inside of a <label> and </label> tag.
Here’s how they look on the site:
The acceptance button will let you create what’s called an acceptance checkbox which is the little checkbox that you often see at the end of forms saying something like “I agree to be contacted after I submit this information”.
Make this checkbox checked by default is exactly what it sounds like.
Note that your country might have rules for this sort of thing. For example in Canada if you’re collecting people’s information so you can email them later you have to have a checkbox like this and it cannot be selected by default.
Make this work inversely means they have to uncheck the box not check it.
It’ll look like this on your website:
You can have whatever text you want appear after the checkbox you just have to type it after the shortcode. So to make a field that looks like this the code looks like:
<label> Acceptance Example
[acceptance acceptance-773] You must select this option to proceed</label>The quiz button lets you create a quiz with one or multiple questions.
You have to enter one question and answer per line. You type the question first followed by a pipe character | (which you get by hitting Shift + \) followed by the answer.
Here’s how it looks on your site:
If you have more than one question and answer pair it’ll show a different one every time you refresh the page.
You can use this field to make sure only humans that answer a question related to your website will email you for example.
reCAPTCHA will let you enter a CAPTCHA thing that the user will have to properly solve before contacting you. This requires extra stuff that has to be configured separately from this plugin so I won’t cover it here.
CAPTCHA’s are annoying anyways and you can use the Akismet option to screen out spam or use a quiz to make sure the user is human.
file will let a user upload a file that will be included in the email you receive as an attachment. This is useful if you have something like a job application?and you’re asking people to include a resume.
You can set a file size limit in bytes or leave it blank.
In the Acceptable file types field you can enter the extensions of the file types you want separated by a |. For example something like “jpg|png|gif”.
On the website it’ll look like this:
The final button, submit, lets you insert a submit button into your field. In the options here you can change the text on the button.
The code for a submit button is already there in the default form and looks like:
[submit "Send"]
The text in-between the quotation marks is the text on the button.
That covers everything related to all the fields. Next we’re?going to make a really simple form from scratch.
Creating a Simple Form
For this example we’re?going to create a very simply form with a name field, email field and message field.
To keep this as simple as possible forget everything about the <label> and </label> tags.
First we’re?going to delete all the code that’s there.
To create our?name field I’ll click on the text button, check Required Field, enter “name” as the name of the field and then click insert tag.
Our?code now looks like this:
[text* name]
We want some instructions above this field so we’re?going to enter them before the shortcode. Our?code now looks like this:
Please enter your name (required) [text* name]
We?added “(required)” so they would know they have to fill in that field
Next we’re going to create a field to get their email address so we can email them back.
We’ll?click the email button, check Required Field, enter “email” as the name of the field and click the insert tag. We’re also going to put instructions in front of this field.
Our?code now looks like this:
Please enter your name (required) [text* name] Please enter your email address (required) [email* email]
Next we’re?going to add a text area for their message by clicking on the text-area button, selecting Required Field and entering “message” as the field name. We’ll also enter some instructions before the field as well.
Our?code now looks like this:
Please enter your name (required) [text* name] Please enter your email address (required) [email* email] Please enter your message (required) [textarea* message]
Finally we need to add a submit button so we’ll click on the submit button at the top and for the label we’re?putting “Click Here to Submit Form”.
Our?form is now complete and our?code looks like this:
Please enter your name (required) [text* name] Please enter your email address (required) [email* email] Please enter your message (required) [textarea* message] [submit "Click Here to Submit Form"]
Here’s how our?form looks on the actual website:
That’s all you need to do to create a form. You just need to have a basic understanding of how the code works and you can insert which ever elements you want.
Note that if you’re familiar with HTML you can add things like headings, sections of text, images and more to your forms in-between the individual field shortcodes.
Configuring the Email You’ll Receive from Your Form
Now that your form is set up it’s time to configure some of the behind the scenes things that will affect the email you receive.
Click on the Mail tab at the top of the form editor to get to a screen that looks like this:
If you’re editing the default form all these fields will be filled already but we?deleted everything so we can start fresh.
At the top you see a message that says that you can use the following mail-tags. In our?example we have [name], [email] and [message].
These are the names of the 3 fields we created. This is why it’s important to give each field a name that makes sense.
These work pretty much the same as merge fields in a word processor program. If you insert the merge tag for a field into the body of your email then the information entered into that field will appear in that part of the email.
But lets start at the top with the To field. This is where you want the form to send its information so you most likely want to enter your own email address here. ?If you have more than one person who needs to receive the message you can enter multiple email addresses here separated by commas.
The From field here doesn’t make a lot of sense. This is who the email you’re going to receive is coming from so you’d think you could enter the merge field for the email address in your form but?you can’t. You have to enter an actual email address like your own.
To make things even more weird you can enter a merge field for the name you captured in the form, you’d enter this in the field then:
[name] <emailaddress@yoursite.com>
The makers of Contact Form 7 recommend that you put an email address here that has the same domain as your website because this helps prevent the email you get from appearing as spam.
Our?advice for this field is to just create a simple email address with the same domain as your website like contact@yoursite.com, put that in this field and move on.
If you try to do anything fancy here you’re going to run into frustrating errors.
If you don’t have an email address at the same domain as your website just put your own Gmail, Hotmail or whatever email here. It’ll give you an error saying to use an email address with the same domain as the site but that’s fine, the form should still work.
Next is the Subject field, this is where you can enter?the subject of the email you’re going to receive. We always like to put something descriptive here like “Contact Request from Website Name” so we know this came from the contact form on our website when we’re?sorting through our?emails.
You can also create a field in your form for a subject and then enter the merge field here and whatever the user types as a subject into your form will appear as the subject of the email. The default form was set up like this.
Additional Headers lets you add a CC, BCC and reply to email address.
If you have an email field in your form we recommend you type:
Reply-To:?[email]
This will let you click the reply button in your email program and automatically reply back to the person who filled out the form.
If you want to CC or BCC someone you enter:
CC: name@example.com
or
BCC: name@example.com
Next you have the Message Body section where you can edit how the email you’re going to receive looks.
Here you can type whatever you want and use the merge tags for the different fields in your form to get that information in an email.
Here’s what we’ve set up for our simple form:
Person's Name: [name] Person's Email: [email] Message: [message]
This will result in an email that looks like this:
Person’s Name: John Doe
Person’s Email: john@email.com
Message:
This is a message, it’s just an example.
The more fields you have in your form the more more merge fields you can enter into your message body.
We always like to put a quick bit of text describing what’s going to appear before I put the merge field just so there’s no confusion.
There’s a few more options on this screen to cover.
Exclude lines with blank mail-tags from output will remove that line from your email if the person didn’t enter any information in the field.
For example say you have an optional field called phone-number in your form. In your message body you have a line that says “Phone Number: [phone-number]”.
If the user enters their phone number as 123-4567 in the email you’ll get “Phone Number: 123-4567”.
If you check this option and the user leaves this field empty you won’t get this line in your email. You won’t receive something that says “Phone Number: none” or anything like that, this whole line with the phone number simply will not be in the email.
If you have really big forms with a lot of optional fields this can make the emails you receive much simpler and easy to read.
By default the email you receive will be plain text but if you check?Use HTML content type then you can enter HTML code into the message body of the email you’ll receive to spruce up the formatting or whatever you want.
The File attachments section needs to be filled in if you have the option to upload a file attachment through your form.
For example if you have a file attachment field in your form called “files” then you have to enter the?merge tag?[files] in this section or you won’t receive the file they submitted.
There’s one more small option called Mail 2 at the bottom. If you check this it’ll open another whole editor up for a second email that can be sent out.
This option is usually used to set up an auto-responder.
A Few More Optional Settings
We’ve pretty much covered everything you need to know to create and set up contact forms on your website but there’s a few more?options to take a quick look at.
If you click on the Messages tab you’ll be taken to a screen with all the messages for the form and you can edit each one. These are the little messages the user will receive thanking them after they’ve filled out the form, telling them if they have an error, etc.
There’s absolutely no need to change any of these but if you want to use your own custom messages for whatever reason you can enter them here.
On the Additional Settings tab you can enter the code for any additional fancy things you want to do with the form.
You have a few options that you can read about here but you’ll never need to worry about this section.
Inserting Forms Into Pages On Your Site
As mentioned briefly near the start of this post each contact form you create has its own unique short code. You can find this in a blue box at the top of the form editor,
Or on the screen with the list of all your forms:
You can copy and paste this short code any where you want the form to appear.
For example we?have an example contact page and the content on the page looks like this:
This is my example contact page. [contact - form-7 id="48582" title="Contact form 1"]
The actual page on the website looks like this:
You’ll see the form appears right below our?line of example text.
You can also copy and paste the shortcode into a text widget if you want the form to show up in your sidebar, footer or other widget area.
Contact Form Best Practices
Generally speaking you want to keep things as easy as possible for people on your website.
This is why we?usually keep our?forms to just a name, email address and message.
If you have any sort of lead generation forms for your business then it’s tempting to include fields for all kinds of things like phone number, address, and other information that might help your agents or realtors.
Keep in mind that the more fields you have in your form the more people will look at it, decide they don’t have time to fill it out and leave.
Therefore it’s best to keep your forms as simple as possible and only collected the absolute minimum amount of information you need.
If you have any drop down menus, radio buttons or checkboxes be careful what you have for your first option.
If one of your options is selected by default a lot of people will just leave this as is instead of selecting their own response.
If you have a form collecting data for a research project this could easily skew your results.
Therefore it’s usually best to have a blank option first for drop-downs and make sure checkboxes are all un-selected by default.
Styling Contact Forms
One of the most awesome things about WordPress and the Contact Form 7 plugin is that you don’t really need to worry about styling your contact forms.
The theme you’ve installed will have its own CSS code that controls how the fields look and it’ll fit the overall design of your theme.
For example here’s how our?example contact form looks using the Parallax Pro theme:
And here’s the same form again using the Eleven40 theme:
As you can see they look completely different. All we?did was change the theme, we didn’t make any changes to the form itself.
In both cases the design of the form perfectly matches the rest of the website.
What is an SSL Certificate and Why is it Important for Your Website?