Hallo sahabat dumenity berjumpa lagi dalam tutorial dumetschool, pada tutorial kali ini saya akan membahas tentang Slide-In Contact Form Menggunakan JQuery. Dalam tutorial ini, mari kita lihat bagaimana membuat form kontak Slide-In menggunakan jQuery.  Dalam contoh ini, saya telah menunjukkan tombol kontak di bagian atas konten halaman. Pada event klik tombol ini, saya mengalihkan tampilan formulir kontak dengan efek geser dengan mengendalikan visibilitas elemen formulir menggunakan fungsi jQuery slideDown () dan slideUp ().

Saat pengguna memasukkan dan mengirimkan informasi kontak dengan menggeser formulir kontak, fungsi Ajax jQuery akan dipanggil. Fungsi ini memanggil file PHP untuk meminta pengiriman email kontak ke penerima yang ditentukan. Setelah menjalankan script mail, kode PHP akan merespon status mail terkirim. Setelah menunjukkan respons ini ke browser, formulir kontak akan meluncur ke atas. Dalam contoh ini, saya telah menggunakan fungsi mail in-built PHP. Teman – teman bisa mengganti script email PHP dengan kode pengiriman email menggunakan Gmail SMTP.

Slide-In Contact Form HTML

Di bawah kode HTML yang digunakan untuk membuat slide-in contact form. Kode ini berisi link tombol kontak yang akan memicu fungsi jQuery untuk menjalankan skrip geser. Setelah memasukkan kolom formulir, tombol kirim digunakan untuk memvalidasi input form kontak yang dimasukkan oleh pengguna dan meminta AJAX untuk meminta document PHP.

Slide Down / Up fungsi jQuery

Skrip jQuery ini digunakan untuk memanggil fungsi slideDown () dan slideUp () saat menampilkan form kontak toggling. Juga, saya telah menentukan kode untuk mengirimkan permintaan skrip  PHP pada formulir kirim. Saat mengirimkan formulir kontak, skrip email akan merespons permintaan AJAX. Respon ini akan digunakan untuk mengenali pengguna. Setelah mengenali pengguna, formulir kontak akan meluncur ke atas.

 

Oke untuk melihat hasilnya silahakan teman – teman coba sendiri, itulah tadi pembahasan saya tentang Slide-In Contact Form Menggunakan JQuery. Semoga bermanfat.