birghtyoursite » pop window http://www.brightyoursite.com/blog Bright your site Mon, 19 Dec 2011 09:39:57 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Professional ajax popup form http://www.brightyoursite.com/blog/2010/01/31/professional-ajaxpopform/ http://www.brightyoursite.com/blog/2010/01/31/professional-ajaxpopform/#comments Sun, 31 Jan 2010 12:56:46 +0000 admin http://www.brightyoursite.com/blog/?p=166 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 &amp; 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.

Download

ajaxpopform-1.0.1.zip

]]> http://www.brightyoursite.com/blog/2010/01/31/professional-ajaxpopform/feed/ 58