Cara Membangun Formulir WordPress AJAX (dalam 4 Langkah Mudah)

Apakah Anda ingin membuat formulir kontak AJAX di WordPress?

Formulir kontak AJAX memungkinkan pengguna untuk mengirimkan formulir tanpa memuat ulang halaman. Ini memungkinkan Anda untuk meningkatkan keterlibatan pengguna sambil menawarkan pengalaman pengiriman formulir yang lebih baik kepada pengguna Anda.

Ini sangat berguna ketika Anda menjalankan situs web eCommerce dan ingin mengumpulkan umpan balik pengguna tanpa mengalihkan perhatian pengguna.

Anda juga dapat menggunakan fungsionalitas AJAX yang sama untuk formulir kustom lainnya di situs web Anda. Misalnya, formulir login pengguna khusus akan memungkinkan pengguna untuk masuk tanpa memuat halaman tambahan.

Pada artikel ini, kami akan menunjukkan kepada Anda cara mudah membangun formulir kontak WordPress AJAX dengan instruksi langkah demi langkah.

Membuat formulir kontak Ajax di WordPress

Apa itu Ajax dan Mengapa Menggunakannya Untuk Formulir Anda?

Ajax, kependekan dari Asynchronous Javascript dan XML, adalah teknik pemrograman JavaScript yang memungkinkan pengembang untuk mentransfer data tanpa memuat ulang halaman.

Ini paling sering digunakan dalam formulir web yang memungkinkan pengguna untuk mengirimkan data formulir tanpa memuat ulang halaman. Ini membuat pengiriman formulir mudah dan cepat, yang meningkatkan pengalaman pengguna secara keseluruhan.

Aplikasi web seperti Gmail dan Facebook secara luas menggunakan teknik ini untuk membuat pengguna tetap terlibat sementara membuat semuanya berjalan mulus di latar belakang.

Anda juga dapat menggunakan Ajax untuk formulir WordPress Anda. Ini akan menyelamatkan pengguna dari memuat ulang halaman yang tidak perlu dan membuat mereka tetap terlibat pada halaman yang sedang mereka lihat.

Karena itu, mari kita lihat bagaimana cara membuat formulir kontak WordPress Ajax dengan mudah dalam 4 langkah sederhana.

1. Instal Plugin WPForms

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan WPForms plugin. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami di cara menginstal plugin WordPress.

WPForms adalah yang terbaik Plugin form builder WordPress di pasar. Hal ini memungkinkan Anda untuk dengan mudah membuat formulir bertenaga Ajax juga.

Setelah aktivasi, Anda perlu mengunjungi WPForms »Pengaturan halaman untuk memasukkan kunci lisensi Anda.

Kunci lisensi WPForms

Setelah memasukkan kunci lisensi, Anda akan dapat menerima pembaruan otomatis dan menginstal pengaya.

Anda sekarang sudah siap untuk membuat formulir ajax yang indah di WordPress.

2. Buat Formulir Pertama Anda

Ayo lanjutkan dan buat formulir pertama Anda.

Cukup kunjungi WPForms »Tambah Baru halaman di area admin WordPress. Anda akan diminta untuk memberikan judul untuk formulir Anda dan memilih templat sebagai titik awal.

Pilih Templat formulir

Demi tutorial ini, kita akan menjadi membuat formulir kontak. Namun Anda dapat membuat jenis formulir apa pun yang Anda butuhkan.

WPForms sekarang akan memuat formulir Anda dengan bidang dasar yang sudah ditambahkan ke dalamnya. Anda cukup mengarahkan dan mengklik bidang formulir apa saja untuk mengeditnya.

Mengedit kolom formulir di WPForms

Anda juga bisa menambahkan bidang formulir baru dari kolom kiri hanya dengan mengkliknya. Bidang baru akan muncul di bagian bawah formulir Anda tepat di atas tombol kirim.

Klik untuk menambahkan bidang formulir baru

