Building a Bootstrap Contact Form Using PHP and AJAX

Hello friends,

In this tutorial I’ll go over the steps to create a working contact form using Bootstrap, in combination with AJAX and PHP. From there we can explore some additional features such as some fancy CSS animation with animate.css, further validation in jquery. you need to add some css and js files in your folder.

 

Html Form Start Here :

<!DOCTYPE html>
<html>
<head>
<title>Contact form </title>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
<meta charset=”utf-8″>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” href=”css/bootstrap.css”>
<link rel=”stylesheet” href=”css/animate.css”>

</head>
<body>”
<div class=”row”>
<div class=”col-sm-6 col-sm-offset-3″>
<h3>Send me a message</h3>
<div class=”col-md-7 col-sm-7 col-xs-12 contact-right-w3l”>
<form method=”post” id=”contactForm”>
<select type=”surajit” name=”Start” id=”start_here”>
<option value=””> Start here</option>
<option value=”I want Quotation”>I want Quotation</option>
<option value=”I want to Make A Booking”>I want to Make A Booking</option>
</select>
<input type=”text” class=”name” id=”name” name=”name” placeholder=”First Name” required=””>
<input type=”email” class=”name” id=”email” name=”email” placeholder=”Email” required=””>
<input type=”text” class=”name” id=”subject” name=”subject” placeholder=”Subject” required=””>
<select type=”surajit” name=”Best_Time_to_call_you_back” id=”best_time”>
<option value=””> Best Time To call You Back</option>
<option value=”ASAP”>ASAP</option>
<option value=”Morning”>Morning</option>
<option value=”Afternoon”>Afternoon</option>
<option value=”Evening”>Evening</option>
</select>
<select type=”surajit” name=”pestproblem” id=”pestproblem”>
<option value=””>Pest Problem</option>
<option value=”General Pests”>General Pest Treatment</option>
<option value=”Ants”>Ants</option>
<option value=”Bedbugs”>Bedbugs</option>
<option value=”Bee”>Bee</option>
</select>
<textarea id=”address” placeholder=”Address” required=””></textarea>
<input type=”submit” id=”form-submit” value=”SEND MESSAGE”>
<div id=”msgSubmit” class=”h3 text-center hidden”>Message Submitted!</div>
</form>
</div>
</div>
</div>
</body>
<script type=”text/javascript” src=”js/jquery-1.11.2.min.js”></script>
<script type=”text/javascript” src=”js/form-scripts.js”></script>
</html>

Jquery code for form submit using Ajax

<script>
$(document).ready(function() {
$(“#contactForm”).submit(function(event){
// cancels the form submission
event.preventDefault();
submitForm();
});
});
function submitForm(){
// Initiate Variables With Form Content
var name = $(“#name”).val();
var email = $(“#email”).val();
var subject = $(“#subject”).val();
var start_here = $(“#start_here”).val();
var best_time = $(“#best_time”).val();
var pestproblem = $(“#pestproblem”).val();
var address = $(“#address”).val();

$.ajax({
type: “POST”,
url: “contact_form.php”,
data: “name=” + name + “&email=” + email + “&start_here=” + start_here + “&address=” + address + “&best_time=” + best_time + “&pestproblem=” + pestproblem + “&subject=” + subject,
success : function(text){
if (text == “success”){
formSuccess();
setTimeout(function() {
$(‘#msgSubmit’).fadeOut(‘fast’);
}, 5000);
$(“#contactForm”).resetForm();
}
}
});
}
function formSuccess(){
$( “#msgSubmit” ).removeClass( “hidden” );
}
</script>

You need to create a contact_form.php file in your root folder give the proper path of the php file where we process the email

<?php
$name = $_POST[“name”];
$email = $_POST[“email”];
$subject = $_POST[“subject”];
$start_here = $_POST[“start_here”];
$best_time = $_POST[“best_time”];
$pestproblem = $_POST[“pestproblem”];
$address = $_POST[“address”];

$EmailTo = “sainidaya@gmail.com”;
$Subject = “Termitepestcontrol Recevied New Query”;

// prepare email body text
$Body .= “Name: “;
$Body .= $name;
$Body .= “\n”;

$Body .= “Email: “;
$Body .= $email;
$Body .= “\n”;

$Body .= “Start Here: “;
$Body .= $start_here;
$Body .= “\n”;

$Body .= “Best time to call you: “;
$Body .= $best_time;
$Body .= “\n”;

$Body .= “Problem: “;
$Body .= $pestproblem;
$Body .= “\n”;

$Body .= “Subject: “;
$Body .= $subject;
$Body .= “\n”;

$Body .= “Address: “;
$Body .= $address;
$Body .= “\n”;

// send email
$success = mail($EmailTo, $Subject, $Body, “From:”.$email);

// redirect to success page
if ($success){
echo “success”;
}else{
echo “Some error coming”;
}

?>

 

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face – we are here to solve your problems.

I, Dayanand Saini,the founder and chief editor of www.webtechsource.com,have been working as a software engineer from last 4+ years. It's my hobby to learn new things and implement on live environment.

Leave a Reply

Your email address will not be published. Required fields are marked *

64 + = 74

%d bloggers like this: