home > blogs > wordpress

Enhance Your WordPress Blog with an Email Form

You can add an email form to your Wordpress blog as an easy way for your readers to contact you. Unfortunately, I have not found a way to place email forms within your blog if you are using the hosted version of WordPress. This is due to the fact that the online version of WordPress strips form related HTML tags from your posts.

Fortunately, WordPress is easily self-hosted and with the benefit of a plugin called Raw HTML, it is pretty easy to place forms within your blog. You can choose to either add your form to an individual blog post or a static page linked from every page of your blog. These two options are outlined below.

Please view our demonstation WordPress blog here.

Add an Email Form to a WordPress Blog Post

Before you go through this tutorial you must have a copy of WordPress downloaded and installed on your own web server. This tutorial does not work if you are using a version of the blog hosted by WordPress. You may download your copy of WordPress here. Instructions for installing WordPress can be found at WordPress.org.

1. Prepare Your Contact Form HTML

myContactForm.com is a quick, easy, and free way to generate the HTML form code that you will be embedding into your blog. You can read our full write-up for using myContactForm.com tutorial here.

2. Download and Install the Raw HTML Plugin

The Raw HTML plugin is needed because WordPress automatically strips the HTML from your blog posts. By installing the Raw HTML plugin, you are able to insert HTML straight into your posts without having the HTML changed by WordPress.

To install Raw HTML:

a. Download the Plugin Here.

b. Follow the installation instructions found within the plugin readme file.

3. Login to Your WordPress Account

a. Go to the login page for your self-hosted WordPress blog.

WordPress Login

 

4. Create a New Post

a. Under Posts select Add New

Dashboard

 

5. Write the New Post

a. Write your new post as you would normally do in WordPress.

Write a New Post

b. Once you get to the point in your post where you would like your email form, click the HTML tab.

HTML Editor

c. At the point in the post where you would like the form, type in the following code:

<!--start_raw-->

d. Directly after the above code, paste the form HTML code (Edit > Paste, or CTRL+V, or Right Click and Select Paste). If you do not have your form code created and copied, please read this tutorial to learn how to do so.

Add New Post Screen

e. Once you have pasted the form HTML code, type in the following line of code directly after the form HTML.

<!--end_raw-->

f. Once you have pasted your code, you will need to make a few changes manually in order to ensure that WordPress formats it correctly.

1. Get rid of any new lines (hard returns) that are within the HTML code. When WordPress goes to publish the post, it will interpret these as new lines and replace them with line breaks <br>, adding excessive white space to your form.

2. Make sure the elements of your form work with the template layout for your blog. I've found that making the form too wide or individual question fields too wide will ofter break the form. You may need to experiment with your form in order to ensure it works with the layout.

5. Publish the Blog Post

Once your form code has been pasted into your post, Click Publish.

A fully functioning demonstration form hosted on WordPress can be seen here.

 

Adding an Email Form as a Page Within WordPress

Before you go through this tutorial you must have a copy of WordPress downloaded and installed on your own web server. This tutorial does not work if you are using a version of the blog hosted by WordPress. You may download your copy of WordPress here. Instructions for installing WordPress can be found at WordPress.org.

1. Design the Email Form

myContactForm.com a piece of free email form software that allows you to easily build a form for your Wordpress Site. Our myContactForm.com tutorial can be read, here.

2. Download and Install the Raw HTML Plugin

The Raw HTML plugin is needed because WordPress automatically strips the HTML from your blog posts. By installing the Raw HTML plugin, you are able to insert HTML straight into your posts without having the HTML changed by WordPress.

To install Raw HTML:

a. Download the Plugin Here.

b. Follow the installation instructions found within the plugin readme file.

3. Login to your WordPress Account

a. Go to the login page for your self-hosted WordPress blog.

Wordpress Login

 

4. Create a New Page

a. Under Pages select Add New

Add New Page

 

5. Write the New Page

a. Write your new page as you would normally do in WordPress.

Write the New Page

b. Once you get to the point in your page where you would like your email form, click the HTML tab.

HTML Editor

c. At the point in the page where you would like the form, type in the following code:

<!--start_raw-->

d. Directly after the above code, paste the form HTML code (Edit > Paste, or CTRL+V, or Right Click and Select Paste). If you do not have your form code created and copied, please read this tutorial to learn how to do so.

Paste HTML Code

e. Once you have pasted the form HTML code type in the following line of code directly after the form HTML.

<!--end_raw-->

f. Once you have pasted your code, you will need to make a few changes manually in order to ensure that WordPress formats it correctly.

1. Get rid of any new lines (hard returns) that are within the HTML code. When WordPress goes to publish the post, it will interpret these as new lines and replace them with line breaks <br>, adding excessive white space to your form.

2. Make sure the elements of your form work with the template layout for your blog. I've found that making the form too wide or individual question fields too wide will ofter break the form. You may need to experiment with your form in order to ensure it works with the layout.

5. Publish the Blog Page

Once your form code has been pasted into your page, Click Publish.

A fully functioning form hosted on WordPress can be seen here.