How to add a contact form to your blog
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:
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:
Create a page by going to 'Pages' > 'Add New' in the left sidebar:
(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:
Then click on the 'Add Contact Form' button:
And the 'Add Contact Form' menu will appear:
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:
A blue dotted line will appear around it, meaning it has been activated.
If you click on the 'move' link:
A helpful instruction tag will appear:
Telling you to drag the field to its new position:
So that Name is placed underneath Email:
If you click on 'edit':
Additional information will appear on the right:
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:
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:
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:
Next to each field there is a 'minus' button, which enables you to delete the field if you don't want it:
And if you want to add a field, find the 'Add a new field' link at the bottom of the contact form:
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:
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:
And you will see the page where you can add in the email address you'd like the message to go to:
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:
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:
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:
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:
And this will show your how your contact form looks in a new browser page:
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:
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:
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:
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:
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:
This is the same as the 'Required?' button.
Next there are the radio buttons, which allows the visitor to select options:
As you can see, there is a link that allow you to 'add another option', so you can give visitors multiple choices:
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:
By adding other options, you can show your visitors what is available, but only allow them to select one choice:
And the last three fields are the Name, Email and Website options, which are given to you in the default comment form:
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:
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.