How To Add "Contact Me" Page | Blogger JQuery Tips

This post describes how to create a contact me page for Blogger/BlogSpot. Blogger.com does not give any built-in option(gadget)which supports form submission. So you should borrow code from third party sites. One question arises why should one use a contact page for blog or site? There are some logics behind this. You may look contact me or contact us page at each renowned sites or blogs. Contact Page is used to for interaction between authors/owners and readers. One reader may want to share something with author about the post or he may suggest new idea for site's owners on improvement the site or blog.
I am not good at English, I have tried to bring out the philosophy. I hopy you got it. You may look my Contact Page for this blog.
1.Sign up in http://www.emailmeform.com
2.Click on Create New Form
3.Create your contact us form using web form creation wizard
4.After creating your form, copy HTML CODE for your form.
5.Now Convert your HTML code to XHTML code using XHTML code Converter.
6.Login to your blogger dashboard--> layout- -> Edit HTML
7.Scroll down to where you see </head> tag .
8.Copy below code and paste it just before the </head> tag.

<!-- Import jQuery and SimpleModal source files -->
<script src='http://h1.ripway.com/bns/lightbox-comment/jquery.js' type='text/javascript'></script>
<script src='http://h1.ripway.com/bns/lightbox-comment/jquery.simplemodal.js' type='text/javascript'></script>

<!-- Contact Form JS and CSS files -->
<script src='http://h1.ripway.com/bns/lightbox-comment/basic.js' type='text/javascript'></script>
<link type='text/css' href='http://h1.ripway.com/bns/lightbox-comment/basic.css' rel='stylesheet' media='screen' />

<!-- IE 6 hacks -->
<!--[if lt IE 7]>
<link type='text/css' href='http://h1.ripway.com/bns/lightbox-comment/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->



9.Now again scroll down to where you see </body> tag .


10.Copy below code and paste it just before the </body> tag and save your template.

<div id="basicModalContent" style='display:none'>

ENTER XHTML FORM CODE HERE(in step 5)

</div>



Now replace "ENTER XHTML FORM CODE HERE" with your XHTML Code.


11.Now Add below code Anywhere in your blog to bring contact us form.

<div id='basicModal'><a href='#' class='basic'>Contact US</a></div>



Now you are done. I hope you are enjoying it now. Let me know about your experience. Happy blogging..

Comments Post a Comment

Masanja - April 06, 2010

Nice article. It's really to make e-mail form with help of php form.

Leave a Comment