Cara Membuat Formulir Alamat Autocomplete Google Maps

Apakah Anda ingin mempelajari cara membuat formulir alamat pelengkapan otomatis Google Maps?

Menambahkan bidang alamat pelengkapan otomatis ke formulir situs web Anda meningkatkan pengalaman pengguna, menghemat waktu, dan memvalidasi alamat yang dikirimkan dengan menggunakan kecanggihan Google Maps.

Jadi dalam tutorial ini, kami akan memandu Anda melalui panduan langkah demi langkah tentang cara membuat formulir alamat pelengkapan otomatis Google Maps – tanpa menyulap kode HTML khusus apa pun!

Buat Formulir Alamat Pelengkapan Otomatis Anda Sekarang

Berikut daftar isi jika Anda ingin melompat ke depan:

1. Instal Plugin WPForms
2. Aktifkan Addon Geolokasi
3. Konfigurasikan Pengaturan Geolokasi
4. Buat Formulir Alamat Pelengkapan Otomatis Google Maps
5. Tambahkan Bidang Alamat ke Formulir Anda
6. Aktifkan Fitur Pelengkapan Otomatis Alamat
7. Tambahkan Formulir Alamat Pelengkapan Otomatis Google Maps Anda ke Situs WordPress Anda

Bagaimana Cara Membuat Formulir Alamat Pelengkapan Otomatis Google Maps?

Ingin tahu bagaimana cara menggunakan fitur pelengkapan otomatis alamat Google Maps? Pelengkapan otomatis alamat adalah salah satu fitur canggih di Google Maps. Anda dapat menambahkan pelengkapan otomatis ke formulir kontak WordPress Anda untuk membuatnya lebih mudah untuk diisi.

Menyematkan fitur pelengkapan otomatis alamat Google Maps ke dalam formulir kontak memerlukan pengetahuan pengkodean sebelumnya. Tetapi jika Anda menggunakan plugin pembuat formulir seperti WPForms, Anda dapat melakukan proses dalam beberapa langkah dan tanpa coding.

WPForms Pro menyertakan addon Geolokasi yang kuat yang dilengkapi dengan fitur pelengkapan otomatis alamat yang sudah dibuat sebelumnya. Fitur ini secara otomatis menemukan dan secara otomatis menyarankan lokasi pengguna Anda saat mereka mengisi dan mengetik alamat mereka.

Selanjutnya, dengan addon Geolocation, Anda dapat menambahkan peta ke formulir kontak WordPress Anda dan memungkinkan pengguna Anda untuk menambahkan lokasi dengan menyesuaikan pin pada peta.

Mari kita lihat cara membuat formulir alamat pelengkapan otomatis Google Maps dengan WPForms dan addon Geolokasi.

Langkah 1: Instal Plugin WPForms

Hal pertama yang harus Anda lakukan adalah menginstal plugin WPForms. Setelah WPForms diinstal, klik tombol aktifkan.

Jika Anda baru mengenal WordPress atau menghadapi kesulitan selama proses instalasi plugin, Anda dapat memeriksa panduan langkah demi langkah tentang cara menginstal plugin WordPress.

Langkah 2: Aktifkan Addon Geolokasi

Setelah WPForms diinstal, Anda dapat mengaktifkan addon Geolokasi .

Sekarang untuk mengaktifkan addon, buka dasbor WordPress Anda dan klik WPForms »Addons.

Di bilah pencarian, ketik Geolocation dan tekan untuk Aktifkan.

Langkah 3: Konfigurasikan Pengaturan Geolokasi

Setelah Anda mengaktifkan addon Geolokasi, Anda perlu mengonfigurasi pengaturannya. Untuk melakukan ini, klik WPForms »Pengaturan.

Pada halaman pengaturan WPForms, klik Geolokasi dari tab di bagian atas.

Di sini Anda akan melihat opsi berbeda untuk mengonfigurasi addon Geolokasi:

