title: contact form 7 functions without wordpress
body: <p>I have a website which is built using bootstrap framework.</p>
  
  <p>I want to implement contact form 7 feature without wordpress. <a href="https://i.stack.imgur.com/ibA1g.png" rel="nofollow noreferrer">Like this with radio buttons.</a>
  I tried using php mail function with bootstrap and it's not working like sending email with data. </p>
  
  <p><a href="https://i.stack.imgur.com/wukk3.png" rel="nofollow noreferrer">Like this Bootstrap with php</a>
  Following are the code</p>
  
  <p>"HTML Start here"</p>
  
  <pre><code>&lt;div class="center"&gt;&lt;br&gt;
    &lt;button type="button" class="preview btn btn-info btn-lg" data-toggle="modal" data-target="#requestInfo"&gt;Free Consultation!&lt;/button&gt;
  &lt;/div&gt;
  &lt;!-- The Modal --&gt;
  &lt;div id="requestInfo" class="modal"&gt;
    &lt;!-- Modal content --&gt;
    &lt;div class="modal-content"&gt;
      &lt;div role="form"&gt;
        &lt;form method="post" action="modal_form.php" novalidate="novalidate"&gt;
          &lt;div class="modal-header"&gt;
            &lt;div class="center"&gt;
              &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Free Consultation!&lt;/h4&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="modal-body"&gt;&lt;br&gt;
  
            &lt;div class="form-group"&gt;
              &lt;input type="text" name="name" id="name" value="" size="40" aria-invalid="false" placeholder="Name with Designation*" required/&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;input type="text" name="companyname" id="companyname" value="" size="40" aria-invalid="false" placeholder="Company's Name" /&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;input type="email" name="email" id="email" value="" size="40" aria-invalid="false" placeholder="Email*" required /&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;input type="tel" name="mobile" id="mobile" value="" size="40" aria-invalid="false" placeholder="Mobile" /&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;input type="tel" name="state" id="state" value="" size="40" aria-invalid="false" placeholder="Any prefered State in India." /&gt;
            &lt;/div&gt;
  
            &lt;p class="lead"&gt;Help us to know more about your requirements&lt;/p&gt;
            &lt;h4&gt;1. Purpose of Company*&lt;/h4&gt;
            &lt;div class="left-align"&gt;
              &lt;div class="radio "&gt;
                &lt;label&gt;&lt;input type="radio" name="PurposeOfCompany" id="manufacturing" value="Manufacturing Setup"&gt;Manufacturing Setup&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="radio"&gt;
                &lt;label&gt;&lt;input type="radio" name="PurposeOfCompany" id="sectors" value="Sectors"&gt;Sectors&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="radio"&gt;
                &lt;label&gt;&lt;input type="radio" name="PurposeOfCompany" id="investment" value="Investment"&gt;Investment/Finance&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="radio"&gt;
                &lt;label&gt;&lt;input type="radio" name="PurposeOfCompany" id="trading" value="Trading"&gt;Trading&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="radio"&gt;
                &lt;label&gt;&lt;input type="radio" name="PurposeOfCompany" id="jv" value="JV"&gt;Joint Venture / Mergers and Acquisitions&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="radio"&gt;
                &lt;label&gt;&lt;input type="radio" name="PurposeOfCompany" id="other" value="Other"&gt;Others&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="form-group" id="other_purpose" style="display: none;"&gt;
                &lt;input type="text" name="PurposeOfCompany_Other" id="specify" value="" size="40" aria-invalid="false" placeholder="Specify" /&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                &lt;textarea class="form-control" rows="4" id="details" placeholder="Details:"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
              &lt;p&gt;* Mandatory Fields&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;div class="center"&gt;
                &lt;input class="btn btn-info btn-md" type="submit" value="Submit" /&gt;
                &lt;button type="button close" class="btn btn-info btn-sm" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>"HTML Ends here"</p>
  
  <p>"CSS Start here"</p>
  
  <pre><code>&lt;style&gt;
      /* The Modal (background) */
      .modal {
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          padding-top: 100px; /* Location of the box */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgb(0,0,0); /* Fallback color */
          background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
      }
  
      /* Modal Content */
      .modal-content {
          position: relative;
          background-color: #fefefe;
          margin: auto;
          padding: 10px;
          border: 1px solid #888;
          width: 70%;
          box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
          -webkit-animation-name: animatetop;
          -webkit-animation-duration: 0.4s;
          animation-name: animatetop;
          animation-duration: 0.4s
      }
  
      /* Add Animation */
      @-webkit-keyframes animatetop {
          from {top:-300px; opacity:0} 
          to {top:0; opacity:1}
      }
  
      @keyframes animatetop {
          from {top:-300px; opacity:0}
          to {top:0; opacity:1}
      }
  
      /* The Close Button */
      .close {
          float: center;
          font-size: 28px;
          font-weight: bold;
      }
  
      .close:hover,
      .close:focus {
          color: #000;
          text-decoration: none;
          cursor: pointer;
      }
  
      .modal-header {
          padding: 0px 5px 5px 0px;
          font-size: 25px;
          font-weight: bold;
  
      }
  
      .modal-footer {
          padding: 5px 0px 0px 0px;
          font-size: 25px;
          font-weight: bold;
  
      }
  
      .modal-body {padding: 20px 20px;}
  
      }   
  &lt;/style&gt;
  </code></pre>
  
  <p>"CSS Ends Here"</p>
  
  <p>"JS Start Here"</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function(){
          $('input[name=PurposeOfCompany]').change(function(){
              if($(this).val() === 'Other') {
                  $('#other_purpose').show();
              } else {
                  $('#other_purpose').hide();
              }
          });
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>"JS Ends Here"</p>
  
  <p>"Php Start Here"</p>
  
  <pre><code>&lt;?php
    $name    = $_POST['name'];
    $cname    = $_POST['cname'];
    $email   = stripslashes($_POST['email']);
    $phone   = stripslashes($_POST['phone']);
    $purpose = $_POST['purpose'];
    $message = $_POST['message'];
    $form_message = "Name: $name \nCompany's Name: $cname \nEmail: $email \nPhone: $phone \nPurpose of Contact: $purpose \nMessage: $message";
  
    header( "Location: http://www.example.com");
  
    mail("freeconsultancy@example.com", "Free Consultancy Message!", $form_message, "From: $email" );
  
  ?&gt;
  </code></pre>
  
  <p>"Php Ends Here"</p>
  
  <p>When I click submit button php function not sending data.</p>