slavapas
3/22/2017 - 8:15 AM

Simple Contact form using Jquery Ajax & PHP

Simple Contact form using Jquery Ajax & PHP.html

Simple Contact form using Jquery Ajax & PHP
http://www.otallu.com/tutorials/simple-contact-form-using-jquery-ajax-php/
-----------------------------------------------------
HTML
-----------------------------------------------------
<form method="post" class="myform" action="process-form.php">
    <input type="text" name="name" placeholder="Your Name" required><br>
    <input type="email" name="email" placeholder="Your Email" required><br>
    <textarea rows="4" cols="20" name="message" placeholder="Your Message"></textarea><br>
    <input type="submit" name="send" value="Send"> <span class="output_message"></span>
</form>

-----------------------------------------------------
CSS Code
-----------------------------------------------------
input[type=text], input[type=email], textarea {
    border:1px solid #ccc;
    padding:8px;
    margin:2px 0;
    font-size:13px;
    font-family:Arial, Helvetica, sans-serif;
    color:#8f8f8f;
    width:250px;
    border-radius:5px;
    box-shadow:inset 0 0 8px #e5e8e7;
}
input[type=submit] {
    border:none;
    padding:8px 25px;
    margin:2px 0;
    font-family:Arial, Helvetica, sans-serif;
    color:#fff;
    background:#0d7963;
    border-radius:5px;
    cursor:pointer;
}
input[type=submit]:hover {
    opacity:0.9;
}

-----------------------------------------------------
jQuery Code
-----------------------------------------------------
$(document).ready(function() {
    $('.myform').on('submit',function(){
         
        // Add text 'loading...' right after clicking on the submit button. 
        $('.output_message').text('Loading...'); 
         
        var form = $(this);
        $.ajax({
            url: form.attr('action'),
            method: form.attr('method'),
            data: form.serialize(),
            success: function(result){
                if (result == 'success'){
                    $('.output_message').text('Message Sent!');  
                } else {
                    $('.output_message').text('Error Sending email!');
                }
            }
        });
         
        // Prevents default submission of the form after clicking on the submit button. 
        return false;   
    });
});

-----------------------------------------------------
PHP Code
-----------------------------------------------------
if (isset($_REQUEST['name'],$_REQUEST['email'])) {
      
    $name = $_REQUEST['name'];
    $email = $_REQUEST['email'];
    $message = $_REQUEST['message'];
      
    // Set your email address where you want to receive emails. 
    $to = 'someaddress@example.com';
      
    $subject = 'Contact Request From Website';
    $headers = "From: ".$name." <".$email."> \r\n";
      
    $send_email = mail($to,$subject,$message,$headers);
      
    echo ($send_email) ? 'success' : 'error';
      
}