title: How to clear field after sending in an AJAX contact form?
body: <p>First, the code:</p>
  
  <p><strong>CONTACT_FORM.HTML</strong></p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;Contact Form&lt;/title&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="contact_form.css" /&gt;
    &lt;script src="contact_form.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div id="mainform"&gt;
     &lt;form id="form" name="form" action="contact_form.html"&gt;
      &lt;h3&gt;Contact Form&lt;/h3&gt;
      &lt;p id="returnmessage"&gt;&lt;/p&gt;
      &lt;label&gt;Name: &lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;input type="text" id="name" placeholder="Name"/&gt;
      &lt;label&gt;Email: &lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;input type="text" id="email" placeholder="Email"/&gt;
      &lt;label&gt;Contact No: &lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;input type="text" id="contact" placeholder="10 digit Mobile no."/&gt;
      &lt;label&gt;Message:&lt;/label&gt;
      &lt;textarea id="message" placeholder="Message......."&gt;&lt;/textarea&gt;
      &lt;input type="button" id="submit" value="Send Message"/&gt;
     &lt;/form&gt;
    &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CONTACT_FORM.PHP</strong></p>
  
  <pre><code>&lt;?php
   $name = $_POST['name1'];
   $email = $_POST['email1'];
   $message = $_POST['message1'];
   $contact = $_POST['contact1'];
   $email = filter_var($email, FILTER_SANITIZE_EMAIL);
   if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
    if (!preg_match("/^[0-9]{10}$/", $contact)) {
     echo "&lt;span&gt;* Please Fill Valid Contact No. *&lt;/span&gt;";
    } else {
     $subject = "Message from website...";
     $headers = 'MIME-Version: 1.0' . "\r\n";
     $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
     $headers .= 'From:' . $email. "\r\n";
     $headers .= 'Cc:' . $email. "\r\n";
     $template = '&lt;div style="padding:50px; color:white;"&gt;Hello ' . $name . ',&lt;br/&gt;'
     . '&lt;br/&gt;Thank you for contacting us.&lt;br/&gt;&lt;br/&gt;'
     . 'Name:  ' . $name . '&lt;br/&gt;'
     . 'Email:  ' . $email . '&lt;br/&gt;'
     . 'Contact No:  ' . $contact . '&lt;br/&gt;'
     . 'Message:  ' . $message . '&lt;br/&gt;&lt;br/&gt;'
     . 'This is a contact confirmation email.'
     . '&lt;br/&gt;'
     . 'We will keep you posted with our goings on.&lt;/div&gt;';
     $sendmessage = "&lt;div style=\"background-color:#7E7E7E; color:white;\"&gt;" . $template . "&lt;/div&gt;";
     $sendmessage = wordwrap($sendmessage, 70);
     mail("me@mydomain.com", $subject, $sendmessage, $headers);
     echo "Thank you, your query has been received.";
    }
   } else {
    echo "&lt;span&gt;* invalid email *&lt;/span&gt;";
   }
  ?&gt;
  </code></pre>
  
  <p><strong>CONTACT_FORM.JS</strong></p>
  
  <pre><code>$(document).ready(function() {
   $("#submit").click(function() {
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();
    var contact = $("#contact").val();
    $("#returnmessage").empty();
    if (name == '' || email == '' || contact == '') {
     alert("Please Fill Required Fields");
    } else {
     $.post("contact_form.php", {
      name1: name,
      email1: email,
      message1: message,
      contact1: contact
     }, function(data) {
      $("#returnmessage").append(data);
      if (data == "Your Query has been received, We will contact you soon.") {
       // $("#form")[0].reset();
       $('#form').find('form')[0].reset();
      }
     });
    }
   });
  });
  </code></pre>
  
  <p>My questions are these...</p>
  
  <ol>
  <li>How can I clear the form following submission?</li>
  <li>Why is the CC back to the sender not functioning?</li>
  </ol>
  
  <p>Thanks in advance.</p>