Widodo

Form Kontak dengan ajax

Selamat Siang para developer
Maaf baru sempet update s-widodo.com, oke untuk tutorial kali ini kita akan membuat sebuah form kontak dengan sedikit sentuhan ajax dan jqery. Sebeleumnya saya jelasin fungsi form kontak itu buat apa sih..

Form kontak  adalah salah satu bagian dari sebuah website dan digunakan sebagai media komunikasi yang nantinya mengirimkan pesan langsung ke email pemilik website, pada tutorail ini kami akan membuat sebuah form kontak dengan menggunakan ajax dan jquery untuk itu kita mulai dari membuat sebuah css terlebih dahulu.

1. Silahkan buatlah style atau cssnya bisa menggunakan css dibawah ini.

.form {background:#eeeeee; padding:20px; border-radius:5px; width:500px; margin:auto;}
.form  .input {display:table; width:80%}
.form  .input label {display:table;}
.form  .input .button {background:#333333; color:#ffffff; padding:10px 10px 10px 10px; width:100px; margin-top:10px;}
.form  .input input{background:#ffffff; border:solid 1px #cccccc; padding:5px;width:80%}
.form  .input textarea{background:#ffffff; border:solid 1px #cccccc; padding:5px;width:80%}
#success {margin:auto; width:500px; font-family:Arial, Helvetica, sans-serif; font-size:20px; text-align:center;
 background:#FF9900; color:#ffffff;}
span.error{display: block;font: 11px arial;color:red;line-height:22px;}

2. Sebelum menerapkan script ajax silahkan download atau cari jquery dibwah ini

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

3. Sekarang kita terapkan jquerynya sob seperti dibawah ini

$('document').ready(function(){//untuk membuat validasi
			$('#form').validate({
                    rules:{
                        "name":{
                            required:true,
                            maxlength:40
                        },

                        "email":{
                            required:true,
                            email:true,
                            maxlength:100
                        },

                        "message":{
                            required:true
                        }},

                    messages:{
                        "name":{
                            required:"Masukkan Nama Anda Dengan Benar"
                        },

                        "email":{
                            required:"Masukkan Email Anda",
                            email:"Masukkan email yang aktif"
                        },

                        "message":{
                            required:"Masukkan pesan anda"
                        }},

                    submitHandler: function(form){
                      $(form).ajaxSubmit({
        target: '#success', 
        success: function() { 
        $('#formbox').slideUp('fast'); 
        } 
    }); 
			} })
						
        });

5. Sekarang kita membuat form kontaknya seperti dibawah ini

<div id="success"></div>
<div id="formbox" class="form"> 
<form name="form" id="form" action="submit.php" method="post">

<div class="input">
<label>Nama</label>
<input type="text" name="name" class="" maxlength="40" />
</div>
<div class="input">
<label>Email</label>
<input type="text" name="email" class="" maxlength="100" />
</div>

<div class="input">
<label>Pesan</label>
<textarea name="message" rows="5" cols="45"></textarea>
</div>
<div class="input">
<input type="submit" class="button" value="Submit">
</div>
</form> 
</div> 

5. Oke tinggal terakhir buatlah document baru dengan nama submit.php dan sekarang kita buat script phpnya.

<?php
if($_SERVER["REQUEST_METHOD"] == "POST"){
$name=mysql_real_escape_string($_POST['name']);
$email=mysql_real_escape_string($_POST['email']);
$message=mysql_real_escape_string($_POST['message']);
if(strlen($name)>0 && strlen($email)>0 && strlen($message)>0)
{
// untuk menyisipkan table
echo "<h1>Success..!</h1>";
}}
?>

6. Selesai sob..

Download Demo



0 Komentar