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

What is Dark web vs Deep Web and how to access Dark web/Deep Web

How to Create popup Widget for Blogger

Sendinblue Review a Cheap email marketing Service

Bluehost Review 2018

PHP ajax Inline Insert

JavaScript Hide Show Password

JavaScript countdown timer code

javascript digital clock with date

JavaScript Digital Clock Example

javascript password protect page with JavaScript Prompt

export mysql database table to csv using php

php xml to array

Import CSV file into MySQL using PHP

php read csv file

php export to excel

php read xml file

php upload multiple files

PHP File upload

ajax pagination with php

php http authentication example

php create zip file

JavaScript Capture keyboard events -Get Pressed key and Keycode

Detect the screen resolution with JavaScript

get ip address in php

add syntax highlighter to blogger

Monday, December 18, 2017

PHP AJAX Contact Form Help of PHP,HTML and CSS