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

clipboard

• 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
</div>

• 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’ />
<![endif]–>

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

navigation bar

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

US</a></div>

• 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



Comments (2)

  1. Mahesh March 10, 2011
  2. Ravi April 25, 2011

Leave a Reply