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='your@email.com';
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$headers .= 'From: <you@yourwebsite.com>' . "\r\n";
$headers .= 'Cc: another@email.com' . "\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/wp-content/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;
Contact Form with AJAX jQuery Bootstrap PHP and MySql was last modified: June 16th, 2022 by
Summary
Article Name
Contact Form with AJAX jQuery Bootstrap PHP and MySql
Description
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.
Author
Maximus McCullough
Publisher
A1WEBSITEPRO LLC
Logo
6 Comments
The best walk-through and explanation of anything I have seen on this topic. THANKYOU!!!
Hi Paul, glad to help. Thanks for the comment. 🙂
Hi,
Do you have a complete download of all the files ?
I can only find 2 links to 2 of the files and then its copy and paste for another 2 files !!
Have you done this on purpose if so WHY?
Never seen that before if you are going to give us the project files WHY not a single file to download?
Regards Costas
I am sorry you are having trouble. Here is a link to the scripts so you can download them.
A big thank you for this very clear tutorial and code! I’m a beginner with PHP and MySQL. I’ve read a lot about it and tried many things to include a contact form on my webpage using Ajax, JS, PHP and MySQL altogether. Sometimes it worked fine but the code was always horribly complicated and I didn’t understand it (which was not the point for a learner). Your code is very neat and easy to follow. I found your page after hours of struggling. Just when I was about to have a nervous breakdown, you made it worked in an intelligible way. Good job!
Thank you Emilie, glad to help 🙂