Do you want to be a good Web Developer?

Enter Your Email To Get Our Exclusive Tutorials
And Offer Right In Your Email

Join TalkersCode Community And Recieve Exclusive Tutorials
On Web Development Right Via Email.

Ajax Contact Form Using jQuery, PHP And MySQL

Thursday, Jan 19, 2017

Tags:- jQuery Ajax PHP MySQL


Ajax Contact Form is form made for contact purpose it used to submit contact details without page refresh in database using Ajax. So, in this tutorial we will show you how to create ajax contact form using jQuery, PHP and MySQL.You may also like Submit Form Without Page Refresh Using Ajax .


See Demo
Ajax Contact Form Using jQuery, PHP And MySQL


To Create Ajax Contact Form It Takes Only Three Steps:-

  1. Make a HTML file and define markup and scripting
  2. Make a PHP file to store contact details
  3. Make a CSS file and define styling


Step 1.Make a HTML file and define markup and scripting

We make a HTML file and save it with a name contact_form.html

<html>
<head>
<link href="form_style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function save_detail()
{
 var name=$("#sender_name").val();
 var email=$("#sender_email").val();
 var reason=$("#reason").val();
 var message=$("#message").val();
 if(name!="" && email!="" && reason!="" && message!="")
 {
  $.ajax
  ({
   type:'post',
   url:'store_detail.php',
   data:{
    submit_contact:"submit_contact",
    name:name,
    email:email,
    reason:reason,
    message:message
   },
   success:function(response) {
    if(response=="submitted")
    {
     document.getElementById("contact_form").innerHTML="Thanks For Contacting Us We Will Contact You Soon";
    }
   }
  });
 }
 else
 {
  alert("Please Fill All The Details");
 }
 
 return false;
}
</script>
</head>
<body>
<div id="wrapper">

<div id="contact_form">
<h1>Contact Form</h1>
<form method="post" action="store_detail.php" onsubmit="return save_detail();">
<table align=center>
 <tr>
  <td>Enter Your Name : </td><td><input type="text" id="sender_name" name="sender_name"></td>
 </tr>
 <tr>
  <td>Enter Your Email : </td><td><input type="text" id="sender_email" name="sender_email"></td>
 </tr>
 <tr>
  <td>Contact Reason : </td><td><input type="text" id="reason" name="reason"></td>
 </tr>
 <tr>
  <td>Message : </td><td><textarea id="message" name="message"></textarea></td>
 </tr>
</table>
<p><input type="submit" name="send_mail" value="SUBMIT FORM"></p>
</form>
</div>

</div>
</body>
</html>

In this step we create a form and add four text fields name, email, reason and message and create a function save_detail() to get and all the values and send that values to 'store_detail.php' for saving without page refresh using ajax and if the all the details successfully saved then it display the thankyou message.You may also like Feedback Form On Page Bottom Using jQuery.



Step 2.Make a PHP file to store contact details

We make a PHP file and save it with a name store_detail.php

// Database Structure 
CREATE TABLE `contacts` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` text NOT NULL,
 `email` text NOT NULL,
 `reason` text NOT NULL,
 `message` text NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1

<?php
if(isset($_POST['submit_contact']))
{
 $name=$_POST['name'];
 $email=$_POST['email'];
 $reason=$_POST['reason'];
 $message=$_POST['message'];
	
 $host="localhost";
 $username="root";
 $password="";
 $databasename="sample";
 $connect=mysql_connect($host,$username,$password);
 $db=mysql_select_db($databasename);
 
 mysql_query("insert into contacts values('','$name','$email','$reason','$message')");
 echo "submitted";
 exit();
}
?>

In this step we create a database table called 'contacts' to store contact details and then we get all the contact details from ajax request and insert it in our database table.Always validate data before storing in database.You may also like Newsletter SignUp Form Using jQuery.



Step 3.Make a CSS file and define styling

We make a CSS file and save it with a name form_style.css

body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#8A2908;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
}
#contact_form
{
 background-color:white;
 width:450px;
 padding:20px;
 box-sizing:border-box;
 margin-left:270px;
 box-shadow:0px 0px 10px 0px #3B170B;
}
#contact_form h1
{
 text-align:center;
 margin:0px;
 color:#FA8258;
 font-size:30px;
 margin-bottom:40px;
 text-decoration:underline;
}
#contact_form td
{
 margin:10px;
 color:#FA8258;
 font-weight:bold;
}
#contact_form input[type="text"]
{
 width:250px;
 height:35px;
 padding-left:5px;
}
#contact_form textarea
{
 width:250px;
 height:70px;
 padding-left:5px;
}
#contact_form input[type="submit"]
{
 background-color:#B43104;
 color:white;
 border:none;
 border-bottom:5px solid #8A2908;
 width:150px;
 height:45px;
 border-radius:2px;
}

You can view our Send Mail Using PHP tutorial and add more functionality in this tutorial like send contact details directly to your mail address instead of storing it in database.

Thats all, this is how to create ajax contact form using jQuery, PHP and MySQL.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email