How To Create A Contact Page For Your BLog

Posted by Yusuf Sinaga.dr Labels: Blogger Hack, bLogSpot.com

Contact Me/Us is one of the important thing you should have in your blog. Because sometimes your visitor might want to send a private message to you, so you might want to create a contact me button or page as i use in this blog.

But i suggest you to create a particular contact me/us page than using a contact button, because spammer could easily collect your email address if you use the button way.

So i will show you a simple way that even a newbie like me can do it :)

First you need to create a post and put "Contact Me/Us" as the title, then publish your post. But before that, you better change your post publish date to an older date so it won't show up in your recent post/home page.

Now you need to create your own contact form HTML code...
What the...?!?you say it was easy dude...
Haha..chill out, am not lying to you, i don't understand how to encode HTML either.

Ok, to create your own contact form you just have to sign up in 123contactform.com and choose your own design and color that match your blog mostly. Don't wory it's free, eventhough there's some advanced feature that active for upgraded member only.

After finishing your contact setup, you'll get a code like this...

<div style="font-family: Georgia,"Times New Roman",serif;">

</div>
<form action="http://www.123contactform.com/contact-form-YOUR_ID.html" class="form" enctype="multipart/form-data" method="POST">
<input name="action" type="hidden" value="verify" />
<table cellpadding="2" height="508" style="width: 445px;"><tbody>
<tr><td style="text-align: left;" valign="top"><b><span style="color: black; font-family: Trebuchet; font-size: medium;">Name:</span><medium><span style="color: #e00000;" title="Required field">*</span></medium></b>
</td><td align="left">
<input gtbfieldid="12" name="control232999" size="20" type="text" value="" />
</td></tr>
<tr><td style="text-align: left;" valign="top"><b><span style="color: black; font-family: Trebuchet; font-size: medium;">Email:</span><medium><span style="color: #e00000;" title="Required field">*</span></medium></b>
</td><td align="left">
<input gtbfieldid="13" name="control233000" size="20" type="text" value="" />
</td></tr>
<tr><td style="text-align: left;" valign="top"><b><span style="color: black; font-family: Trebuchet; font-size: medium;">Website URL:</span></b>
</td><td align="left">
<input gtbfieldid="14" name="control233033" size="20" type="text" value="" />
</td></tr>
<tr><td style="text-align: left;" valign="top"><b><span style="color: black; font-family: Trebuchet; font-size: medium;">Subject:</span><small><span style="color: #e00000;" title="Required field">*</span></small></b>
</td><td align="left">
<input gtbfieldid="15" name="control233001" size="20" type="text" value="" />
</td></tr>
<tr><td style="text-align: left;" valign="top"><b><span style="color: black; font-family: Trebuchet; font-size: medium;">Message:</span><medium><span style="color: #e00000;" title="Required field">*</span></medium></b>
</td><td align="left">
<textarea cols="35" name="control233002" rows="7"></textarea>
</td></tr>
<tr><td style="text-align: left;" valign="top"><span style="color: black; font-family: Trebuchet; font-size: medium;">Verification No.:<medium><span style="color: #e00000;" title="Required field">*</span></medium></span>
</td> <td align="left" valign="top"><input gtbfieldid="16" id="txtNumber" name="txtNumber" size="10" type="text" value="" />
</td></tr>
<tr><td align="right"><a href="http://www.123contactform.com/faq.html#q1" onclick="window.open('http://www.123contactform.com/faq.html#q1','_blank','width=740, height=90, left=' + (screen.width/2-370) + ', top=250');return false;" title="You Can Change This With Your Own Words"><img alt="contact form faq" border="0" src="http://www.123contactform.com/img/help_icon.gif" /></a>
</td> <td align="left"><img src="http://www.123contactform.com/random-40544.png" target="_blank" />
</td> </tr>
<tr><td></td><td align="left"><input type="submit" value="Send email" />
</td></tr>
</tbody></table>
</form>
<div align="center">
<span style="color: black; font-family: Trebuchet; font-size: xx-small;"><a href="http://www.123contactform.com/">HTML form</a> powered by 123ContactForm</span>
</div>

</center>

Now copy your code (DO NOT copy above code, it just for an example) and paste it in your about me/us page (the one that you've created). Than all you have to do is create a Top Tabs and link it to this post, your posted link will looks like this --> http://your_blog_name.blogspot.com/2009/10/contact-me.html

Nb.
You can make some experiment with the code above in case you want to adjust it with your template.
Font size : xx-small, x-small, medium, large (choose which one you like better)
Size : length of the box.
Title : it's the one that will show up when you move your mouse over the (?) question mark near the submit button.

Then all you have to do is republish your post, and tada...your contact form will looks like this...