title: Multiple contact forms on one page
body: <p>I'm currently creating a dummy site and want to create multiple forms on one page.</p>
  
  <p>So when you click each service you can send a form to request a quote. I got the first form working fine, however, when I send the second form it just sends the data from the first?</p>
  
  <p>For the second form, I just replaced the ID to contactform2 instead of contactform as shown below.</p>
  
  <pre class="lang-html prettyprint-override"><code>
    &lt;div id="registerpremium" class="modal fade"&gt;
      &lt;div class="modal-dialog modal-lg" role="document"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header col-md-12"&gt;
            &lt;img class=" logo_h modallogo" src="img/logo.svg"&gt;
            &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
    &lt;div class="modal-body signupmessage"&gt;
          &lt;img src="img/marketing.svg" alt="" class="img-fluid modalicon"&gt;
          &lt;h3 class="col-md-12  formtext py-4"&gt;eCommerce Premium&lt;/h3&gt;
          &lt;p class="text-center"&gt;Please fill in the form below, we will then send you an email to confirm where to send your products.&lt;/p&gt;
            &lt;form id="contactform" method="post" name="contactform"  onsubmit="return false;"&gt;
              &lt;div class="form-group pt-3"&gt;
                &lt;label class="sr-only pt-5" for="name"&gt;Name&lt;/label&gt;
                &lt;input type="text" class="form-control form-control-danger form-control-lg" name="name" id="Name" placeholder="Name*"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label class="sr-only" for="mail"&gt;Email&lt;/label&gt;
                &lt;input type="email" class="form-control form-control form-control-lg" name="email" id="mail" placeholder="Email*"&gt;
              &lt;/div&gt;
               &lt;div class="form-group"&gt;
                &lt;label class="sr-only" for="mail"&gt;Phone Number&lt;/label&gt;
                &lt;input type="phone" class="form-control form-control form-control-lg" name="phone" id="phone" placeholder="Phone Number"&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
              &lt;div class="form-group"&gt;
                  &lt;input type="checkbox" id="gdpr" name="gdpr" class="form-control md-textarea"&gt;&lt;/textarea&gt;
                  &lt;label for="gdpr" name="gdprlabel"&gt;I have read and consent to my data being collected as outlined in the &lt;a href="test" target="_blank" class="disclaimerLink"&gt;Disclaimer&lt;/a&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
              &lt;div class="modal-footer py-4"&gt;
                &lt;button type="submit" class="button button-header bg"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
            &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
  </code></pre>
  
  <p>For the second form, I just replaced the ID to contactform2</p>
  
  <pre class="lang-js prettyprint-override"><code>      $('#contactform2').validate({
          rules: {
            name: {
              required: true
            },
              email: {
                  required: true,
                  email: true
              },
              gdpr: {
              required: true
            }
  
          },
          errorPlacement: function(){
                return false;
            },
          submitHandler: function(){
            var contactform = $('#contactform2').serialize();
                $.ajax({
                  type: "POST",
                  url: 'ajax.php',
                  data: { 
                      contactform: contactform
                  },
                  success: function(data){
                    $('#contactform2').hide();
                    $('.signupmessage').html('&lt;p id="successmessage"&gt;' + data + '&lt;/p&gt;');
                  },
                  error: function(xhr,textStatus,err){
                    console.log("readyState: " + xhr.readyState);
                    console.log("responseText: "+ xhr.responseText);
                    console.log("status: " + xhr.status);
                    console.log("text status: " + textStatus);
                    console.log("error: " + err);
                  }
                });
          }
        });
  
  </code></pre>
  
  <p>PHP for the second form if you remove the 2 after contact form that is what I am using for the first form. The reason I know the first form sends is because I have test instead of test2 in the subject, title etc.</p>
  
  <pre class="lang-php prettyprint-override"><code>
  &lt;?php 
  
          if (isset($_POST['contactform2'])) {
              parse_str($_POST['contactform2'], $contactformData);
  
              $name = $contactform2Data['name'];
              $email = $contactform2Data['email'];
              $phone = $contactform2Data['phone'];
              $to  = 'hello@samuelrhys.com'; //change to desired recepient 
              $subject = "test2";
              $message = "test2". "\n" .$name. "\n" .$email. "\n" .$phone. "\n" .$message;
              $headers = "test2" . "\r\n"; //change domain to that of Poppyfields
              $result = mail($to, $subject, $message, $headers);
              if ($result) {
                  echo "Thanks for contacting us, we'll be in touch soon!";
              } else {
                  echo "Uh oh. We couldn't deliver your request at this time.";
              }
  
          }
  
  ?&gt;
  
  </code></pre>
  
  <p>My Second form html</p>
  
  <pre class="lang-html prettyprint-override"><code>
    &lt;div id="registerstandard" class="modal fade"&gt;
      &lt;div class="modal-dialog modal-lg" role="document"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header col-md-12"&gt;
            &lt;img class=" logo_h modallogo" src="img/logo.svg"&gt;
            &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
    &lt;div class="modal-body signupmessage"&gt;
          &lt;img src="img/marketing.svg" alt="" class="img-fluid modalicon"&gt;
          &lt;h3 class="col-md-12  formtext py-4"&gt;eCommerce Standard&lt;/h3&gt;
          &lt;p class="text-center"&gt;Please fill in the form below, we will then send you an email to confirm where to send your products.&lt;/p&gt;
            &lt;form id="contactform2" method="post" name="contactform2"  onsubmit="return false;"&gt;
              &lt;div class="form-group pt-3"&gt;
                &lt;label class="sr-only pt-5" for="name"&gt;Name&lt;/label&gt;
                &lt;input type="text" class="form-control form-control-danger form-control-lg" name="name" id="Name" placeholder="Name*"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label class="sr-only" for="mail"&gt;Email&lt;/label&gt;
                &lt;input type="email" class="form-control form-control form-control-lg" name="email" id="mail" placeholder="Email*"&gt;
              &lt;/div&gt;
               &lt;div class="form-group"&gt;
                &lt;label class="sr-only" for="mail"&gt;Phone Number&lt;/label&gt;
                &lt;input type="phone" class="form-control form-control form-control-lg" name="phone" id="phone" placeholder="Phone Number"&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
              &lt;div class="form-group"&gt;
                  &lt;input type="checkbox" id="gdpr" name="gdpr" class="form-control md-textarea"&gt;&lt;/textarea&gt;
                  &lt;label for="gdpr" name="gdprlabel"&gt;I have read and consent to my data being collected as outlined in the &lt;a href="http://www.hopkinsons.net/privacy-policy" target="_blank" class="disclaimerLink"&gt;Disclaimer&lt;/a&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
              &lt;div class="modal-footer py-4"&gt;
                &lt;button type="submit" class="button button-header bg"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
            &lt;/form&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
  </code></pre>