How to Make a Blogger Contact Page

On Blogger (blogspot.com), you can only make a Contact page by publishing a new post. But to make it really look like a contact page, we need to remove any "under the post" customization (such as: tags, author, comment count link and so on), the comment form and also add a custom contact form. Here is how to do all that.

1. The first thing you need is the contact form. You can get one for free from Kontactr (see it in action). After registering, you will be able to get the contact form code which looks like this (but is customized for you so you will receive messages to your email address):

<script type="text/javascript"> id = XXXXXX; </script>
<script type="text/javascript" src="http://kontactr.com/wp.js"></script>

Update: I find Zoho Creator a much better way to implement the contact form than Kontactr so you may want to use that instead of Kontactr.

2. You need to write a new post using draft.blogger.com on your blogspot.com blog and insert the code you got from Kontactr into it.

Set the post date to some way back date so that the new post will not show up on the main page of the blog (when writing a new post, click on Post Options and enter the date under "Post date and time":

and publish your post. If the contact form does not show up when posting from normal Blogger, try posting from draft.blogger.com.

3. Now we need to remove the comment form and other elements we may have at the bottom of the post (I for instance have some RSS message, related posts, bookmarking options and so on). Unfortunately, I cannot tell you exactly what to remove because the div classes and ids are different from one blog to another, especially if they are customized, but I will tell you approximately how. Using Blogger in Draft, edit the post using the Kontactr contact form and at the beginning of the post add the elements you want to hide between <style> tags. For instance, to hide the Disqus comment box and comment count link, you would need to add:

<style>
#disqus_thread {display: none!important;visibility: hidden!important;}
#koment {display: none!important;visibility: hidden!important;}
.meta {display: none!important;visibility: hidden!important;}
</style>

Also, usually the tags, author and published date are into a div with the "meta" class so you can try hiding that (like in the code above).

Unfortunately if you have other customizations to the post, I cannot tell you exactly how to hide it, but look into your blog's source code and find out their ids or classes and for ids use a "#" in front (like above) and for classes, use a dot: "." in front. That's it.

Now you can link to your contact page from somewhere in your Blogger menu. Also, I must remind you that you can see the contact form here.

For more Blogger gadgets and howto's, visit our huge list of Blogger (blogspot.com) Gadget List (How to's)