See How To Add A Contact Form To Your Website
About This Lesson
But don’t worry, it’s really easy to do and in this tutorial I’ll show you exactly how to do it!
In this tutorial I’ll,
- Walk you through exactly how to create a contact form
- Show you how to add it into a post or page on your site
- Show you how you can insert a contact form into you sidebar or footer
To do this you’ll need to have,
And if you want to add a contact form into your sidebar or footer, you’ll need to know what widgets are.
1) For those of you who don’t, check out my “WordPress Widgets Tutorial”.
2) You’ll also want to check out my “Black Studio TinyMCE Widget Tutorial”.
This lesson is broken up into two parts, in the first part we cover “How To Add A Contact Form To Your Posts Or Pages”. I’ve broken this into 7 steps, (this may look like there’s a lot to do, but trust me, you’ll fly through this),
- Install Jetpack
- Setup Jetpack
- Add A Contact Form To A Page Or Post
- Setup The Contact Form
- Set Your Email Notifications
- Complete Your Contact Form
- Test Your Contact Form
In the second part of this lesson, we’ll cover “How To Add A Contact Form To Your Sidebar Or Footer”
Read All About It
Step By Step – How To Add A Contact Form To Your Posts Or Pages
Step 1/7 – Install Jetpack
If you search the WordPress plugins directory, you’ll see there are 100+ contact forms you could use.
In this tutorial I’m going to show you how to use the contact form that you get within the Jetpack plugin.
Jetpack is a plugin that actually has over 30 extra features you can add to your WordPress site, such as social share buttons, site stats and more cool stuff.
But for this tutorial I’m just going to focus on their contact form creator.
So to install Jetpack,
- Go to Plugins > Add New
- Within the “Install Plugins” section you’re able to navigate to some of the most popular WordPress plugins, of which Jetpack is one. So at the top, click “Popular”
- Then scroll through until you find, “Jetpack by WordPress.com” and click “Install Now”
Once it’s finished installing, activate the plugin like in the image below.
Step 2/7 – Setup Jetpack
Before we can add the contact form to our site, Jetpack requires us to connect the plugin to a wordpress.com account. If you don’t have an account, don’t worry I’ll show you how to set one up.
Connect To WordPress.com
If you’ve activated the plugin, you’ll see the “Jetpack” link in your navigation menu, so like in the image below, click “Jetpack”. Then click “Connect to Get Started”.
Which will then take you onto the next screen, when you can connect to WordPress.com.
If You Already Have A WordPress.com Account
For those of you who already have an account, here’s what you need to do,
- Enter in your WordPress.com username and password, then click “Approve Jetpack”. And you’re now ready to activate the contact form!
- If you don’t have an account, click “Need an account?”
If You Don’t Have A WordPress.com Account
For those of you who don’t have an account, after clicking “Need an account?” (See number 2 in the image above), you’ll be given the option to create an account, so like in the image below, enter your email, a username and password, then click sign up.
You’ll then get an email from WordPress. Within that email you’ll need to click the “Activate Account” link.
Then sign in as shown above – If You Already Have A WordPress.com Account
Finally You Need To Activate The Contact Form
As I said earlier, the Jetpack plugin has over 30+ features and when you install Jetpack on your site, they let you choose which features you set as “Active”.
In this case we’ll need to activate the contact form feature. So to do this,
- In your navigation menu, go to Jetpack > Settings
- Tick the box next to the contact form
- And then click the “Activate” button that appears. That’ll then activate the contact form
I personally strongly recommend you “Deactivate” all the other features within Jetpack, unless you’re going to be using them. Having extra features active when you’re not actually using them, could slow your site down.
If you want to deactivate all the other features,
- As before, in your navigation menu go to Jetpack > Settings
- Then tick the box right at the top, the one next to the “Bulk Actions” drop down. This will then tick all of the features that Jetpack have, ready for you to deactivate them
- Untick the “Contact Form” as we want to keep this active obviously
- In the “Bulk Actions” drop down, choose “Deactivate”
- And click the “Apply” button
And that’s it, Jetpack will deactivate all the other features. (If you want to use any of the other features, I recommend only activating the features you’re using.)
Step 3/7 – Add A Contact Form To A Page Or Post On Your Site
In this example, I’ll show you how to add a contact form into a page, but it’s the same process for adding it into a post.
In the image below I’ve navigated to my “Sample Page”, which is where I’m going to add my contact form.
To add the form,
- I put the cursor where I want the form to go
- And then I click the “Add Contact Form” button
Which will then take me to the contact form builder…
Step 4/7 – Setup The Contact Form
The form builder lets you choose what items you want to include. I’ll quickly explain how to use it, then you can create your own contact form.
- Contact Form: – The white area on the left hand side will show you what you’re including in your contact form. So as in the example above, if I were to add this form to my site I would have two “Fields” for people to fill out. One called “Name” and the other “This Is The Label” (this is just an example.)
- Add a new field: – I can add more fields by clicking the “Add a new field” button. When I click this button I’ll get a set of options on the right hand side
- Label: – The “Label” lets you insert a heading so people know what information they need to add. So if you put “Name” or “Enter Your Name Here”, they’ll know what they need to do
- Field Type: – You can choose what “Field type” you want to use. There are 8 you can choose from. (I’ll explain what each of them do below)
- Save this field: – When you’ve given a field a label and chosen the field type, make sure you click the “Save this field” button. This will then be added into your contact form
- Move Or Edit: – If you want to move or edit a field, on the left hand side where your contact form is, hover your mouse over the field you want to move or edit, and you’ll see the options “move” and “edit” appear
- To move a field, click and hold the move button, then drag it to where you want the field to go
- To edit a field, just click the edit text button and you’ll see a set of options appear on the right hand side, which will let you edit the field
- Delete: – If you want to delete a field, just press the – sign that’s next to it
- Required: – You can’t actually see it in the image above, but below the “Field type” drop down there’s an option to make the fields “Required”. Meaning if someone tries to fill out the form and they miss the fields you’ve marked as required, they’ll get an error message and told they must fill out that field to be able to contact you.
Let me quickly walk you through what all the “Field Types” are. (Although you’ll see they’re pretty self explanatory.)
This gives your visitors the chance to tick a checkbox. You can have multiple checkbox’s and people can check more then one option at a time.
In the example below I’m letting people choose if they do, or don’t want to receive a call back from me.
Then when I receive this message, I’ll see what option they chose.
This gives your visitors the chance to select from a range of options that you’ve created.
In the example below, I’ve created the options of “London”, “New York” and “Other”. Anyone filling out this form will have those options to choose from, but they can only choose one.
This field lets your visitors enter in their email address, so you can contact them back.
If they don’t put in a full, valid, email address, they’ll get a message that says, “Please enter an email address”, like in the image below.
This field lets your visitors give their name.
This lets your visitors choose between multiple options, but they can only pick one. You can create as many options as you want by clicking the “Add another option” button.
This gives your visitors the chance to enter in any text or numbers they want. (It’s called a “Text” field, but your visitors can actually insert numbers if they want to.)
This can be used for when you want your visitors to type something out, such as a telephone number or just answers with a few words.
This lets your visitors type out a longer message. Which is the perfect place to enter in the purpose for them contacting you.
Just as the title suggests, this gives your visitors the chance to enter in their website address. Probably not something a lot of people need, but it’s there anyway.
Quick Tip: Keep It Simple!
My only suggestion when you create your contact form is to keep it simple.
The more information people have to fill out, the less likely they are to do it.
Step 5/7 – Set Your Email Notifications
We’re almost done now.
Once you’ve created the form, you’ll need to set where the message will go, i.e. to what email address of yours. To do this,
- Go to “Email notifications” at the top
- Enter in the email address of where you want the message to go
- Then enter in the subject line you want these messages to have
- Click, “Save and go back to form builder”
Step 6/7 – Complete Your Contact Form
All you need to do now is click the button that says, “Add this form to my post”.
Once you’ve done that you’ll be taken back into the edit screen of your page or post.
Click the save or update button to make the contact form live on your site. (Note: You won’t see the contact form appear in the admin area of your WordPress site, you’ll just see some text.)
Step 7/7 – Test Your Contact Form
Everything should now be working fine but just to make sure, it’s a good idea to give your contact form a test run.
The image below shows what happened after I hit the submit button, from the above image.
And this is the email I received.
And that’s it.
Step By Step – How To Add A Contact Form To Your Sidebar Or Footer
Adding a contact form to your sidebar or footer is almost identical to the above process, but in step 3, instead of going to a page or post and clicking the “Add Contact Form” button, we’ll do this within a widget that we add to our sidebar or footer.
But to do this, we first need to add a special widget, which lets us create content in our sidebar or footer the same way as we do in our posts or pages.
I’ve actually created a separate tutorial, which will show you exactly how to add the widget to your site, which you can see here – Black Studio TinyMCE Widget Tutorial.
When you’ve installed that widget, the whole process of adding a contact form to your sidebar or footer can be broken down into the following steps,
- Make sure you’ve already completed step 1 and step 2 as above
- Go to Appearance > Widgets
- Then in the “Available Widgets” section, you’ll see “Visual Editor”
- Click and drag the “Visual Editor” into the sidebar or footer area where you want to have your contact form
- Click the little arrow next to your “Visual Editor”
- Then click the “Add Contact Form” button
- Then complete step 4, step 5, step 6 and step 7, as above. But that’s it.
And that’s it for this lesson.
If you’re interested in more tutorials like this, check out my individual tutorials page.