How to add a contact form to your blog

Letterbox

As a blogger it's gratifying if people try to make contact with you.

So why not make it easier for them by providing a contact form on your blog.

All WordPress.com blogs have this facility by default. If you've got a self-hosted WordPress.org blog or website, there are lots of plugins available that will give you all sorts of contact forms, but the JetPack plugin will give you the same kind of contact form as a WordPress.com blog.

And this contact form is very versatile and extremely easy to set up.

First decide which page you want your form to go on (it doesn't have to be the Contact Us page, you can use this form to get your readers to contact you for another purpose, such as requesting a consultation, for example).

Then go to your Dashboard. Mouse over 'My Sites' at the top left of your blog, and select 'WP Admin' from the drop down menu:

My Sites drop down menu

If you're using a self-hosted WordPress.org blog or website, mouse over your blog's name in the top left and select 'Dashboard' from the drop down menu:

Getting to the Dashboard

Create a page by going to 'Pages' > 'Add New' in the left sidebar:

Create a new page

(Or enter an existing page by selecting 'All Pages' instead and clicking on the title of your preferred page.)

Once you've created or opened the page you want your contact form on, place the cursor (or winking line) inside the text field:

Place the cursor in the text field

Then click on the 'Add Contact Form' button:

Add Contact Form button

And the 'Add Contact Form' menu will appear:

Add Contact Form menu

You have been given a default contact form consisting of areas where you write, called 'fields', for Name, Email, Website and Comment, which is where the main message will be written.

How do I change the contact form?

You can move these fields into a different position. For example, if you click on the Name field:

Click on a field to activate it

A blue dotted line will appear around it, meaning it has been activated.

If you click on the 'move' link:

Click on 'move'

A helpful instruction tag will appear:

Drag instructions appear

Telling you to drag the field to its new position:

Dragging the field

So that Name is placed underneath Email:

Name in new position

If you click on 'edit':

Click on 'edit'

Additional information will appear on the right:

Editing the Name field

Which allows you to change the label's title, or select a different field type.

The drop down menu shows a lot of different types of fields:

Different kinds of contact fields

Because each field requires a special kind of coding for its particular function.

I will go through each of these later in the post to satisfy anyone who is curious enough.

Underneath the drop down menu you can choose whether the field is 'required' or not:

Selecting a required field

Which if you tick the box means the user will have to fill in something in that field to be able to complete the form.

And when you've finished editing the field, don't forget to click the 'Save this field' button:

Save this field button

Next to each field there is a 'minus' button, which enables you to delete the field if you don't want it:

Deleting a field

And if you want to add a field, find the 'Add a new field' link at the bottom of the contact form:

Add a new field link

And a new field will appear at the bottom (remember to drag it to a new position) and its editing details will appear on the right:

Creating a new field

Allowing you to create the more appropriate fields you need for your contact form.

But how do I receive the message?

Once you've finished moving, editing, adding and deleting your fields, you will need to add your email to the form so that you can receive the visitor's message.

Click on the 'Email Notifications' tab at the top of the contact form menu:

Email notifications tab

And you will see the page where you can add in the email address you'd like the message to go to:

Where to add your email details

The helpful instructions on the right mention if you didn't fill in any information into these fields, the message would go to the email you gave to create your blog.

And the subject line details would automatically reveal the form's location.

The subject line field could contain something helpful that would alert you that a message has been sent to you via the contact form. This is what you would see in your email in-box.

When you've finished with this page, click the blue 'Save and go back to the form builder' button:

Save and go back to the form builder button

And you'll be back at the original contact form menu page.

How do I place the contact form on my blog?

When you've finished creating your contact form, click on the 'Add this form to my post' button:

Add this form to my post button

And you will go back to the page where you wanted your contact form to be.

The first thing you'll notice is a whole lot of code, rather than a recognisable contact form:

contact form code

This is completely OK, it is meant to be there.

To see what the code will look like when the page is published, search out the 'Publish' menu in the top right corner of your editing page, and click on the 'Preview' button:

Click on the preview button

And this will show your how your contact form looks in a new browser page:

My contact form preview

If you're satisfied with this, go back to the original browser page where your blog is in its editing mode, and click on the green 'Publish' button:

Publish button

If you're not happy and want to make changes before publishing your contact form, simply click on the 'Add Contact Form' button above the editing field:

Add Contact Form button

To go back to the 'Add Contact Form' menu. Now you can make your changes.

What about those extra fields in the drop down menu?

This is for curious beginner bloggers who want to find out what this contact form is capable of.

When you create a new field, you automatically get the single line of text option:

Single line of text

I've edited the label field to explain what this field is for. You can call it whatever you like, perhaps a question?

If you want to allow your visitors room to write a bit more, then choose the Textarea field:

Text area to write more

You can allow your visitors to select various options on your contact form.

First, the checkbox, which is basically a button that can be ticked or not-ticked:

Check box option for ticks

This is the same as the 'Required?' button.

Next there are the radio buttons, which allows the visitor to select options:

Radio buttons for multiple options

As you can see, there is a link that allow you to 'add another option', so you can give visitors multiple choices:

Choose one or more radio options

Visitors are able to select one or both radio buttons.

If you want to restrict visitors to choosing only one option, then the drop-down menu is the answer:

Drop down menu option

By adding other options, you can show your visitors what is available, but only allow them to select one choice:

Choosing from the drop down menu

And the last three fields are the Name, Email and Website options, which are given to you in the default comment form:

Name field

Email field

Website field

And each require their own field options because of the special code that goes on behind them.

You can have fun with this comment form, and use it to gather information rather than allow your visitors to contact you, like this:

Alternative contact form

As you can see, this comment form's facilities are fairly extensive, and really easy to use compared to the other comment form plugins I've tried.

Go on, create a comment form and see if it brings in more enquiries. Let me know if it does.

The following two tabs change content below.
Alice Elliott writes the Beginner Bloggers blog for beginner and post-beginner bloggers to “explain things really simply” about blogging and WordPress. She specialises in simple, easy to understand, highly visual courses and tutorials using ordinary, everyday words. Why not also visit her award winning Fairy Blog Mother blog to learn some more.

Latest posts by Alice Elliott (see all)

Sharing is caring

Did you enjoy reading this post?

If you would like to be the first to know about my other exciting blogging events and activities, as well as reading a cool infographic created especially for you, sign up here:

Click Here to Leave a Comment Below 0 comments
Would you like more comments on your blog posts?
x