Skip to content Skip to sidebar Skip to footer
Home / Ajax / Html / Javascript / Jquery / Php

How To Make An Ajax Contact Form

Post a Comment
P.S. edited to remove unnecessary code Can you tell me what I'm doing wrong here? The error log doesn't show a thing. Here's my html, js, and php. sample.js sample.html sample.ph

Solution 1:

You chose a very complicated example. Here is a MUCH simpler AJAX contact form to learn from.

index.php

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="js/index.js"type="text/javascript"></script><!--  Whatever code you have above the contact form  --><!--  A very simple contact form --><divid="frmContact">
    Name: <inputid="name"type="text" />
    Email: <inputid="email"type="text" />
    Comment: <textareaid="comment"rows="4"cols="40"></textarea><buttonid="mybutt">Send</button></div>

index.js

$(document).ready(function(){
    $('#mybutt').click(function(){
        var na = $('#name').val();
        var em = $('#email').val();
        var cm = $('#comment').val();

        if (na=='' || em=='' || cm==''){
            alert("Please complete all fields");
            returnfalse;
        }

        $.ajax({
            type: 'post',
             url: 'your_php_ajax_file.php',
            data: 'na='+na+'&em='+em+'&cm='+cm,
            success: function(d){
                if (d.length) alert(d);
            }
        }); //END ajax
    }); //END #mybutt.click
});

your_php_ajax_file.php

<?phpfunctionsanitize($data) {
        return htmlentities(strip_tags(mysql_real_escape_string($data)));
    }

    // sanitize your inputs $na = sanitize($_POST['na']);
    $em = sanitize($_POST['em']);
    $cm = sanitize($_POST['cm']);

    $dt = date('Y-M-d H:i:s');

    $body = '
        <div style="width:100%;text-align:center;margin:0 0 30px 0;font-family:Arial;font-size:30px;font-weight:bold;">Website Contact Form</div>
        <div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$dt.'</div>
        <div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$na.'</div>
        <div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$em.'</div>
        <hr style="color:#cccccc;">
        <div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$cm.'</div>
    ';


    $headers = "";
    $headers .= "Content-type: text/html; charset=iso-8859-1\n";
    $headers .= "From: website@example.com\n";
    $headers .= "Organization: example.com\n";
    $headers .= "X-Priority: 3\n";
    $headers .= "X-Mailer: PHP". phpversion() ."\n" . PHP_EOL;
    $msg = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">';
    $msg .= $body;

    mail($to, $subject, $msg, $headers);
    mail('youremail@hotmail.com', 'Contat form', $msg, $headers);

    echo'Contact form sent';

Regarding AJAX, here are some good posts for getting the basics of AJAX:

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

NB: Note that the PHP AJAX processor code cannot be part of the same PHP file (e.g. index.php) that you are calling it from (or else it won't work and the entire page will be echoed back to you as the "ajax response")

Post a Comment for "How To Make An Ajax Contact Form"