Jquery Contact Us Page For Blogger

First of all thanks to Eric Martin for writing such a nice jquery script. Today i was looking at some jquery examples and suddenly came across this script and thought it will add some spice for a contact us page

Lets see on how to create a jquery contact us page for blogger
• Sign up @ http://www.emailmeform.com

• Click on create new form

• Fill in the details using webform creation wizard

• After creating click on GET THE HTML CODE,Copy the code to


• Now you need to convert HTML code to XHTML code using this site

• Insert the XHTML code inside basicModalContent DIV ,Copy n paste this DIV anywhere in the body of template

<div id=”basicModalContent” style=’display:none’>
XHTML Form Code Goes Here

• Now Copy the below code and paste it before </head>

<!– 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’ />

• Finally you need to insert a anchor tag for contact us in the

navigation bar

<div id=’basicModal’><a href=’#’ class=’basic’>Contact


• Save the template and view your blog

Demo :

Trouble in installing the script then feel free to drop in your queries @ comments

Share on Facebook


  1. Good Tutorial !

  2. Nice tutorials!! 🙂

    Please tell me how i use blogger to work offline for making themes and stuff like we work on wordpress themes.

    Thanks in advance.

Speak Your Mind