Build Contact Form with PHP and Ajax

Contact Form or Feedback form is an important page that’s generally used in every website to make contact with their visitors. Contact Form is basically a set of questions that’s need to be filled by website users to give feedback or queries to website owner. When contact form submitted with details, an email with details is automatically send to the website owner.

So if you’re looking for implementing contact form in your website, then you’re here at the right place. In our previous tutorial, you have learned to create Event Calendar with jQuery, PHP & MySQL. In this tutorial you will learn how to implement Bootstrap Contact From with PHP and jQuery Ajax. We will create Bootstrap contact form and implement form input validation and submit form with Ajax and finally send email to the website owner.

We will cover this tutorial in easy steps with live example to create Bootstrap contact form with validation and send email.

Also, read:

Visitor Management System with PHP & MySQL

So let’s create Bootstrap Contact Form with PHP and jQuery Ajax. The file structure of this example is following.

index.php
validation.js
mail.php

Step1: Include Bootstrap, jQuery and CSS Files

As we will create contact form with Bootstrap4 framework, so first we will include Bootstrap4, jQuery and CSS files.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script><title>coderszine.com : Demo Advance Contact Form with Ajax and PHP</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
<script src="js/validation.js"></script>
<link rel="stylesheet" href="css/style.css">

Step2: Design Boostrap4 Contact Form

In index.php, we will design contact form with Bootstrap4.

<div class="container contact">	
	<div class="row">
		<div class="col-md-3">
			<div class="contact-info">
				<h2>Contact Us</h2>
				<h4>We would love to hear from you !</h4>
			</div>
		</div>		
		<div class="col-md-9">
		 <form action="mail.php" method="post" id="contact_form">
			<div class="contact-form">
				<div id="message" class="alert alert-danger alert-dismissible fade"></div>
				<div class="form-group">				  
				  <label class="control-label col-sm-2" for="firstName">First Name*:</label>
				  <div class="col-sm-10">          
					<input type="text" class="form-control" id="firstName" placeholder="Enter First Name" name="firstName">
				  </div>
				</div>
				<div class="form-group">
				  <label class="control-label col-sm-2" for="lastName">Last Name*:</label>
				  <div class="col-sm-10">          
					<input type="text" class="form-control" id="lastName" placeholder="Enter Last Name" name="lastName">
				  </div>
				</div>
				<div class="form-group">
				  <label class="control-label col-sm-2" for="email">Email*:</label>
				  <div class="col-sm-10">
					<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
				  </div>
				</div>
				<div class="form-group">
				  <label class="control-label col-sm-2" for="subject">Subject*:</label>
				  <div class="col-sm-10">          
					<input type="text" class="form-control" id="subject" placeholder="Enter subject" name="subject">
				  </div>
				</div>
				<div class="form-group">
				  <label class="control-label col-sm-2" for="comment">Comment*:</label>
				  <div class="col-sm-10">
					<textarea class="form-control" rows="5" name="comment" id="comment"></textarea>
				  </div>
				</div>
				<div class="form-group">        
				  <div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-default">Submit</button>
				  </div>
				</div>
			</div>
			</form>
		</div>		
	</div>
</div>

Step3: Contact Form Validation

In validation.js, we will implement form input validations using bootstrapValidator plugin.

$('#contact_form').bootstrapValidator({        
	feedbackIcons: {
		valid: 'glyphicon glyphicon-ok',
		invalid: 'glyphicon glyphicon-remove',
		validating: 'glyphicon glyphicon-refresh'
	},
	fields: {
		firstName: {
			validators: {
					stringLength: {
					min: 2,
				},
					notEmpty: {
					message: 'Please enter your first name'
				}
			}
		},
		 lastName: {
			validators: {
				 stringLength: {
					min: 2,
				},
				notEmpty: {
					message: 'Please enter your last name'
				}
			}
		},
		email: {
			validators: {
				notEmpty: {
					message: 'Please enter your email address'
				},
				emailAddress: {
					message: 'Please enter a valid email address'
				}
			}
		},
		subject: {
			validators: {
				 stringLength: {
					min: 2,
				},
				notEmpty: {
					message: 'Please enter subject'
				}
			}
		},
		comment: {
			validators: {
				  stringLength: {
					min: 10,
					max: 200,
					message:'Please enter at least 10 characters and no more than 200'
				},
				notEmpty: {
					message: 'Please enter a description'
				}
				}
			}
		}
});

Step4: Contact Form Submit

We will handle contact form submit with jQuery after validation and make ajax request to mail.php to send mail with contact form details.

var $form = $(e.target);            
$.ajax({
	url: $form.attr('action'),
	method: "POST",
	data:$form.serialize(),
	dataType:"json",
	success:function(response){				
		$("#message").html(response.message).addClass('show');
		$("#contact_form").find("input[type=text], input[type=email], textarea").val("");
	}
});

Step5: Send Contact Form Details Email

In mail.php, we will get contact form details and handle mail send functionality with contact form details.

<?php
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
$name = $firstName." ".$lastName;
$email = $_POST['email'];
$subject = $_POST['subject'];
$comment = $_POST['comment'];
$toEmail = "";
$email = filter_var($email, FILTER_SANITIZE_EMAIL);
$showMessage = '';
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {	
	$headers  = 'MIME-Version: 1.0' . "\r\n";
	$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
	$headers .= 'From: '.$email."\r\n".
    'Reply-To: '.$email."\r\n" .
    'X-Mailer: PHP/' . phpversion();	
	$message = 'Hello,<br/>'
	. 'Name:' . $name . '<br/>'	
	. 'Message:' . $comment . '<br/><br/>';		
	mail($toEmail, $subject, $message, $headers);
	$showMessage = "Your request has been received, We will contact you soon. Thanks!";	
} else {
	$showMessage =  "Invalid email address";
}
$jsonData = array(
	"message"	=> $showMessage
);
echo json_encode($jsonData); 
?>

You may also like:

You can view the live demo from the Demo link and can download the source from the Download link below.
Demo Download