How to add a "Contact Page" on your Blog(ger)

Do you own a blogger account and would like to have a dedicated Contact Page on your blog just like those using Wordpress? Read this article and find out how.

One thing I like with wordpress is that they have those "pages" feature. This feature enables you to create dedicated pages were you can place customized content on your site. One use for these pages is the creation of a contact page. Such is not the case with Blogger. However, there is still a way for blogger account owners to have a contact page in their blog (See My Contact Page for example).

Follow the simple tutorial below to install your own that Contact Page for Blogger.

1. Log in to you blogger account and create a new post. On the edit window, click the Post Options in the lower left corner. On the "Reader Comments Menu", select the "Don't allow" radio button. We need to configure your post this way so that the comments option will not show in your contact page. If you notice, we will create the your contact page as a individual post in your blog. This is a work around since Blogger do not have the "Pages" feature of Wordpress


2. The next step is to create the form itself. This may take some HTML knowledge so I am providing you the code below. Make sure to type this code in your post window in "Edit HTML" mode.

<form>
Enter your full name:
<input name="visitor_name" type="text" size="40" />
Enter your email address:
<input name="visitor_address" type="text" size="40" />
Enter your web address:
<input name="visitor_web" type="text" size="40" />
Enter subject for message:
<input name="subject" type="text" size="40" />
Enter your message:
<textarea name="comments" rows="7" cols="50"></textarea>
<input name="submitBtn" value="submit" type="submit"/>
<input  name="resetBtn" value="reset" />
</form>

This code will place the basic form in your post. The form ask and contain the following information:

• Name of Sender
• Sender's Email Address
• Web Site Address of Sender
• Message Subject
• Message itself
Now that you have the basic structure of your contact form, it's now time to put the code to process your form.


3. To have this form actually send you an email, we need to create some "form to email" processing script. On a normal website, we can either create a CGI or PHP script and store it somewhere in your web server directory. However since we cannot access such directory in your blogger account, we will need to have a script that we can access somewhere in the web. We can find such service in Web Form Designer. This site can actually process our forms for free. If you are not comfortable with HTML, they have a small software that you can download fro free to design your forms in WYSIWYG (what you see is what you get) environment. You can download the software here. What ever you may prefer, you need to go over the site and sign up for an account.


4. Registration for an account is straight forward. Just fill up the requested information in the appropriate fields. The autoresponders email address field is where you specify the actual email address where you want the contents of the forms to be sent when processed.
   
   
   Do not forget to place something in the URL of the redirect field. The URL that you place here is the web page loaded once the form has been process. You don't want your visitors staring at a blank page after sending you a message, don't' you? After checking all the accuracy all the information, click the submit button.


5. Before you can use the account, you need to activate it. Activation instructions will be emailed to you together with your confirmation email. This email will also contain your Password and Form ID. Do not lose this email. Archive or print and keep a hardcopy.


6. Now we need to do some minor revisions on your Contact Form. Locate the <form> tag. Insert the following text
   
name="Your_Blog_Name_Contact_Form" action="http://www.webformdesigner.net/wfd_f2.php?id=XXXXXXXXXX" method="post" enctype="application/x-www-form-urlencoded"

   in between the "<form" and the closing ">".
   
   IMPORTANT NOTE: you need to replace the "XXXXXXXXXX" text with your FormID.
   



7. Next, locate the "<input name="submitBtn" value="submit" type="submit"/>" line of code. In between "input" and "name", insert the following code:
   
onclick="return confirm('Please make sure all fields are correctly filled up, otherwise I may not be able to answer your mail. Are you sure you want to submit this form?');"




8. Thats it! You can save or publish this post and you now have a contact form for your blogspot blog!

Note:

Although, this can work as a Contact Page for you..it is by no means comparable to the plugins available for Wordpress. If you notice, the contact form was created using the basic HTML codes, no javascript or PHP. Thus, some limitations are:

• No script to validate the contents of the form before processing;
• and there is no tool to moderate or filter spam comments.