mail ajax

mail css

/*mail*/


.cf-msg {
    padding: 10px;
    text-align: center;
    margin-bottom: 30px;
}
.cf-msg p {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
    color: #fff;
    text-transform: capitalize;
}

mail form html

<div class="cf-msg"></div>
<form action="mail.php" method="post" id="cf">
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" placeholder="Name" id="fname" name="fname">
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" placeholder="Email" id="email" name="email">
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <input type="text" placeholder="Subject" id="subject" name="subject">
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <textarea class="contact-textarea" placeholder="Message" id="msg" name="msg"></textarea>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <button id="submit" class="cont-submit btn-contact" name="submit">SEND MESSAGE</button>
        </div>
    </div>
</form>

mail form js

/*---------------------
// Ajax Contact Form
--------------------- */

$('.cf-msg').hide();
    $('form#cf button#submit').on('click', function() {
        var fname = $('#fname').val();
        var subject = $('#subject').val();
        var email = $('#email').val();
        var msg = $('#msg').val();
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

        if (!regex.test(email)) {
            alert('Please enter valid email');
            return false;
        }

        fname = $.trim(fname);
        subject = $.trim(subject);
        email = $.trim(email);
        msg = $.trim(msg);

        if (fname != '' && email != '' && msg != '') {
            var values = "fname=" + fname + "&subject=" + subject + "&email=" + email + " &msg=" + msg;
            $.ajax({
                type: "POST",
                url: "mail.php",
                data: values,
                success: function() {
                    $('#fname').val('');
                    $('#subject').val('');
                    $('#email').val('');
                    $('#msg').val('');

                    $('.cf-msg').fadeIn().html('<div class="alert alert-success"><strong>Success!</strong> Email has been sent successfully.</div>');
                    setTimeout(function() {
                        $('.cf-msg').fadeOut('slow');
                    }, 4000);
                }
            });
        } else {
            $('.cf-msg').fadeIn().html('<div class="alert alert-danger"><strong>Warning!</strong> Please fillup the informations correctly.</div>')
        }
        return false;
    });

mail php

<?php

//Taking all values
$fname 		= $_POST['fname'];
$email 		= $_POST['email'];
$subject 	= $_POST['subject'];
$msg 		= $_POST['msg'];
$output 	= "Name: ".$fname."\n\nSubject: ".$subject."\n\nMessage: ".$msg;

$to 		= '[email protected]';
$headers	= 'FROM: "'.$email.'"';

$send		= mail($to, $fname, $output."\n\n***This message has been sent from me", $headers);