Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 1]

Ukuran: px

Mulai penontonan dengan halaman:

Download "Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 1]"

Fanny Hartanto
7 tahun lalu
Tontonan:

Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 1] Oleh: Sendy PK Dalam sebuah website, form kontak sangat penting sebagai komunikasi antara admin dan pengunjung,namun form kontak juga

2 Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 1] Oleh: Sendy PK Dalam sebuah website, form kontak sangat penting sebagai komunikasi antara admin dan pengunjung,namun form kontak juga bisa rumit, terutama karena mereka biasanya pada halaman terpisah. Pengunjung harus mengunjungi halaman form kontak, mengisi rincian, melihat belum halaman respon lain, dan kembali ke hal... Dalam sebuah website, form kontak sangat penting sebagai komunikasi antara admin dan pengunjung,namun form kontak juga bisa rumit, terutama karena mereka biasanya pada halaman terpisah. Pengunjung harus mengunjungi halaman form kontak, mengisi rincian, melihat belum halaman respon lain, dan kembali ke halaman yang sebelumnya mereka kunjungi Untungnya, Ajax memberi kita cara mengatasi masalah ini. Dengan memasukannya pada halaman form, dan mengirimkan data melalui Ajax, pengunjung tidak harus meninggalkan halaman.

3 Pada tutorial ini, kita akan membuat form Ajax yang bagus untuk pengunjung dapat mengumpulkan dengan mengklik link di halaman. Mari kita mulai dengan HTML untuk halaman utamanya, kita akan menyembunyikan awalnya menggunakan JavaScript saat memuat halaman, dan juga beberapa konten lainnya dan link "Send us " yang akan menampilkan form ketika diklik: <!doctype html> <html lang="en"> <head> <title>a Slick Ajax Contact Form with jquery and PHP</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <div id="content"> <p style="padding-bottom: 50px; font-weight: bold; text-align: center;"><a href="#contactform">~ Send us an ~</a></p>  <p style="padding-top: 50px; font-weight: bold; text-align: center;"><a href="#contactform">~ Send us an ~</a></p> </div> <form id="contactform" action="processform.php" method="post"> <h2>send us an ...</h2> <ul> <li> <label for="sendername">your Name</label> <input type="text" name="sendername" id="sendername" placeholder="please type your name" required="required" maxlength="40" /> </li> <li> <label for="sender ">your Address</label> <input type=" " name="sender " id="sender " placeholder="please type your address" required="required" maxlength="50" /> </li> <li>

4 <label for="message" style="padding-top:.5em;">your Message</label> <textarea name="message" id="message" placeholder="please type your message" required="required" cols="80" rows="10" maxlength="10000"></textarea> </li> </ul> <div id="formbuttons"> <input type="submit" id="sendmessage" name="sendmessage" value="send " /> <input type="button" id="cancel" name="cancel" value="cancel" /> </div> </form> <div id="sendingmessage" class="statusmessage"><p>sending your message. Please wait...</p></div> <div id="successmessage" class="statusmessage"><p>thanks for sending your message! We'll get back to you shortly.</p></div> <div id="failuremessage" class="statusmessage"><p>there was a problem sending your message. Please try again.</p></div> <div id="incompletemessage" class="statusmessage"><p>please complete all the fields in the form before sending.</p></div> </body> </html> Form mengirimkan datanya ke script processform.php yang akan mengirimkan . Dengan menetapkan atribut form = action pada "processform.php", kita memastikan bahwa form yang dapat digunakan dengan JavaScript dinonaktifkan. Kemudian, JavaScript akan membaca atribut this = action sehingga tahu di mana untuk mengirim permintaan Ajax. Form itu sendiri menggunakan beberapa bentuk fitur HTML5 seperti placeholders,, the field type, dan atribut yang diperlukan untuk memastikan bahwa semua bidang telah diisi. Kita juga akan menambahkan validasi JavaScript untuk browser yang belum mendukung validasi HTML5. Pada Tutorial berikutnya kita akan menambahkan CSS agar tampilan Form menjadi lebih indah. Sampai ketemu di Tutorial Selanjutnya. Tentang Penulis

6 Sendy PK Saya adalah Programmer yang memiliki impian untuk menguasai dunia kunjungi situs pribadi saya di dan Online Shop saya di

dokumen-dokumen yang mirip

Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 5]

Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 5] Oleh: Sendy PK Sekarang kita telah menyiapkan form bukannya di-submit dengan cara yang biasa, itu akan memicu fungsi submitform () ketika