Back to Home: PHP FormMail Generator I Need Help : Ask Question Without Registration

How to make a popup form using jQuery and ColorBox plugin?
  • admin February 2012

    New Form Tool: Try new jQuery Bootstrap Form Builder to create beautiful web forms!


    It's easy to make a popup contact form looks like this :

    image

    Try Demo :
    Popup Form Demo Link



    Here is the source code. All the important parts are highlighted.

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset='utf-8'/>
            <title>Example : a popup contact form using jQuery and ColorBox plugin </title>

            <link rel="stylesheet" href="http://www.formmail-maker.com/var/demo/jquery-popup-form/colorbox.css" />
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script src="http://www.formmail-maker.com/var/demo/jquery-popup-form/jquery.colorbox-min.js"></script>

            <script>
                $(document).ready(function(){
                    $(".iframe").colorbox({iframe:true, fastIframe:false, width:"450px", height:"480px", transition:"fade", scrolling   : false});
                });
            </script>
           
           
            <style>
                #cboxOverlay{ background:#666666; }
            </style>
                   
        </head>
       
        <body>
       
            <h4>A Popup Email Form Demonstration</h4>
            To make a popup form is easy. All you need is to make a form at <a href="http://www.formmail-maker.com">formmail-maker.com</a>, then use jQuery and ColorBox plugin to make it pop.
            <p /><p />
            <p><h3>Click here for the popup form demo : <a class='iframe' href="http://www.formmail-maker.com/var/demo/jquery-popup-form/form.php">Contact Us</a></h3></p>



        </body>
    </html>