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.
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 email" yang akan menampilkan form ketika diklik:
A Slick Ajax Contact Form with jQuery and PHP <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
Sending your message. Please wait...
Thanks for sending your message! We'll get back to you shortly.
There was a problem sending your message. Please try again.
Please complete all the fields in the form before sending.
Form mengirimkan datanya ke script processForm.php yang akan mengirimkan email. 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 email 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
Sendy PK Saya adalah Programmer yang memiliki impian untuk menguasai dunia kunjungi situs pribadi saya di www.spk.my.id dan Online Shop saya di www.spkshop.web.id
