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";   
    }
   
}
?>


No comments :

Post a Comment

Leave A Comment...