Membuat Form Kontak PHP dengan AJAX JQuery

Form kontak biasanya digunakan pada sebuah web untuk memberikan fitur komunikasi antara user dengan web admin atau pengelola web, hampir setiap web memiliki form kontak yang ditempatkan di menu khusus, biasanya form kontak ini seperti form pada email, iya memang fungsinya hampir mirip dengan email.

Form kontak php dengan ajax jquery ini tidak merefresh keseluruhan halaman web. Untuk yang biasa dengan ajax jquery mungkin tidak asing lagi, tapi buat kamu yang masih belajar bisa ikutin tutorialnya berikut ini.

JQuery Ajax Form Kode HTML


Silahkan tempatkan kode html untuk form kontak berikut di halaman web yang kamu buat.
<div id="frmKontak">
    <div id="mail-status"></div>
    <div>
        <label style="padding-top:20px;">Nama</label><span id="userName-info" class="info"></span><br/>
        <input type="text" name="userName" id="userName" class="demoInputBox">
    </div>
    <div>
        <label>Email</label><span id="userEmail-info" class="info"></span><br/>
        <input type="text" name="userEmail" id="userEmail" class="demoInputBox">
    </div>
    <div>
        <label>Subjek</label><span id="subject-info" class="info"></span><br/>
        <input type="text" name="subject" id="subject" class="demoInputBox">
    </div>
    <div>
        <label>Pesan</label><span id="content-info" class="info"></span><br/>
        <textarea name="content" id="content" class="demoInputBox" cols="60" rows="6"></textarea>
    </div>
    <div>
        <button name="submit" class="btnAction" onClick="kirimKontak();">Kirim</button>
    </div>
</div>
 

Kode Event Kirim Pesan JQuery Ajax


Untuk event pengiriman pesan, kamu tempatkan kode jquery berikut, pada tag javascript, untuk html standar biasanya ditempatkan diantara tag <body> dan </body>.
function kirimKontak() {
    var valid; 
    valid = validateContact();
    if(valid) {
        jQuery.ajax({
            url: "contact_mail.php",
            data:'userName='+$("#userName").val()+'&userEmail='+
            $("#userEmail").val()+'&subject='+
            $("#subject").val()+'&content='+
            $(content).val(),
            type: "POST",
            success:function(data){
                $("#mail-status").html(data);
            },
            error:function (){}
        });
    }
}

Form Validasi JQuery


Kemudian gunakan kode jquery berikut untuk form validasi, form vaidasi adalah untuk pengecekan field-field mandatory atau tidak, atau juga bisa tambahkan filter karakter, huruf atau angka untuk validasinya.
function validateContact() {
    var valid = true; 
    $(".demoInputBox").css('background-color','');
    $(".info").html('');
    if(!$("#userName").val()) {
        $("#userName-info").html("(required)");
        $("#userName").css('background-color','#FFFFDF');
        valid = false;
    }
    if(!$("#userEmail").val()) {
        $("#userEmail-info").html("(required)");
        $("#userEmail").css('background-color','#FFFFDF');
        valid = false;
    }
    if(!$("#userEmail").val().match(/^([w-.]+@([w-]+.)+[w-]{2,4})?$/)) {
        $("#userEmail-info").html("(invalid)");
        $("#userEmail").css('background-color','#FFFFDF');
        valid = false;
    }
    if(!$("#subject").val()) {
        $("#subject-info").html("(required)");
        $("#subject").css('background-color','#FFFFDF');
        valid = false;
    }
    if(!$("#content").val()) {
        $("#content-info").html("(required)");
        $("#content").css('background-color','#FFFFDF');
        valid = false;
    }
    return valid;
}

Kemudian tempatkan kode berikut untuk menampilkan pesan dari action form, apakah pesan yang dikirim berhasil atau tidak

<?php
    $toEmail = "admin@example.com";
    $mailHeaders = "From: " . $_POST["userName"] . "<". $_POST["userEmail"] .">rn";
    if(mail($toEmail, $_POST["subject"], $_POST["content"], $mailHeaders)) {
        print "<p class='success'>Pesan terkirim.</p>";
    } else {
        print "<p class='Error'>Ada masalah ketika mengirim pesan.</p>";
    }
?>

Untuk source code lengkapnya kamu bisa download di link berikut.

Form Contact PHP full || Form kontak php ajax jquery

loading...

LEAVE A REPLY

Please enter your comment!
Please enter your name here