azazqadir/config.php

## readme.md

      
    Raw
  

              readme.md
            
          
    Here is complete PHP Contact Form script that uses PHP 7.1, HTML5, AJAX jQuery and MySQL.
Create a contact form giving below with simple HTML5 validation and save it with .php extension. Value which will be written between the double quotes in attribute Name like name=”u_name” in input tags work as a variable name. These attributes will contain the data from the form that we will use to save in our database . There are two methods to send your form data to your PHP page: GET and POST. I will be using POST as it hides the user data and there is no limit to send data.

  
## config.php
<?php
$host = "localhost";
$userName = "fyrhp";
$password = "RTDE";
$dbName = "fyrhp";

// Create database connection
$conn = new mysqli($host, $userName, $password, $dbName);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>

## contact_mail.php
<?php
$toEmail = "[email protected]";
$mailHeaders = "From: " . $_POST["your_name"] . "<". $_POST["your_email"] .">\r\n";
if(mail($toEmail, $_POST["comments"], $_POST["your_phone"], $mailHeaders)) {
echo"<p class='success'>Contact Mail Sent.</p>";
} else {
echo"<p class='Error'>Problem in Sending Mail.</p>";
}
?>

## contactform.html
!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>

#loading-img{
display:none;
}

.response_msg{
margin-top:10px;
font-size:13px;
background:#E5D669;
color:#ffffff;
width:250px;
padding:3px;
display:none;
}

</style>
</head>
<body>

<div class="container">
<div class="row">

<div class="col-md-8">
<h1><img src="Inquiry.png" width="80px">Easy Contact Form With Ajax MySQL</h1>
<form name="contact-form" action="" method="post" id="contact-form">
<div class="form-group">
<label for="Name">Name</label>
<input type="text" class="form-control" name="your_name" placeholder="Name" required>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" name="your_email" placeholder="Email" required>
</div>
<div class="form-group">
<label for="Phone">Phone</label>
<input type="text" class="form-control" name="your_phone" placeholder="Phone" required>
</div>
<div class="form-group">
<label for="comments">Comments</label>
<textarea name="comments" class="form-control" rows="3" cols="28" rows="5" placeholder="Comments"></textarea>
</div>

<button type="submit" class="btn btn-primary" name="submit" value="Submit" id="submit_form">Submit</button>
<img src="img/loading.gif" id="loading-img">
</form>

<div class="response_msg"></div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#contact-form").on("submit",function(e){
e.preventDefault();
if($("#contact-form [name='your_name']").val() === '')
{
$("#contact-form [name='your_name']").css("border","1px solid red");
}
else if ($("#contact-form [name='your_email']").val() === '')
{
$("#contact-form [name='your_email']").css("border","1px solid red");
}
else
{
$("#loading-img").css("display","block");
var sendData = $( this ).serialize();
$.ajax({
type: "POST",
url: "get_response.php",
data: sendData,
success: function(data){
$("#loading-img").css("display","none");
$(".response_msg").text(data);
$(".response_msg").slideDown().fadeOut(3000);
$("#contact-form").find("input[type=text], input[type=email], textarea").val("");
}

});
}
});

$("#contact-form input").blur(function(){
var checkValue = $(this).val();
if(checkValue != '')
{
$(this).css("border","1px solid #eeeeee");
}
});
});
</script>
</body>
</html>

