PHP AJAX Contact Form Help of PHP,HTML and CSS

Hi Guys Today We will learn how to Create Dynamic Ajax Contact Form help of MySQL Database.

What you need..

First create a database named: test
create table named: contact
Now use The below SQL Commands to Create a table(contact):
SQL for Creating Table contact

CREATE TABLE IF NOT EXISTS `contact` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL,
  `email` varchar(50) NOT NULL,
  `content` varchar(200) NOT NULL,
   PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=15 DEFAULT CHARSET=latin1;

Files Structure:

1. index.html
2. script.js
3. contact.php
4. style.css
1.Creating connect.php to connect database.

<?php
$conn=new mysqli('localhost','root','','test');
?>

2.creating index.html page.

<html>
<head>
<title>AJAX Simple Contact Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<div id="contact">
<table>
<tr>
  <td><span>Your Name:</span></td>
  <td><input type="text" id="name" required/></td>
</tr>
<tr>
  <td><span>Your Email:</span></td>
  <td><input type="text" id="email" required/></td>
</tr>
<tr>
  <td><span>Content:</span></td>
  <td><textarea id="content" rows="10" cols="40"></textarea></td>
</tr>
 <tr>
   <td></td>
   <td><input type="button" id="submit" value="Contact US"/></td>
 </tr>
</table>
<div id="success"></div>
</div>
</html>

3.creating script.js file
in this Script We will call contact.php page to send data by passing name,email,content without refresing page..

$(document).ready(function(){
 $("#submit").click(function(){
  var name=$("#name").val();
  var email=$("#email").val();
  var content=$("#content").val();
  if(name==""||email==""||content==""){
   if(name==""){
    alert("Your Name Empty");
   }
   if(email==""){
    alert("Your Email Empty");
   }
   if(content==""){
    alert("Your Content Empty");
   }
  }else{
   $.ajax({
    url:"contact.php",
    type:"POST",
    data:{name:name,email:email,content:content},
    success:function(data){
     $("#success").html(data);
    $("#name").val('');
    $("#email").val('');
    $("#content").val('');
    }
   });
   return false;
  }
 });
});

4.creating contact.php file..

<?php
  include("connect.php");
  $name=$_POST['name'];
  $email =$_POST["email"];
  $content=$_POST['content'];
  //Inserting Contact Info
  if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  echo "<font style=color:red size=4><b>Your Email is Not Valid</b></font>"; 
}else{
  $result=mysqli_query($conn,"INSERT INTO contact(name,email,content)VALUES('$name','$email','$content')");
  if($result){
   echo "<font style=color:white size=4><b>Your Message Accepted.Our Assistant Will Response You Soon..</b></font>";
  }else{
echo "<font style=color:red size=4><b>Sorry Something Went Wrong Try Again..</b></font>";  
  }
}
   
  ?>

5.style.css codes..

#contact{
 background:#0a0a0f;
 width:600px;
 margin:auto;
}
input[type=text]{
 width:220px;
 padding:5px;
 border-radius:5px;
}
input[type=button]{
 padding:5px 8px;
 border-radius:4px;
 background:#ff00bf;
 cursor:pointer;
}
textarea{
 width:220px;
 border-radius:5px;
 max-width:500px;
}
span{
 font-size:18px;
 font-weight:bold;
 color:white;
}
h2{
 text-align:center;
 color:white;
}

That's all, this is how to create dynamic contact form using Ajax, PHP and MySQL. You can customize this codes further as per your requirement. feel free to give your comment on this tutorial.

Latest

Monday, December 18, 2017

PHP AJAX Contact Form Help of PHP,HTML and CSS