✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Ajax Contact Form Using jQuery, PHP And MySQL

Last Updated : Jul 1, 2023

IN - jQuery Ajax PHP MySQL | Written & Updated By - Dikshita

In this tutorial we will show you how to create ajax contact form using jQuery, PHP and MySQL, Ajax Contact Form is form made for contact purpose it used to submit contact details without page refresh in database using Ajax.

You may also like Submit Form Without Page Refresh Using Ajax .

Ajax Contact Form Using jQuery, PHP And MySQL

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

I hope this tutorial on ajax contact form helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →