Bagaimana Cara Menambahkan Kolom Alamat Autocomplete di Formulir WordPress?
Diterbitkan: 2023-02-06Ingin tahu bagaimana cara menambahkan formulir WordPress pelengkapan otomatis alamat ke situs web Anda? Maka, artikel ini adalah hal yang Anda butuhkan saat ini.
Jika formulir WordPress Anda memiliki bidang alamat, kami sarankan Anda menambahkan fitur pelengkapan otomatis ke dalamnya. Dengan cara ini, lebih mudah bagi pengguna Anda untuk mengisi bidang alamat dan berhasil mengirimkan formulir.
Itu sebabnya kami telah menyiapkan panduan terperinci tentang cara membuat formulir WordPress pelengkapan otomatis alamat. Jadi, baca sampai akhir.
Namun sebelum tutorial, mari kita bahas manfaat fitur pelengkapan otomatis alamat dan cara terbaik untuk menambahkannya ke formulir Anda.
Daftar isi
Bagaimana Opsi Pelengkapan Otomatis Alamat Bermanfaat dalam Formulir Online?
Anda bisa menggunakan bidang Alamat biasa untuk formulir WordPress apa pun. Jadi, mengapa menambahkan opsi pelengkapan otomatis alamat ke dalamnya?
Nah, berikut adalah beberapa cara signifikan opsi pelengkapan otomatis alamat sangat membantu:
- Bidang pelengkapan otomatis alamat secara otomatis menyarankan tempat kepada pengguna Anda berdasarkan masukan mereka.
- Pengguna dapat memilih alamat yang akurat dari daftar saran alamat yang tersedia.
- Karena pengguna tidak perlu mengetikkan alamat lengkap, mereka dapat mengisi formulir dengan relatif lebih cepat.
- Fitur pelengkapan otomatis membuat pengisian formulir menjadi mudah dan cepat. Ini dapat membantu meningkatkan pengiriman formulir yang berhasil dan mengurangi pengabaian formulir.
Oleh karena itu, sebaiknya sertakan bidang alamat pelengkapan otomatis di formulir Anda.
Namun, WordPress tidak menawarkan fitur ini secara default. Jadi, apa alternatif terbaik Anda?
Kami akan membahas cara terbaik untuk menambahkan bidang pelengkapan otomatis alamat di bagian berikutnya.
Cara Terbaik Membuat Formulir Alamat Autocomplete WordPress
Karena WordPress tidak mengizinkan penambahan fitur pelengkapan otomatis alamat secara default, Anda harus mengandalkan plugin.
Plugin WordPress yang tepat akan memungkinkan Anda menambahkan fitur ke formulir Anda tanpa kerumitan. Dan salah satu plugin tersebut adalah Everest Forms.
Plugin pembuat formulir drag-and-drop yang populer mungkin merupakan tambahan yang sempurna untuk situs web WordPress Anda.
Alat canggih ini melakukan semuanya! Ini memungkinkan Anda membuat formulir khusus tanpa menyentuh satu baris kode pun.
Anda dapat menggunakan 20+ bidang formulir untuk membuat formulir kontak, formulir permintaan cuti, formulir pemesanan, atau formulir apa pun yang Anda perlukan.
Selain itu, ia menawarkan bidang Alamat tempat Anda dapat mengaktifkan opsi pelengkapan otomatis dengan mudah. Karenanya, kami merekomendasikan plugin Formulir Everest sebagai cara terbaik untuk melengkapi formulir Anda dengan fitur ini.
Bagaimana Cara Menambahkan Kolom Alamat Autocomplete di Formulir WordPress?
Dalam tutorial ini, kami telah menggunakan Formulir Everest untuk mendemonstrasikan proses pembuatan formulir WordPress pelengkapan otomatis alamat.
Ikuti 7 langkah sederhana ini untuk menambahkan opsi pelengkapan otomatis alamat Google WordPress di formulir Anda.
Langkah 1: Instal dan Aktifkan Everest Forms Pro
Mulailah dengan menginstal dan mengaktifkan plugin Everest Forms Pro di situs Anda. Versi premium ini berfungsi di atas plugin Everest Forms inti gratis.
Dengan demikian, Anda harus menyiapkan plugin versi gratis dan premium agar fitur pelengkapan otomatis alamat berfungsi.
Catatan: Anda memerlukan versi premium karena add-on Geolokasi yang menyediakan fitur pelengkapan otomatis adalah ekstensi premium.
Ini tersedia di paket Plus dan di atasnya. Jadi, Anda harus membeli paket apa pun di antara Plus, Agensi, dan Profesional untuk mendapatkan add-on.
Kami memiliki panduan terpisah tentang cara menyiapkan Everest Forms Pro dengan benar di situs web Anda. Jadi, periksa apakah Anda memerlukan bantuan untuk menginstal dan mengaktifkan plugin.
Langkah 2: Instal dan Aktifkan Pengaya Geolokasi
Jika Anda telah menyiapkan Everest Forms Pro dengan benar, Anda seharusnya dapat mengakses semua add-on yang tersedia. Harap diingat bahwa add-on yang Anda dapatkan aksesnya bergantung pada paket yang telah Anda beli.
Jadi, buka Everest Forms >> Add-ons di dashboard WordPress Anda.
Gulir ke bawah untuk menemukan add-on Geolocation dan klik Install Addon . Untuk menyelesaikan instalasi, tekan tombol Activate sesudahnya.
Ini akan mengatur add-on untuk Anda gunakan di formulir WordPress Anda.
Langkah 3: Dapatkan Kunci API dari Google Console
Langkah ketiga adalah mendapatkan kunci API dari Google Console. Ini akan membantu Anda menghubungkan plugin Everest Forms ke Google Console.
Pertama, kunjungi Dasbor Google Console. Anda harus masuk melalui Akun Google Anda untuk mengakses dasbor ini.
Kemudian, pilih proyek Anda dari bagian atas dasbor.
Jika Anda belum memiliki proyek, Anda dapat membuatnya dengan mengeklik Proyek Baru . Selanjutnya, beri nama proyek Anda dan tekan Create .
Setelah Anda memilih proyek, Anda akan tiba di halaman API & Layanan untuk proyek tersebut.
Misalkan Anda tidak dialihkan secara otomatis ke halaman ini. Dalam hal ini, Anda dapat membukanya setiap tahun dari Menu Navigasi di kiri atas.
Tekan menu dan buka APIs & Services >> Enabled APIs & Services .
Di sini, klik +AKTIFKAN API DAN LAYANAN .
Di pustaka API, telusuri Places API dan Aktifkan .
Catatan: Agar berhasil mengaktifkan API, Anda harus memiliki akun penagihan. Jadi, aktifkan penagihan untuk Google Cloud Console Anda sebelum melanjutkan.
Setelah Anda mengaktifkan API, buka APIs & Services >> Credentials . Sekarang, klik +Create Credentials lalu pilih API Key .
Ini menghasilkan Kunci API baru untuk Anda. Tetapi sebelum Anda menyalin kunci API, Anda harus menambahkan beberapa batasan padanya. Untuk itu, klik Edit Key .
Pertama, Anda harus Menyetel batasan aplikasi . Ini memungkinkan Anda membatasi situs web, alamat IP, atau aplikasi mana yang dapat menggunakan kunci API. Dalam kasus kita, mari pilih Situs Web .
Selanjutnya, tambahkan situs web tempat kunci API akan valid dan tekan Selesai . Anda dapat menambahkan beberapa situs web jika perlu.
Setelah itu, Anda harus mengatur Pembatasan API dengan memilih tombol radio Restrict key . Ini memungkinkan kunci Anda mengetahui API mana yang diaktifkan yang dapat dipanggilnya.
Karena kita hanya membutuhkan Places API, mari kita pilih dari dropdown. Anda dapat mengaktifkan dan menambahkan lebih banyak API seperti Maps JavaScript API sesuai kebutuhan.
Terakhir, tekan tombol Simpan .
Yang harus Anda lakukan sekarang adalah menyalin kunci untuk digunakan nanti. Tetap aman karena Anda akan membutuhkannya untuk langkah selanjutnya.
Langkah 4: Tambahkan Kunci API ke Pengaturan Geolokasi
Kembali ke dasbor WordPress Anda, buka Everest Forms >> Settings >> Geolocation .
Tempel Kunci API yang Anda salin ke bidang Kunci API Google Places . Setelah itu, tekan tombol Simpan Perubahan .
Ini melengkapi koneksi antara Google Places API dan Everest Forms.
Ada satu opsi lagi, Current Location , di pengaturan Geolocation . Saat Anda mengaktifkan opsi ini, formulir Anda secara otomatis mendeteksi dan mengisi lokasi pengguna saat ini di bidang Alamat .
Ini sepenuhnya opsional, jadi apakah Anda mengaktifkannya atau tidak tergantung pada kebutuhan Anda.
Langkah 5: Buat Formulir Baru dengan Kolom Alamat
Anda berhasil menghubungkan Everest Forms ke Google Places API. Namun, Anda tetap memerlukan formulir yang dapat menerapkan fitur alamat pelengkapan otomatis.
Untuk itu, Anda harus membuat form WordPress baru dengan kolom Address .
Pertanyaannya adalah: jenis formulir apa yang Anda buat? Yah, itu sepenuhnya terserah Anda!
Hal terbaik tentang Formulir Everest adalah memungkinkan Anda membuat semua jenis formulir yang Anda butuhkan. Formulir kontak, formulir survei, formulir lamaran kerja, formulir reservasi, dan sebagainya.
Karenanya, buka Everest Forms >> Add New .
Formulir Everest menawarkan beberapa templat siap pakai untuk berbagai formulir. Dengan demikian, Anda dapat menyesuaikan salah satunya jika Anda kekurangan waktu.
Tapi mendesain formulir dari awal sama mudahnya! Cukup seret dan lepas bidang yang diperlukan dan sesuaikan.
Kami akan membuat formulir kontak sederhana dengan kolom alamat dari awal untuk panduan ini.
Jadi, klik Mulai dari Awal . Selanjutnya, masukkan judul formulir dan tekan Continue .
Ini membawa Anda ke pembuat formulir. Seperti yang Anda lihat, semua bidang formulir dikelompokkan bersama di sebelah kiri. Anda dapat menarik dan melepasnya ke baris formulir di sebelah kanan.
Jadi, tambahkan bidang apa pun yang Anda perlukan ke dalam formulir, seperti Name , Email , Subject , Message , dan yang paling penting, Address .
Ketika formulir WordPress pelengkapan otomatis alamat selesai, tekan tombol Simpan di bagian atas untuk menyimpan formulir baru Anda.
Langkah 6: Aktifkan Pelengkapan Otomatis Alamat untuk Bidang Alamat
Dengan setiap bidang, Anda mendapatkan banyak opsi penyesuaian. Demikian juga, Anda mendapatkan beberapa opsi untuk bidang Alamat , salah satunya adalah fitur pelengkapan otomatis alamat.
Meskipun kami berfokus pada bidang Alamat di sini, pastikan Anda juga menyesuaikan bidang lainnya.
Klik bidang yang ingin Anda edit; opsi penyesuaiannya akan terbuka di sebelah kiri.
Dari sini, Anda dapat mengubah field Label , Description , Field Visibility , dll. Anda juga dapat mengaktifkan Required , Enable Tooltip , Hide Label , dan menambahkan Kelas CSS .
Selain itu, Anda juga dapat menyetel logika bersyarat untuk masing-masing bidang.
Tapi mari kita kembali ke bidang sorotan kita di sini. Saat Anda mengklik bidang Alamat , Opsi Bidang menampilkan opsi serupa seperti yang telah kita bahas di atas.
Namun, Opsi Lanjutan mencakup beberapa fitur yang dikurasi untuk bidang Alamat .
Misalnya, Anda dapat mengubah Placeholder dan Nilai Default untuk Baris Alamat 1 , Baris Alamat 2 , Negara , dll. Plus, Anda dapat memilih negara mana yang ingin Anda sediakan untuk pengguna dari Daftar Negara Default .
Yang terpenting, Anda dapat mengaktifkan fitur pelengkapan otomatis alamat hanya dengan mencentang kotak centang.
Tekan tombol Simpan , dan bidang Alamat Anda akan secara otomatis menyarankan tempat kepada pengguna yang mengisi formulir.
Jika Anda ingin menampilkan Google Maps alih-alih alamat teks, Anda dapat memilih Maps dari dropdown Style . Pilih Alamat Dengan Peta untuk menampilkan keduanya.
Kami memiliki artikel tentang menambahkan Google Maps ke formulir Anda. Jadi, periksa itu jika Anda tertarik.
Langkah 7: Tampilkan Formulir WordPress Lengkapi Otomatis Alamat di Situs Anda
Selamat! Anda berada di langkah terakhir dari tutorial ini!
Karena formulir WordPress pelengkapan otomatis alamat sudah siap, Anda harus menambahkannya ke ujung depan situs web Anda.
Formulir Everest memungkinkan Anda melakukannya dalam beberapa langkah sederhana.
Mulailah dengan membuka halaman atau posting di mana Anda ingin menambahkan formulir WordPress.
Setelah Anda berada di editor Gutenberg, pilih tombol penyisip blok ( + ).
Cari blok Formulir Everest dan tambahkan ke halaman/posting dengan mengkliknya.
Selanjutnya, pilih formulir dengan kolom pelengkapan otomatis alamat dari dropdown. Ini secara otomatis menambahkan formulir ke halaman/posting.
Terakhir, tekan tombol Perbarui di bagian atas.
Anda juga dapat menambahkan formulir ke halaman/posting yang sama sekali baru. Cukup ikuti langkah yang sama dan tekan tombol Terbitkan di bagian akhir. Dan selesai!
Formulir WordPress pelengkapan otomatis alamat sekarang dapat diakses dari ujung depan ke pengguna Anda.
Membungkus
Seperti yang Anda ketahui sekarang, membuat formulir pelengkapan otomatis alamat Google WordPress sangatlah mudah. Terutama ketika Anda memiliki plugin Everest Forms.
Plugin luar biasa ini memungkinkan Anda menghubungkan formulir Anda ke Google Console dengan cepat. Jadi, pengguna Anda dapat dengan mudah mengisi kolom Alamat menggunakan fitur pelengkapan otomatis.
Tapi tahukah Anda? Everest Forms menawarkan lebih banyak hal.
Anda dapat menggunakannya untuk menyesuaikan template email, menjadwalkan pengiriman formulir, mengisi kolom formulir secara otomatis, dan banyak lagi.
Baca semua tentang plugin ini di blog kami. Lihat saluran YouTube kami untuk tutorial video yang mudah jika Anda seorang pembelajar visual.
Juga, ikuti di Twitter dan Facebook untuk pembaruan pada posting mingguan.