Hi all I want to have two popup forms on my site, and so far I have used this example: http://designwoop.com/2012/07/tutorial-coding-a-jquery-popup-modal-contact-form/ Can anyone advise how I can adapt this code, so I can have two different popup forms that both work?! Here's the code... <div id="wrapper"> <p>Send us feedback from the modal window.</p> <p><a class="modalbox" href="#inline">click to open</a></p> </div> <!-- hidden inline form --> <div id="inline"> <h2>Send us a Message</h2> <form id="contact" name="contact" action="#" method="post"> <label for="email">Your E-mail</label> <input type="email" id="email" name="email" class="txt"> <br> <label for="msg">Enter a Message</label> <textarea id="msg" name="msg" class="txtarea"></textarea> <button id="send">Send E-mail</button> </form> </div> <!-- basic fancybox setup --> <script type="text/javascript"> function validateEmail(email) { var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return reg.test(email); } $(document).ready(function() { $(".modalbox").fancybox(); $("#contact").submit(function() { return false; }); $("#send").on("click", function(){ var emailval = $("#email").val(); var msgval = $("#msg").val(); var msglen = msgval.length; var mailvalid = validateEmail(emailval); if(mailvalid == false) { $("#email").addClass("error"); } else if(mailvalid == true){ $("#email").removeClass("error"); } if(msglen < 4) { $("#msg").addClass("error"); } else if(msglen >= 4){ $("#msg").removeClass("error"); } if(mailvalid == true && msglen >= 4) { // if both validate we attempt to send the e-mail // first we hide the submit btn so the user doesnt click twice $("#send").replaceWith("<em>sending...</em>"); $.ajax({ type: 'POST', url: 'sendmessage.php', data: $("#contact").serialize(), success: function(data) { if(data == "true") { $("#contact").fadeOut("fast", function(){ $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>"); setTimeout("$.fancybox.close()", 1000); }); } } }); } }); }); </script> Code (markup): Many thanks for any help or advice... Adam
Hi Harshalone Thanks for your advice. I've tried above but still no joy... Any other recommendations? Here's my updated code with two popups... <!doctype html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery Modal Contact Demo</title> <meta name="author" content="Jake Rocheleau"> <link rel="stylesheet" type="text/css" media="all" href="style.css"> <link rel="stylesheet" type="text/css" media="all" href="fancybox/jquery.fancybox.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.0.6"></script></head> <body> <div id="wrapper"> <p>Send us feedback from the modal window.</p> <p><a class="modalbox" href="#inline">click to open</a></p></div> <!-- hidden inline form --><div id="inline"> <h2>Send us a Message</h2> <form id="contact" name="contact" action="#" method="post"> <label for="email">Your E-mail</label> <input type="email" id="email" name="email" class="txt"> <br> <label for="msg">Enter a Message</label> <textarea id="msg" name="msg" class="txtarea"></textarea> <button class="send">Send E-mail</button> </form></div> <!-- basic fancybox setup --><script type="text/javascript"> function validateEmail(email) { var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return reg.test(email); } $(document).ready(function() { $(".modalbox").fancybox(); $("#contact").submit(function() { return false; }); $(".send").on("click", function(){ var emailval = $("#email").val(); var msgval = $("#msg").val(); var msglen = msgval.length; var mailvalid = validateEmail(emailval); if(mailvalid == false) { $("#email").addClass("error"); } else if(mailvalid == true){ $("#email").removeClass("error"); } if(msglen < 4) { $("#msg").addClass("error"); } else if(msglen >= 4){ $("#msg").removeClass("error"); } if(mailvalid == true && msglen >= 4) { // if both validate we attempt to send the e-mail // first we hide the submit btn so the user doesnt click twice $(".send").replaceWith("<em>sending...</em>"); $.ajax({ type: 'POST', url: 'sendmessage.php', data: $("#contact").serialize(), success: function(data) { if(data == "true") { $("#contact").fadeOut("fast", function(){ $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>"); setTimeout("$.fancybox.close()", 1000); }); } } }); } }); });</script> <!-- START SECOND FORM --> <p>Send us feedback from the modal second modal window.</p> <p><a class="modalbox" href="#inline2">click to open</a></p></div> <!-- hidden inline form --><div id="inline2"> <h2>Send us a Message 2</h2> <form id="contact" name="contact" action="#" method="post"> <label for="email2">Your E-mail</label> <input type="email" id="email2" name="email2" class="txt"> <br> <label for="msg2">Enter a Message</label> <textarea id="msg2" name="msg2" class="txtarea"></textarea> <button class="send">Send E-mail</button> </form></div> <!-- basic fancybox setup --><script type="text/javascript"> function validateEmail2(email2) { var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return reg.test(email2); } $(document).ready(function() { $(".modalbox").fancybox(); $("#contact").submit(function() { return false; }); $(".send").on("click", function(){ var emailval2 = $("#email2").val(); var msgval2 = $("#msg2").val(); var msglen2 = msgval.length; var mailvalid2 = validateEmail(emailval); if(mailvalid2 == false) { $("#email2").addClass("error"); } else if(mailvalid2 == true){ $("#email2").removeClass("error"); } if(msglen2 < 4) { $("#msg2").addClass("error"); } else if(msglen2 >= 4){ $("#msg2").removeClass("error"); } if(mailvalid2 == true && msglen2 >= 4) { // if both validate we attempt to send the e-mail // first we hide the submit btn so the user doesnt click twice $(".send").replaceWith("<em>sending...</em>"); $.ajax({ type: 'POST', url: 'sendmessage.php', data: $("#contact").serialize(), success: function(data) { if(data == "true") { $("#contact").fadeOut("fast", function(){ $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>"); setTimeout("$.fancybox.close()", 1000); }); } } }); } }); });</script> </body></html> HTML: and here's css... * { margin: 0; padding: 0; outline: none; }html { font-size: 62.5%; height: 101%; } body { background: #fff; font-family: "Calibri", Arial, sans-serif; }img { border: 0; } a { color: #3a51b2; text-decoration: none; }a:hover { text-decoration: underline; } h2 { font-size: 1.8em; line-height: 1.9em; margin-bottom: 15px; } p { color: #656565; font-size: 1.2em; margin-bottom: 10px; } #wrapper { width: 640px; margin: 0 auto; padding: 30px 45px; } #inline { display: none; width: 600px; }#inline2 { display: none; width: 600px; } #callback { display: none; width: 600px; } label { margin-right: 12px; margin-bottom: 9px; font-family: Georgia, serif; color: #646464; font-size: 1.2em; } .txt { display: inline-block; color: #676767;width: 420px; font-family: Arial, Tahoma, sans-serif; margin-bottom: 10px; border: 1px dotted #ccc; padding: 5px 9px;font-size: 1.2em;line-height: 1.4em;} .txtarea { display: block; resize: none;color: #676767;font-family: Arial, Tahoma, sans-serif; margin-bottom: 10px; width: 500px; height: 150px;border: 1px dotted #ccc;padding: 5px 9px; font-size: 1.2em;line-height: 1.4em;} .txt:focus, .txtarea:focus { border-style: solid; border-color: #bababa; color: #444; } input.error, textarea.error { border-color: #973d3d; border-style: solid; background: #f0bebe; color: #a35959; }input.error:focus, textarea.error:focus { border-color: #973d3d; color: #a35959; } .send { color: #dee5f0;display: block;cursor: pointer;padding: 5px 11px;font-size: 1.2em;border: solid 1px #224983;border-radius: 5px;background: #1e4c99; background: -webkit-gradient(linear, left top, left bottom, from(#2f52b7), to(#0e3a7d)); background: -moz-linear-gradient(top, #2f52b7, #0e3a7d); background: -webkit-linear-gradient(top, #2f52b7, #0e3a7d);background: -o-linear-gradient(top, #2f52b7, #0e3a7d);background: -ms-linear-gradient(top, #2f52b7, #0e3a7d);background: linear-gradient(top, #2f52b7, #0e3a7d);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f52b7', endColorstr='#0e3a7d'); }.send:hover {background: #183d80; background: -webkit-gradient(linear, left top, left bottom, from(#284f9d), to(#0c2b6b)); background: -moz-linear-gradient(top, #284f9d, #0c2b6b); background: -webkit-linear-gradient(top, #284f9d, #0c2b6b);background: -o-linear-gradient(top, #284f9d, #0c2b6b);background: -ms-linear-gradient(top, #284f9d, #0c2b6b);background: linear-gradient(top, #284f9d, #0c2b6b);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#284f9d', endColorstr='#0c2b6b');}.send:active {color: #8c9dc0; background: -webkit-gradient(linear, left top, left bottom, from(#0e387d), to(#2f55b7)); background: -moz-linear-gradient(top, #0e387d, #2f55b7);background: -webkit-linear-gradient(top, #0e387d, #2f55b7);background: -o-linear-gradient(top, #0e387d, #2f55b7);background: -ms-linear-gradient(top, #0e387d, #2f55b7);background: linear-gradient(top, #0e387d, #2f55b7);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0e387d', endColorstr='#2f55b7');} HTML: Many thanks for any help and advice