Looking for a nice ajax popup form for your site ?
ajax popup form is a jquery based cool , professional popup window which can be used as contact , feedback … forms on your websites . It’s easy to install and customize .It use ajax to check the email , null fields and use phpmailer to send email .
Online demo
Please go to ajax popup form version 1.0.1 online demo , then click the right bottom contact us image.
Yes , that’s the ajax popup form .
Who use this?
www.caterline.co.uk
frankie.cc
www.dj-marcel-berlin.com
www.brightyoursite.com
How to install
Insert following 3 lines codes between <head> and </head>
<link href="ajaxpopform.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src='jquery-1.4.1.min.js'></script> <script type="text/javascript" src='ajaxpopform.js'></script> |
Insert following codes before </body>
<form method="post" id="ajaxpopform" class='ajaxpopform' style="display:none" action="/feedback/post/ajax/" > <div class='ajaxpopformwrapper'> <div class="ajaxpopforminner"> <h2>Contact Us</h2> <p>Professional web design & excellent programming !</p> <fieldset> <label for="help-us-email">Your email address:</label> <div class="field"><input type="text" name="email" id="help-us-email" value="" /></div> </fieldset> <fieldset> <label for="help-us-message">Messages:</label> <div class="field"><textarea id="help-us-message" name="message" cols="20" rows="5"></textarea></div> </fieldset> <div class="rating-module" id="help-us-rateit"> <fieldset> <h4>Please rate your experience for <span>(optional)</span></h4> <div class="rating-inline"> <h5>Services:</h5> <ul class="star-rating"> <li id="shopping-stars" class="current-rating" style="width:0"></li> <li><a href="javascript:;" class="star1" id="shopping-rating-1"><input type="radio" value="1" name="rating_1" id="shopping-rating-input-1"/>1</a></li><li><a href="javascript:;" class="star2" id="shopping-rating-2"><input type="radio" value="2" name="rating_1" id="shopping-rating-input-2"/>2</a></li><li><a href="javascript:;" class="star3" id="shopping-rating-3"><input type="radio" value="3" name="rating_1" id="shopping-rating-input-3"/>3</a></li><li><a href="javascript:;" class="star4" id="shopping-rating-4"><input type="radio" value="4" name="rating_1" id="shopping-rating-input-4"/>4</a></li><li><a href="javascript:;" class="star5" id="shopping-rating-5"><input type="radio" value="5" name="rating_1" id="shopping-rating-input-5"/>5</a></li> </ul> </div> <div class="rating-inline"> <h5>Tools:</h5> <ul class="star-rating"> <li id="creating-stars" class="current-rating" style="width:0"></li> <li><a href="javascript:;" class="star1" id="creating-rating-1"><input type="radio" value="1" name="rating_2" id="creating-rating-input-1"/>1</a></li><li><a href="javascript:;" class="star2" id="creating-rating-2"><input type="radio" value="2" name="rating_2" id="creating-rating-input-2"/>2</a></li><li><a href="javascript:;" class="star3" id="creating-rating-3"><input type="radio" value="3" name="rating_2" id="creating-rating-input-3"/>3</a></li><li><a href="javascript:;" class="star4" id="creating-rating-4"><input type="radio" value="4" name="rating_2" id="creating-rating-input-4"/>4</a></li><li><a href="javascript:;" class="star5" id="creating-rating-5"><input type="radio" value="5" name="rating_2" id="creating-rating-input-5"/>5</a></li> </ul> </div> <div class="rating-inline last"> <h5>Site:</h5> <ul class="star-rating"> <li id="community-stars" class="current-rating" style="width:0"></li> <li><a href="javascript:;" class="star1" id="community-rating-1"><input type="radio" value="1" name="rating_3" id="community-rating-input-1"/>1</a></li><li><a href="javascript:;" class="star2" id="community-rating-2"><input type="radio" value="2" name="rating_3" id="community-rating-input-2"/>2</a></li><li><a href="javascript:;" class="star3" id="community-rating-3"><input type="radio" value="3" name="rating_3" id="community-rating-input-3"/>3</a></li><li><a href="javascript:;" class="star4" id="community-rating-4"><input type="radio" value="4" name="rating_3" id="community-rating-input-4"/>4</a></li><li><a href="javascript:;" class="star5" id="community-rating-5"><input type="radio" value="5" name="rating_3" id="community-rating-input-5"/>5</a></li> </ul> </div> </fieldset> </div> </div> <div class="buttons"> <div class="submit-button"><a class="button form-submit-button"><span class="inner">Send</span></a></div> <a class="button cancel"><span class="inner">Cancel</span></a> </div> </div> <!-- Toggle and show this on success --> <div style="display:none" id="ajaxpopform-success"> <div class="inner"> <h2>Thank you</h2> <h4>Appreciate you taking time to contact us and will reply to your as soon as possible.</h4> </div> <div class="buttons"> <a class="button cancel"><span class="inner">Close</span></a> </div> </div> </form> <div id="ajaxformbtn"> <a class="popup-button" > <img src="images/contact.png" alt="contact us" /> </a> </div> |
Put the contact.php at the root of the your site , then open ajaxpopform.js , find those codes
url: “http://www.brightyoursite.com/contact.php”
those should change http://www.brightyoursite.com/ to your domain and point to where the contact.php located !! That’s all enjoy it!!!
Need customize it?
If you have problems with install or customize it , just contact me , i will help you for a very lower reasonable fee .
Donate
if you find it usefull for you and like it very much , please make a
to help me to improve it .
Thanks very much.