Contact Form with AJAX jQuery Bootstrap PHP and MySql

Contact Form with AJAX jQuery Bootstrap PHP and MySql

In this tutorial we create a contact form that enters contact information into a database. It will then send an email to you from your website. We do this with AJAX, jQuery, Bootstrap, PHP and MySql. 


AJAX jQuery Functions Used

  • ready() function to check the readiness of the DOM {Document Object Model}
  • click() function to check and see if a button is clicked.
  • val() function to get the values from in input fields.
  • var to set our variables in AJAX
  • $.ajax() to make the ajax call
  • html() to target a display div to display results.

Bootstrap Classes Used

  • class of container
  • class of form-group
  • class of form-control
  • class of btn btn-default

Input Types Used

  • email to validate email address.
  • text for normal text and number entry.
  • tel for mobile devices so they bring up a phone dialer.
  • textarea to have columns and rows to write in.

PHP Functions Used

  • mysqli_real_escape_string() to sanitize post variables.
  • FILTER_SANITIZE_EMAIL to sanitize emails.
  • FILTER_SANITIZE_STRING to sanitize strings.
  • mysqli_query() to query mysql
  • close() to close a connection to a database
  • mail() to send email from server in PHP.
Scripts for this project located here.

Scripts for Contact Form

Create a file and call it index.php and put this code in it. Or download it here. 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Form with AJAX jQuery Bootstrap PHP and MySql</title>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <div class="form-group">
   	<label for="email">Email:</label>
    <input id="email" class="form-control" type="email" placeholder="Your Email">
  </div>
  <div class="form-group">
   	<label for="subject">Subject:</label>
    <input id="subject" class="form-control" type="text" placeholder="Subject">
  </div>
  <div class="form-group">
   	<label for="comments">Your Message:</label>
    <textarea id="comments" class="form-control" placeholder="Enter Text Here"></textarea>
  </div>
  <div class="form-group">
   	<label for="spam">Spam Control 5+2=?:</label>
    <input id="spam" class="form-control" type="tel" placeholder="Type 7 here.">
  </div>
<button type="submit" id="submit" class="btn btn-default">Contact</button>
<div id="display"></div>

<script>
$(document).ready(function(){
$("#submit").click(function(){
var em = $("#email").val();
var sub = $("#subject").val();
var com = $("#comments").val();
var spm = $("#spam").val();
var dataString = 'em1='+ em + '&sub1='+ sub + '&com1='+ com;
if(em==''||sub==''||com=='')
{
$("#display").html("<div class='alert alert-warning'>Please Fill All Fields.</div>");
}
else if(spm!='7')
{
$("#display").html("<div class='alert alert-danger'>Please Answer The Spam Question.</div>");
}
else
{
$.ajax({
type: "POST",
url: "processor.php",
data: dataString,
cache: false,
success: function(result){
$("#display").html(result);
}
});
}
return false;
});
});
</script>
</div>
</body>
</html>
Next, create a file called processor.php and enter the following code. You can download it here. 
<?php
include_once('config.php');
$email=mysqli_real_escape_string($con, $_POST['em1']);
$emailclean = filter_var($email, FILTER_SANITIZE_EMAIL, FILTER_FLAG_STRIP_HIGH);
$sub=mysqli_real_escape_string($con, $_POST['sub1']);
$subclean = filter_var($sub, FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$com=mysqli_real_escape_string($con, $_POST['com1']);
$comclean = filter_var($com, FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
//insert into database
mysqli_query($con,"INSERT INTO contact(`email`, `subject`, `comments`)VALUES('$emailclean','$subclean','$comclean')");
//email the form to yourself
$to='[email protected]';
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$headers .= 'From: <[email protected]>' . "\r\n";
$headers .= 'Cc: [email protected]' . "\r\n";
$message='<table width="100%" border="1" cellspacing="1" cellpadding="2">
<tr><td colspan="2">Someone Contacted You On Your Website</td></tr>
<tr><td>Subject</td><td>'.$subclean.'</td></tr>
<tr><td>Message</td><td>'.$comclean.'</td></tr>
<tr><td colspan="2"><img src="https://a1websitepro.com/uploads/2014/09/logo200.png" width="300px"/></td></tr>
</table>';
mail($to,$subclean,$message,$headers);
//send message back to AJAX
echo '<div class="alert alert-success">Thank you for contacting us. Someone will get back to you within 1 Business Day.</div>';
$con->close();
?>
Here is the mysql 
DROP TABLE IF EXISTS `contact`;
/*!40101 SET @saved_cs_client = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `contact` (
`id` int(6) unsigned NOT NULL AUTO_INCREMENT,
`email` varchar(250) NOT NULL,
`subject` varchar(250) NOT NULL,
`comments` varchar(250) NOT NULL,
`con_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;


Sign Up To Comment