| <div class='col-md-8'> | |
| 
 | |
|     <!--Form with header--> | |
| 
 | |
|     <form action="/contact" method="post"> | |
|         <div class="card border-primary rounded-0"> | |
|             <div class="card-header p-0"> | |
|                 <div class="bg-info text-white text-center py-2"> | |
|                     <h3><i class="fa fa-envelope"></i>Contact Me</h3> | |
|                     <p class="m-0">I would love to hear from you.</p> | |
|                 </div> | |
|             </div> | |
|             <div class="card-body p-3"> | |
| 
 | |
|                 <!--Body--> | |
|                 <div class="form-group"> | |
|                     <div class="input-group mb-2"> | |
|                         <div class="input-group-prepend"> | |
|                             <div class="input-group-text"><i class="fa fa-user text-info"></i></div> | |
|                         </div> | |
|                         <input type="text" class="form-control" id="name" name="name" placeholder="Name" required> | |
|                     </div> | |
|                 </div> | |
|                 <div class="form-group"> | |
|                     <div class="input-group mb-2"> | |
|                         <div class="input-group-prepend"> | |
|                             <div class="input-group-text"><i class="fa fa-envelope text-info"></i></div> | |
|                         </div> | |
|                         <input type="email" class="form-control" id="email" name="email" placeholder="example@gmail.com" required> | |
|                     </div> | |
|                 </div> | |
| 
 | |
|                 <div class="form-group"> | |
|                     <div class="input-group mb-2"> | |
|                         <div class="input-group-prepend"> | |
|                             <div class="input-group-text"><i class="fa fa-comment text-info"></i></div> | |
|                         </div> | |
|                         <textarea class="form-control" placeholder="Message" name="message" required></textarea> | |
|                     </div> | |
|                 </div> | |
| 
 | |
|                 <div class="form-group"> | |
|                     <div class="g-recaptcha" data-sitekey="6LceWF8UAAAAAIsd7F6iY_Pywt4fJsJlFNPtEgi9"></div> | |
|                 </div> | |
| 
 | |
|                 <div class="text-center"> | |
|                     <input type="submit" value="Send" class="btn btn-info btn-block rounded-0 py-2"> | |
|                 </div> | |
|             </div> | |
| 
 | |
|         </div> | |
|     </form> | |
| </div> | |
| 
 | |
| <script src='https://www.google.com/recaptcha/api.js'></script> | |
| 
 | |
| <script> | |
|     $("form").submit(function(event) { | |
| 
 | |
|         var recaptcha = $("#g-recaptcha-response").val(); | |
|         if (recaptcha === "") { | |
|             event.preventDefault(); | |
|             alert("Please check the recaptcha"); | |
|         } | |
|     }); | |
| </script> |