See How To Add A Contact Form To Your Website

Contact Forms Galore

About This Lesson

Because the default install of WordPress doesn’t have a contact form, you’ll need to add this feature to your site by installing a plugin.

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,

Prerequisites

To do this you’ll need to have,

1) A WordPress website

2) An understanding of WordPress plugins

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”.

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,

Install Jetpack By WordPress

  1. Go to Plugins > Add New
  2. 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”
  3. 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.

Activate Jetpack

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”.

Connect To WordPress

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,

Authorize Jetpack

  1. Enter in your WordPress.com username and password, then click “Approve Jetpack”. And you’re now ready to activate the contact form!
  2. 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.

Don't Have A WordPress Account

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,

Activate Jetpack Contact Form

  1. In your navigation menu, go to Jetpack > Settings
  2. Tick the box next to the contact form
  3. 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,

Deactivate All Other Jetpack Features

  1. As before, in your navigation menu go to Jetpack > Settings
  2. 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
  3. Untick the “Contact Form” as we want to keep this active obviously
  4. In the “Bulk Actions” drop down, choose “Deactivate”
  5. 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

The next step is to go to the page or post that you want to add your contact form to.

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.

Add Contact Us Form

To add the form,

  1. I put the cursor where I want the form to go
  2. 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.

The Contact Form Builder In Jetpack

  1. 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.)
  2. 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
  3. 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
  4. 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)
  5. 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
  6. 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
    1. To move a field, click and hold the move button, then drag it to where you want the field to go
    2. 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
  7. Delete: – If you want to delete a field, just press the – sign that’s next to it
  8. 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.)

Checkbox

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.

Checkbox

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.

Drop Down

Email

This field lets your visitors enter in their email address, so you can contact them back.

Email

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.

Wrong Email

Name

This field lets your visitors give their name.

Radio

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.

Radio

Text

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.

Text

Textarea

This lets your visitors type out a longer message. Which is the perfect place to enter in the purpose for them contacting you.

Textarea

Website

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,

Set Your Email Notifications

  1. Go to “Email notifications” at the top
  2. Enter in the email address of where you want the message to go
  3. Then enter in the subject line you want these messages to have
  4. 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”.

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.)

Contact Form In My Page

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.

Me Trying Out The Contact Form

The image below shows what happened after I hit the submit button, from the above image.

Message Sent

And this is the email I received.

Message Received

And that’s it.

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,

How To Add A Contact Form To Your Sidebar Or Footer

  1. Make sure you’ve already completed step 1 and step 2 as above
  2. Go to Appearance > Widgets
  3. Then in the “Available Widgets” section, you’ll see “Visual Editor”
  4. Click and drag the “Visual Editor” into the sidebar or footer area where you want to have your contact form
  5. Click the little arrow next to your “Visual Editor”
  6. Then click the “Add Contact Form” button
  7. Then complete step 4, step 5, step 6 and step 7, as above. But that’s it.

Contact Form In Sidebar

All Done

And that’s it for this lesson.

If you’re interested in more tutorials like this, check out my individual tutorials page.