How To Add jQuery Contact us Page to Blogger

Posted by Lasantha Bandara on October 20th, 2009 File Under : jquery3 Comments

1.Sign up in http://www.emailmeform.com

2.Click on Create New Form

3.Create your contact us form using webform creation wizard

4.After creating your form, copy HTML CODE for your form.

5.Now Convert your HTML code to XHTML code using this site.

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>

Note : Replace "ENTER XHTML FORM CODE HERE(in step 5)" with your XHTML Code in step 5.

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>

12.Now you are done.

File Under : jquery

3 Responses to “How To Add jQuery Contact us Page to Blogger”

  1. Cookie Monster says:

    It doesn't seem to be working on my blog... Do I have to add something else first?

  2. The Genuine Islam says:

    @Cookie Monster
    Try This : foxyform.com , it's easier and much more better than this one

  3. female sketches says:

    seems to be working

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.