• Penyedia Tempat : Anda mendapatkan opsi untuk memilih penyedia mana yang Anda inginkan untuk menerima informasi geolokasi Anda. Di sini kita akan memilih Google Places API sebagai penyedia tempat kita.

• Lokasi Saat Ini : Aktifkan opsi ini untuk memungkinkan lokasi pengguna Anda diisi sebelumnya ke dalam formulir.

• Google Places API : Untuk mengaktifkan fitur alamat pelengkapan otomatis dan menampilkan Google Maps dalam formulir Anda, Anda harus membuat Kunci API dan menghubungkannya dengan WPForms.

Mari kita lihat proses lengkap pembuatan kunci API.

Hasilkan Kunci API Dari Konsol Pengembang Google

Buka Konsol Pengembang Google dan pilih proyek dari menu Pilih Proyek di bagian atas. Jika Anda tidak memiliki proyek yang dibuat sebelumnya, klik Proyek Baru untuk membuat yang baru.

Setelah Anda berhasil membuat proyek baru, klik Aktifkan API dan Layanan.

Ini akan membuka Perpustakaan Google API.

Dari sini, Anda harus mengaktifkan tiga 3 API:

1. API Geocoding
2. Peta JavaScript API
3. Tempat API

Pustaka API ini menyediakan opsi pencarian yang mudah; ketik nama API di kotak pencarian, buka API Anda dan klik tombol AKTIFKAN .

Setelah Anda mengaktifkan semua API, kembali ke dasbor Google Console dan navigasikan tab Kredensial .

Klik tombol Buat Kredensial di bagian atas dan pilih opsi kunci API .

Munculan dengan kunci API akan terbuka. Klik pada opsi RESTRICT KEY di sudut kanan bawah pop-up.

Halaman baru akan terbuka, di mana Anda harus mengonfigurasi pengaturan berikut:

• Batasan Aplikasi: Dari sini, Anda dapat memilih situs web, alamat IP, atau aplikasi mana yang dapat Anda gunakan kunci API. Di sini Anda harus memilih opsi Perujuk HTTP untuk mengizinkan Kunci Anda digunakan dalam situs web Anda.

• Pembatasan Situs Web: Setelah Anda memilih Perujuk HTTP, opsi baru akan ditampilkan, pembatasan situs web . Di sini Anda perlu menambahkan nama domain situs web Anda untuk membatasi Kunci API agar hanya digunakan oleh situs web tertentu.

• Pembatasan API: Setelah membatasi Kunci menurut Aplikasi dan Situs Web, Anda harus membatasi Kunci menurut API. Untuk melakukan ini, klik opsi Batasi kunci .

Ini akan membuka dropdown dengan beberapa opsi API. Pilih API berikut dari tarik-turun:

• Tempat API
• Peta JavaScript API
• Geocoding AP

Setelah Anda selesai memilih API, klik tombol Simpan untuk menyimpan pengaturan Anda.

Mengklik tombol simpan akan mengarahkan kembali Anda ke halaman Kredensial . Salin Kunci Anda dari halaman dan kembali ke pengaturan WPForms Anda.

Di pengaturan WPForms Anda, rekatkan ini ke bidang Kunci API di bawah Google Places API dan klik tombol Simpan Pengaturan .

Besar! Sekarang mari kita lanjutkan dan tambahkan fitur alamat pelengkapan otomatis ke formulir Anda.

Langkah 4: Buat Formulir Alamat Pelengkapan Otomatis Google Maps

Sekarang setelah kita selesai dengan pengaturan API, saatnya membuat formulir alamat pelengkapan otomatis Google Maps.

Untuk itu, pertama-tama kita perlu membuat form baru menggunakan WPForms. Buka WPForms »Tambah Baru untuk membuat formulir baru.

Pada layar penyiapan, tambahkan nama ke formulir Anda dan pilih templat yang ingin Anda gunakan. WPForms menyertakan pustaka templat besar yang dibuat sebelumnya yang terdiri dari 300+ templat formulir yang indah.

