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 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;