1 Star2 Stars3 Stars4 Stars5 Stars (9 votes, average: 5.00 out of 5)

Contact Form with AJAX jQuery Bootstrap PHP and MySql

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></pre>
<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.

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. ๐Ÿ™‚
<?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/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();
?>

You will need a config.php file. Create it and put this code it in. Make sure you provide connection information to your database.

<?php
$con = mysqli_connect("localhost","dbusername","dbpass","dbname");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}else{
echo "";
}
?>

Here is the mysql

Subscribe To My YouTube Channel:
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: November 23rd, 2018 by Maximus Mccullough

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Cool People Share:
Contact Form with AJAX jQuery Bootstrap PHP and MySql

Pages:Previous 1 2

6 Comments

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.