Bootstrap HTML contact form with Ajax validation and send via php

Every time we are creating html form using Bootstrap with jquery validation ,but in this we can see how to send the html form data to mail with ajax and php with the thankyou message on the same page without refreshing.

Step 1 : Creating contact Form  

<form id ="contact-form" name="contact-form">

<!--Grid row-->
 <div class="row">

<!--Grid column-->
 <div class="col-md-6">
 <div class="md-form">
 <div class="md-form">
 <input type="text" id="name" name="name" class="form-control">
 <label for="name" class="">Your name</label>
 </div>
 </div>
 </div>
 <!--Grid column-->

<!--Grid column-->
 <div class="col-md-6">
 <div class="md-form">
 <div class="md-form">
 <input type="text" id="email" name="email" class="form-control">
 <label for="email" class="">Your email</label>
 </div>
 </div>
 </div>
 <!--Grid column-->

</div>
 <!--Grid row-->

<!--Grid row-->
 <div class="row">
 <div class="col-md-12">
 <div class="md-form">
 <input type="text" id="subject" name="subject" class="form-control">
 <label for="subject" class="">Subject</label>
 </div>
 </div>
 </div>
 <!--Grid row-->

<!--Grid row-->
 <div class="row">

<!--Grid column-->
 <div class="col-md-12">

<div class="md-form">
 <textarea type="text" id="message" name="message" class="md-textarea"></textarea>
 <label for="message">Your message</label>
 </div>

</div>
 </div>
 <!--Grid row-->

</form>

<div class="center-on-small-only">
 <a class="btn btn-primary" onclick="validateForm()">Send <i class="fa fa-paper-plane-o"></i></a>
 </div>
 <div class="status red-text font-weight-normal" id="status"></div>

Step 2: Validating with Ajax


//script
function validateForm()
{
document.getElementById('status').innerHTML = "Sending...";
formData = {
'name' : $('input[name=name]').val(),
'email' : $('input[name=email]').val(),
'subject' : $('input[name=subject]').val(),
'message' : $('textarea[name=message]').val()
};

$.ajax({
url : "mail.php",
type: "POST",
data : formData,
success: function(data, textStatus, jqXHR)
{

$('#status').text(data.message);
if (data.code) //If mail was sent successfully, reset the form.
$('#contact-form').closest('form').find("input[type=text], textarea").val("");
},
error: function (jqXHR, textStatus, errorThrown)
{
$('#status').text(jqXHR);
}
});
}

Step 3: PHP Script to send the mail

Named as mail.php

<?php
 $name = $_POST['name'];
 $email = $_POST['email'];
 $message = $_POST['message'];
 $subject = $_POST['subject'];
 header('Content-Type: application/json');
 if ($name === ''){
 print json_encode(array('message' => 'Name cannot be empty', 'code' => 0));
 exit();
 }
 if ($email === ''){
 print json_encode(array('message' => 'Email cannot be empty', 'code' => 0));
 exit();
 } else {
 if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
 print json_encode(array('message' => 'Email format invalid.', 'code' => 0));
 exit();
 }
 }
 if ($subject === ''){
 print json_encode(array('message' => 'Subject cannot be empty', 'code' => 0));
 exit();
 }
 if ($message === ''){
 print json_encode(array('message' => 'Message cannot be empty', 'code' => 0));
 exit();
 }
 $content="From: $name \nEmail: $email \nMessage: $message";
 $recipient = "youremail@here.com";
 $mailheader = "From: $email \r\n";
 mail($recipient, $subject, $content, $mailheader) or die("Error!");
 print json_encode(array('message' => 'Email successfully sent!', 'code' => 1));
 exit();
 ?>

Thats it ! once you send the mail you will get thankyou message below the form if mail is not send you will get error message.

 

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of