PHP mail send using Ajax with Bootstrap form in Simple Steps.
PHP
Mail send: Please perform below simple steps for PHP Mail send.
1.
Copy HTML
code , if you don’t have HTML form code ready
2.
If no, Modify
HTML code provided here
3.
If you are
using this HTML code, then include below bootstrap framework files added in
<head> tag.
4.
Include
JQuery framework .js file
Look into this HTML code: Copy this HTML code if you need.
<!DOCTYPE
html>
<html lang="en">
<head>
<title>Mail Send Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post" id="testdriveform" name="testdrivefrm" class="contact-form clearfix">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<input type="text" id="fname" name="First Name" class="form-control input-lg" placeholder="Your Name*">
</div>
<div class="form-group">
<input type="test" id="cname" name="car Name" class="form-control input-lg" placeholder="Car / Vehicle Name for Test Drive*">
</div>
<div class="form-group">
<input type="email" id="email" name="email" class="form-control input-lg" placeholder="Email*">
</div>
<div class="form-group">
<input type="text" id="phone" name="phone" class="form-control input-lg" placeholder="Phone">
</div>
</div>
<div class="col-md-7">
<div class="form-group">
<textarea style="border-radius:0px" cols="6" rows="12" id="comments" name="comments" class="form-control input-lg" placeholder="Message"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<input id="submit" name="submit" type="button" onclick="submitform()" class="btn btn-primary btn-lg" value="Submit now!">
</div>
</div>
</form>
</body>
</html>
AJAX & JS Code: Copy this script below to the HTML code or wherever
you need inside script tag ( in case you are adding inside the HTML file.
<script>
function submitform()
{
fname = $("#fname").val();
em = $("#email").val();
msg = $("#comments").val();
capt = $("#g-recaptcha-response").val();
if (fname == "") {
alert("We need your name");
return false;
}
if (cname == "") {
alert("Please provide Car / Vehicle Name for Test
Drive");
return false;
}
if (em == "") {
alert("We need your email to contact you for Test
Drive");
return false;
}
if (msg == "") {
alert("Please provide your message to us");
return false;
}
var data = {
name: $("#fname").val(),
cname: $("#cname").val(),
email: $("#email").val(),
message: $("#comments").val()
};
$.ajax({
type: "POST",
url: "/cfiles_php/email.php",
data: data,
success: function(response) {
if (response !=
"") {
alert("Email has been
sent successfully")
}
}
});
}
</script>
PHP Code : (email.php)
if($_POST){ // TO identify ‘Post’
request from ajax
// always set content-type when sending HTML email
$headers = "MIME-Version:
1.0" . "\r\n"; // add Header
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n"; // Covert Text
To Plane Text
// More headers
$headers .= 'From:
<xpagedomino.phpscript@gmail.com>' . "\r\n";
$fname = $_POST['fname'];
$cname = $_POST['cname'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['msg'] ."-->".$phone;
$subject = "Car Name :
".$cname."-->".$_POST['subject'];
$googleKey=$_POST['capt'];
{
mail("receiver_mail_id@gmail.com", "New Message
from " .$email.":".$subject, $message , $headers);
echo "done";
}
}
?>
The Full PHP Mail Send Script is hear -
<!DOCTYPE
html>
<html lang="en">
<head>
<title>Mail Send Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post" id="testdriveform" name="testdrivefrm" class="contact-form clearfix">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<input type="text" id="fname" name="First Name" class="form-control input-lg" placeholder="Your Name*">
</div>
<div class="form-group">
<input type="test" id="cname" name="car Name" class="form-control input-lg" placeholder="Car / Vehicle Name for Test Drive*">
</div>
<div class="form-group">
<input type="email" id="email" name="email" class="form-control input-lg" placeholder="Email*">
</div>
<div class="form-group">
<input type="text" id="phone" name="phone" class="form-control input-lg" placeholder="Phone">
</div>
</div>
<div class="col-md-7">
<div class="form-group">
<textarea style="border-radius:0px" cols="6" rows="12" id="comments" name="comments" class="form-control input-lg" placeholder="Message"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<input id="submit" name="submit" type="button" onclick="submitform()" class="btn btn-primary btn-lg" value="Submit now!">
</div>
</div>
</form>
<script>
function submitform()
{
fname = $("#fname").val();
em = $("#email").val();
msg = $("#comments").val();
capt = $("#g-recaptcha-response").val();
if (fname == "") {
alert("We need your
name");
return false;
}
if (cname == "") {
alert("Please provide Car / Vehicle Name for Test
Drive");
return false;
}
if (em == "") {
alert("We need your email to contact you for Test
Drive");
return false;
}
if (msg == "") {
alert("Please provide your message to us");
return false;
}
var data = {
name: $("#fname").val(),
cname: $("#cname").val(),
email: $("#email").val(),
message: $("#comments").val()
};
$.ajax({
type: "POST",
url: "/email.php",
data: data,
success: function(response) {
if (response !=
"") {
alert("Email has been
sent successfully")
}
}
});
}
</script>
</body>
</html>
<?php
Add below PHP code
in new file and save it with name “email.php” in root directory:
if($_POST){
// Always set content-type when sending HTML email
$headers = "MIME-Version:
1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
// More headers
$headers .= 'From: <xpagedomino.phpscript@gmail.com>' . "\r\n"; /* This from name
will appear in mailbox as a sender from where you received this mail */
$fname = $_POST['fname'];
$cname = $_POST['cname'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['msg'] ."-->".$phone;
$subject = "Car Name :
".$cname."-->".$_POST['subject'];
{
mail("receiver_mail_id@gmail.com", "New Message
from " .$email.":".$subject, $message , $headers);
echo "done";
}
}
?>
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment