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/

This works fine with one pop up 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...

2. <div id="wrapper"> <p>Send us feedback from the modal window.</p>
3. 
   
4. 
   
5. <p><a class="modalbox" href="#inline">click to open</a></p>
6. </div>
7. 
   
8. 
   
9. <!-- hidden inline form -->
10. <div id="inline">
11. <h2>Send us a Message</h2>
12. 
    
13. 
    
14. <form id="contact" name="contact" action="#" method="post">
15. <label for="email">Your E-mail</label>
16. <input type="email" id="email" name="email" class="txt">
17. <br>
18. <label for="msg">Enter a Message</label>
19. <textarea id="msg" name="msg" class="txtarea"></textarea>
21. <button id="send">Send E-mail</button>
22. </form>
23. </div>
24. 
    
25. 
    
26. <!-- basic fancybox setup -->
27. <script type="text/javascript">
28. function validateEmail(email) { 
29. 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,}))$/;
30. return reg.test(email);
31. }
32. 
    
33. 
    
34. $(document).ready(function() {
35. $(".modalbox").fancybox();
36. $("#contact").submit(function() { return false; });
37. 
    
38. 
    
40. $("#send").on("click", function(){
41. var emailval  = $("#email").val();
42. var msgval    = $("#msg").val();
43. var msglen    = msgval.length;
44. var mailvalid = validateEmail(emailval);
46. if(mailvalid == false) {
47. $("#email").addClass("error");
48. }
49. else if(mailvalid == true){
50. $("#email").removeClass("error");
51. }
53. if(msglen < 4) {
54. $("#msg").addClass("error");
55. }
56. else if(msglen >= 4){
57. $("#msg").removeClass("error");
58. }
60. if(mailvalid == true && msglen >= 4) {
61. // if both validate we attempt to send the e-mail
62. // first we hide the submit btn so the user doesnt click twice
63. $("#send").replaceWith("<em>sending...</em>");
65. $.ajax({
66. type: 'POST',
67. url: 'sendmessage.php',
68. data: $("#contact").serialize(),
69. success: function(data) {
70. if(data == "true") {
71. $("#contact").fadeOut("fast", function(){
72. $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
73. setTimeout("$.fancybox.close()", 1000);
74. });
75. }
76. }
77. });
78. }
79. });
80. });
81. </script>

Above solution uses Fancybox. 

Any help or advice would be hugely appreciated

Adam