Anda dapat dengan mudah menyeret dan melepaskan bidang formulir untuk memindahkannya ke atas dan ke bawah dalam formulir.

Setelah selesai mengedit formulir, Anda dapat melanjutkan ke langkah berikutnya.

3. Aktifkan Fitur Pengajuan Formulir Ajax

WPForms tidak mengaktifkan pengiriman formulir Ajax secara default. Anda harus mengaktifkannya secara manual untuk formulir Anda.

Cukup beralih ke tab Pengaturan di pembuat formulir dan centang kotak di sebelah opsi ‘Aktifkan pengiriman formulir AJAX’.

Aktifkan fungsi formulir Ajax

Mencentang kotak akan mengaktifkan fungsi Ajax untuk formulir ini.

Sekarang mari kita siapkan apa yang terjadi setelah pengiriman formulir.

Pertama, beralihlah ke tab ‘Konfirmasi’ di bawah pengaturan. Di sinilah Anda memberi tahu pengguna Anda bahwa Anda telah menerima pengiriman formulir mereka.

Pengaturan konfirmasi

WPForms memungkinkan Anda melakukannya dengan cara yang berbeda. Misalnya, Anda dapat mengarahkan pengguna ke URL, menunjukkan kepada mereka halaman tertentu, atau hanya menampilkan pesan di layar.

Karena kami telah mengaktifkan fungsionalitas Ajax untuk formulir, mengarahkan pengguna ke halaman lain akan mengalahkan tujuan membuat formulir Ajax.

Anda perlu memilih opsi pesan dan mengedit pesan konfirmasi. Jangan ragu untuk menggunakan bilah alat pemformatan pada editor atau tambahkan satu atau dua tautan untuk memberi tahu pengguna ke mana harus pergi berikutnya.

Setelah itu, Anda dapat mengatur bagaimana Anda ingin diberitahu tentang pengiriman formulir.

Beralih ke tab Pemberitahuan di pengaturan formulir dan konfigurasikan pengaturan email pemberitahuan.

Membentuk pengaturan email notifikasi

Setelah selesai, Anda bisa menyimpan formulir dan keluar dari pembangun formulir.

4. Tambahkan Formulir Ajax Anda Diaktifkan di WordPress

WPForms membuatnya sangat mudah untuk menambahkan formulir ke posting WordPress Anda, halaman, dan widget sidebar.

Cukup edit posting atau halaman tempat Anda ingin menambahkan formulir dan masukkan blok WPForms ke area konten Anda.

Tambahkan blok WPForms ke posting atau halaman WordPress

Setelah itu, Anda perlu memilih formulir yang baru saja Anda buat dari pengaturan blok. WPForms akan segera memuat pratinjau langsung formulir di editor konten.

Pilih formulir Anda

Anda sekarang dapat menyimpan atau mempublikasikan konten Anda dan kemudian mengunjungi situs web Anda untuk menguji fungsionalitas ajax formulir.

Pratinjau formulir kontak Ajax

Anda juga dapat menambahkan formulir Anda ke widget bilah sisi di WordPress. Untuk melakukannya, buka Penampilan »Widget halaman dan tambahkan widget WPForms ke sidebar.

Tambahkan formulir bertenaga ajax Anda ke widget bilah sisi

Pilih formulir yang Anda buat sebelumnya dan klik tombol Simpan untuk menyimpan pengaturan widget. Anda sekarang dapat mengunjungi situs web Anda untuk melihat formulir bertenaga Ajax Anda beraksi.

Kami harap artikel ini membantu Anda mempelajari cara membuat formulir kontak WordPress Ajax untuk situs web Anda. Anda mungkin juga ingin melihat panduan kami cara membuat popup formulir kontak di WordPress.

Jika Anda menyukai artikel ini, silakan berlangganan artikel kami Saluran Youtube untuk tutorial video WordPress. Anda juga dapat menemukan kami di Kericau dan Facebook.

.

Sumber Artikel

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *