title: How to show a contact form on popup in html
body: <p>I need to show a popup when a button is clicked. In that popup I have to show a form which contain some fields like name, location, date and phone number. After entering all the fields, I need to post this data in another page, for this I am using ajax. When I click the submit button the data is not posted.
  Can you assist me?</p>
  
  <p>This is my code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html &gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" href="css/reset.css"&gt; 
      &lt;link rel="stylesheet" href="css/style.css"&gt; 
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="wrap"&gt;
        &lt;a href="#modal-one" class="btn btn-big"&gt;CLICK ME!&lt;/a&gt;
     &lt;/div&gt;
    &lt;form&gt;
      &lt;div class="modal" id="modal-one" aria-hidden="true"&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-header"&gt;
            &lt;a href="#close" class="btn-close" aria-hidden="true"&gt;×&lt;/a&gt; 
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            &lt;p&gt;CATEGORY:
              &lt;input type="text" name="product" placeholder="CATEGORY"   list="productName" /&gt;
            &lt;/p&gt;
            &lt;datalist id="productName"&gt;
              &lt;option value="Pen"&gt;Pen&lt;/option&gt;
              &lt;option value="Pencil"&gt;Pencil&lt;/option&gt;
              &lt;option value="Paper"&gt;Paper&lt;/option&gt;
            &lt;/datalist&gt;
            &lt;p&gt;LOCATION:
              &lt;input type="text" placeholder="LOCATION" list="LocationName" /&gt;
            &lt;/p&gt;
            &lt;datalist id="LocationName"&gt;
              &lt;option value="HYDERABAD"&gt;HYDERABAD&lt;/option&gt;
              &lt;option value="BANGLORE"&gt;BANGLORE&lt;/option&gt;
              &lt;option value="MUMBAI"&gt;MUMBAI&lt;/option&gt;
            &lt;/datalist&gt;
            &lt;p&gt;DATE:
              &lt;input type="date" name="bday" max="1979-12-31"&gt;
            &lt;/p&gt;
            &lt;p&gt;PHONE NUMBER:
              &lt;input type="text" placeholder="PHONE NUMBER"&gt;
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;input type="submit" name="book now" class="btn btn-warning btn-  md" value="BookNow"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;
  &lt;/script&gt;
  &lt;script src="js/index.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function () {
    $('form').bind('submit', function (event) {
    event.preventDefault();
    $.ajax({
      type: 'post',
      url: 'get.php',
      data: $('form').serialize(),
      success: function ($id) {
        $.fancybox("#data");
      }
      });
      return false;
    });
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>