## get_response.php
<?php
require_once("config.php");
if((isset($_POST['your_name'])&& $_POST['your_name'] !='') && (isset($_POST['your_email'])&& $_POST['your_email'] !=''))
{
 require_once("contact_mail.php<strong>");
</strong>
$yourName = $conn->real_escape_string($_POST['your_name']);
$yourEmail = $conn->real_escape_string($_POST['your_email']);
$yourPhone = $conn->real_escape_string($_POST['your_phone']);
$comments = $conn->real_escape_string($_POST['comments']);

$sql="INSERT INTO contact_form_info (name, email, phone, comments) VALUES ('".$yourName."','".$yourEmail."', '".$yourPhone."', '".$comments."')";


if(!$result = $conn->query($sql)){
die('There was an error running the query [' . $conn->error . ']');
}
else
{
echo "Thank you! We will contact you soon";
}
}
else
{
echo "Please fill Name and Email";
}
?>
	<?php
	$host = "localhost";
	$userName = "fyrhp";
	$password = "RTDE";
	$dbName = "fyrhp";

	// Create database connection
	$conn = new mysqli($host, $userName, $password, $dbName);

	// Check connection
	if ($conn->connect_error) {
	die("Connection failed: " . $conn->connect_error);
	}
	?>
	<?php
	$toEmail = "[email protected]";
	$mailHeaders = "From: " . $_POST["your_name"] . "<". $_POST["your_email"] .">\r\n";
	if(mail($toEmail, $_POST["comments"], $_POST["your_phone"], $mailHeaders)) {
	echo"<p class='success'>Contact Mail Sent.</p>";
	} else {
	echo"<p class='Error'>Problem in Sending Mail.</p>";
	}
	?>
	!DOCTYPE html>
	<html>
	<head>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<style>

	#loading-img{
	display:none;
	}

	.response_msg{
	margin-top:10px;
	font-size:13px;
	background:#E5D669;
	color:#ffffff;
	width:250px;
	padding:3px;
	display:none;
	}

	</style>
	</head>
	<body>

	<div class="container">
	<div class="row">

	<div class="col-md-8">
	<h1><img src="Inquiry.png" width="80px">Easy Contact Form With Ajax MySQL</h1>
	<form name="contact-form" action="" method="post" id="contact-form">
	<div class="form-group">
	<label for="Name">Name</label>
	<input type="text" class="form-control" name="your_name" placeholder="Name" required>
	</div>
	<div class="form-group">
	<label for="exampleInputEmail1">Email address</label>
	<input type="email" class="form-control" name="your_email" placeholder="Email" required>
	</div>
	<div class="form-group">
	<label for="Phone">Phone</label>
	<input type="text" class="form-control" name="your_phone" placeholder="Phone" required>
	</div>
	<div class="form-group">
	<label for="comments">Comments</label>
	<textarea name="comments" class="form-control" rows="3" cols="28" rows="5" placeholder="Comments"></textarea>
	</div>

	<button type="submit" class="btn btn-primary" name="submit" value="Submit" id="submit_form">Submit</button>
	<img src="img/loading.gif" id="loading-img">
	</form>

	<div class="response_msg"></div>
	</div>
	</div>
	</div>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
	$("#contact-form").on("submit",function(e){
	e.preventDefault();
	if($("#contact-form [name='your_name']").val() === '')
	{
	$("#contact-form [name='your_name']").css("border","1px solid red");
	}
	else if ($("#contact-form [name='your_email']").val() === '')
	{
	$("#contact-form [name='your_email']").css("border","1px solid red");
	}
	else
	{
	$("#loading-img").css("display","block");
	var sendData = $( this ).serialize();
	$.ajax({
	type: "POST",
	url: "get_response.php",
	data: sendData,
	success: function(data){
	$("#loading-img").css("display","none");
	$(".response_msg").text(data);
	$(".response_msg").slideDown().fadeOut(3000);
	$("#contact-form").find("input[type=text], input[type=email], textarea").val("");
	}

	});
	}
	});

	$("#contact-form input").blur(function(){
	var checkValue = $(this).val();
	if(checkValue != '')
	{
	$(this).css("border","1px solid #eeeeee");
	}
	});
	});
	</script>
	</body>
	</html>
	<?php
	require_once("config.php");
	if((isset($_POST['your_name'])&& $_POST['your_name'] !='') && (isset($_POST['your_email'])&& $_POST['your_email'] !=''))
	{
	require_once("contact_mail.php<strong>");
	</strong>
	$yourName = $conn->real_escape_string($_POST['your_name']);
	$yourEmail = $conn->real_escape_string($_POST['your_email']);
	$yourPhone = $conn->real_escape_string($_POST['your_phone']);
	$comments = $conn->real_escape_string($_POST['comments']);

	$sql="INSERT INTO contact_form_info (name, email, phone, comments) VALUES ('".$yourName."','".$yourEmail."', '".$yourPhone."', '".$comments."')";


	if(!$result = $conn->query($sql)){
	die('There was an error running the query [' . $conn->error . ']');
	}
	else
	{
	echo "Thank you! We will contact you soon";
	}
	}
	else
	{
	echo "Please fill Name and Email";
	}
	?>