Anda dapat memilih template apa saja dan menggunakannya di situs web Anda.

Di sini kita akan memilih template Formulir Kontak Sederhana . Klik pada templat untuk melihatnya langsung di dasbor pembuat formulir.

Di bawah ini Anda dapat memeriksa dasbor pembuat formulir WPForms. Dari pembuat ini, Anda dapat menambahkan bidang tambahan ke formulir kontak Anda.

Langkah 5: Tambahkan Bidang Alamat ke Formulir Anda

Sekarang setelah formulir kita siap, kita hanya perlu menambahkan Bidang Alamat.

Di sebelah kiri, dari bagian Bidang Mewah , seret Bidang Alamat dan letakkan di formulir Anda.

Bidang Alamat sudah menyertakan teks label dan sub-label untuk kemudahan Anda. Anda mendapatkan fleksibilitas untuk:

• Sesuaikan teks label
• Pilih format skema untuk bidang alamat
• Sesuaikan ukuran bidang
• Sembunyikan label
• Sembunyikan sub-label

Langkah 6: Aktifkan Fitur Pelengkapan Otomatis Alamat

Untuk mengaktifkan Fitur Pelengkapan Otomatis Alamat , buka tab Lanjutan pada bidang Alamat.

Gulir ke bawah hingga Anda melihat kotak centang dengan opsi Aktifkan Pelengkapan Otomatis Alamat .

Centang kotak untuk mengaktifkan Pelengkapan Otomatis Alamat di formulir Anda. Mengizinkan ini akan membuka satu fitur lagi: Tampilan Peta. Jika Anda ingin menampilkan peta dengan kontak Anda, centang opsi ini juga.

Klik tombol Simpan di bagian atas untuk menyelesaikan semuanya.

Langkah 7: Tambahkan Formulir Alamat Pelengkapan Otomatis Google Maps Anda ke Situs WordPress Anda

Sekarang formulir alamat pelengkapan otomatis Anda sudah siap, saatnya untuk menambahkannya ke situs web Anda.

WPForms memungkinkan Anda untuk menambahkan formulir Anda di beberapa lokasi, termasuk halaman, posting blog, dan bahkan widget bilah sisi situs web Anda.

Sebelum menyematkan formulir Anda ke halaman, jika Anda mau, Anda dapat memeriksa bagaimana formulir Anda akan terlihat di halaman langsung. Untuk melihat pratinjau formulir Anda, klik tombol Pratinjau di bagian atas.

Mari tambahkan formulir alamat pelengkapan otomatis Google Maps ke halaman Anda.

Buat halaman baru atau buka halaman yang sudah ada di situs WordPress. Klik ikon "+" dan tambahkan blok WPForms dari editor blok.

Pilih formulir Anda dan publikasikan halaman.

Pekerjaan yang luar biasa! Anda telah berhasil membuat formulir alamat pelengkapan otomatis Google Maps.

Selanjutnya, Lacak Konversi Formulir WordPress Anda

Dan itu dia! Dengan addon Geolocation WPForms, Anda dapat dengan mudah mengaktifkan fitur alamat pelengkapan otomatis di formulir kontak situs web Anda dan meningkatkan pengalaman pengunjung Anda.

Buat Formulir Alamat Pelengkapan Otomatis Anda Sekarang

Setelah membuat formulir alamat pelengkapan otomatis Google Maps, Anda mungkin tertarik untuk melacak sumber yang mendatangkan lalu lintas dan prospek ke situs web Anda. Untuk mempelajari lebih lanjut, lihat tutorial terperinci kami tentang cara melacak sumber utama di WordPress.

Selanjutnya, Anda mungkin tertarik untuk memeriksa trik sederhana untuk menghilangkan pendaftaran pengguna spam.

Jadi, apa yang Anda tunggu? Mulailah dengan plugin formulir WordPress paling kuat hari ini.

Dan jangan lupa, jika Anda menyukai artikel ini, silakan ikuti kami di Facebook dan Twitter.