Bagaimana Cara Menambahkan Google Maps ke Formulir Kontak WordPress?

Diterbitkan: 2022-05-30

Jika Anda mencari cara terbaik untuk menambahkan Google Maps ke formulir kontak WordPress, artikel ini adalah panduan sempurna untuk Anda.

Menambahkan Google Maps ke formulir kontak membantu Anda melacak lokasi pengguna Anda. Dan Anda dapat menggunakan data ini untuk meningkatkan tingkat percakapan Anda, melakukan kampanye pemasaran yang efektif, dll.

Jadi, dalam panduan ini, Anda akan belajar menambahkan Google Maps ke formulir kontak WordPress dengan cara yang paling efektif.

Namun sebelum itu, mari kita pahami mengapa Anda harus menambahkan Google Maps di formulir kontak.

Daftar isi

Mengapa Menambahkan Google Maps di Formulir Kontak?

Menambahkan Google Maps ke formulir kontak membantu situs web Anda berkembang dalam berbagai cara.

Pertama-tama, ini memungkinkan Anda untuk mengumpulkan data mengenai lokasi pengguna Anda. Jadi, di masa depan, Anda dapat menargetkan pelanggan dan pengguna tertentu sambil memasarkan merek Anda.

Selain itu, mengetahui lokasi pengguna Anda meningkatkan penargetan geolokasi Anda dan Anda dapat menampilkan konten yang dipersonalisasi kepada mereka. Ini, pada gilirannya, secara drastis meningkatkan prospek Anda, tingkat konversi, dan meningkatkan pendapatan situs web Anda.

Jadi, ini adalah beberapa manfaat utama menambahkan Google Maps ke formulir kontak. Sekarang, mari kita tahu cara terbaik untuk melakukannya.


Cara Terbaik untuk Menambahkan Google Maps ke Formulir Kontak WordPress

Anda dapat menambahkan Google Maps ke formulir kontak Anda menggunakan plugin Google Maps WordPress. Atau, Anda dapat menggunakan plugin formulir yang mendukung integrasi Google Maps. Ada banyak plugin seperti itu yang tersedia di pasar WordPress.

Tapi, yang menonjol dari yang lain adalah Everest Forms, plugin pembuat formulir WordPress yang kuat.

Mengapa Everest Berbentuk? Yah, ini adalah plugin serbaguna yang memiliki fitur dan fungsionalitas yang luas. Dan ini adalah solusi lengkap untuk membangun bentuk apa pun. Formulir donasi, formulir lamaran pekerjaan, formulir pemesanan hotel; sebut saja!

Selain itu, ia memiliki antarmuka yang ramah pengguna. Oleh karena itu, Anda dapat membuat semua jenis formulir dengan metode drag-and-drop sederhana.

Yang terpenting, ia menawarkan add-on Geolokasi yang memungkinkan Anda mengumpulkan data lokasi pengguna Anda melalui formulir. Anda bisa mendapatkan data pengguna Anda seperti Negara, Kota, Kode Pos, dan Lintang/Bujur berdasarkan alamat IP mereka.

Dengan menggunakan add-on yang sama, Anda dapat menambahkan peta ke formulir kontak Anda di front-end.

Dan sejauh ini, telah berhasil mengumpulkan 100000+ kepercayaan pengguna. Jadi pasti, ini adalah salah satu opsi plugin terbaik untuk menambahkan Google Maps ke formulir kontak WordPress.


Menambahkan Google Maps ke Formulir Kontak WordPress dengan Formulir Everest

Cukup mudah untuk menambahkan Google Maps ke formulir kontak Anda. Cukup ikuti langkah-langkah yang telah kami jelaskan di bawah dan Anda akan memiliki formulir kontak WordPress dengan Google Maps dalam waktu singkat.

1. Instal dan Aktifkan Everest Forms Pro dan Geolocation Add-on

Pertama-tama, izinkan kami mengklarifikasi bahwa Anda perlu membeli plugin premium, apa pun plugin yang Anda gunakan untuk menambahkan Google Maps ke formulir kontak Anda.

Demikian pula, Anda juga perlu membeli paket premium Everest Forms untuk mengakses fitur ini. Tapi jangan khawatir; paket premium plugin ini hadir dengan harga terjangkau.

Jadi, Anda dapat membeli paket premiumnya dengan mengunjungi situs resminya WPEverest.

Kemudian , baca artikel ini untuk menginstal dan mengaktifkan Everest Forms Pro .

Sekarang, kami yakin Anda telah berhasil mengaktifkan Everest Forms Pro. Jadi untuk mengaktifkan add-on Geolocation, buka bagian Everest Forms >> Add-ons di dashboard WordPress Anda.

Addons Bentuk Everest

Dengan menggulir ke bawah, Anda akan melihat add-on Geolokasi , lalu klik opsi Instal Add-on .

Addon Geolokasi

Kemudian, tekan tombol Aktifkan .

Mengaktifkan Addon Geolokasi

2. Siapkan Pengaya Geolokasi

Sekarang setelah Anda berhasil mengaktifkan add-on Geolokasi, saatnya untuk membuat kunci API (Application Programming Interface).

Secara umum, API menghubungkan satu program ke program lain dan mengontrol permintaan yang dibuat di antara program-program ini. Padahal, kunci API menghubungkan program-program ini satu sama lain untuk berbagi data dan terhubung ke sistem.

I. Hasilkan Kunci API dari Google Console

Ingatlah bahwa, Anda memerlukan akun penagihan untuk menghasilkan kunci API dari Google Console untuk menambahkan Google Maps ke formulir kontak Anda. Jadi kunjungi halaman penagihan resmi mereka untuk mendapatkannya.

Sekarang, setelah membeli akun penagihan, buka dasbor Google Console Anda. Kemudian, klik Proyek Pertama Saya .

Menambahkan Proyek di Google Console

Setelah itu pilih Proyek Baru .

Menambahkan Proyek Baru

Kemudian, tekan menu hamburger di sisi kiri dasbor Anda dan klik APIs & Services .

API dan Layanan

Setelah itu, API Library akan terbuka, dan dari sini, tekan tombol + ENABLE APIS AND SERVICES .

Aktifkan API dan Layanan

Setelah mengaktifkannya, Anda akan diarahkan ke halaman baru tempat Anda perlu mencari opsi Places API .

Mencari Tempat API

Setelah Anda menemukannya, klik di atasnya dan kemudian, tekan tombol AKTIFKAN .

Mengaktifkan API Tempat

Saat Anda mengaktifkannya, klik menu hamburger yang akan muncul di bagian atas sisi kiri Anda. Kemudian, navigasikan ke API & Layanan >> Kredensial.

Kredensial Konsol Google

Kemudian, klik pada bagian + BUAT KREDENSIAL . Dan dari sini, pilih opsi kunci API untuk menghasilkan kunci API.

Membuat Kredensial dan API

Sekarang, kunci API akan muncul di jendela pop-up. Yang perlu Anda lakukan hanyalah menyalinnya.



II. Tambahkan Kunci API ke Pengaturan Geolokasi di Formulir Everest

Sekarang, kembali ke dashboard WordPress Anda dan tambahkan API Key ke Geolocation Settings di Everest Forms.

Setelah menyalin kunci, kembali ke dasbor WordPress Anda. Arahkan ke Formulir Everest >> Pengaturan , dan klik opsi Geolokasi dari atas.

Pengaturan Geolokasi

Di sini, Anda akan melihat opsi Google Places API Key di mana Anda perlu menempelkan kunci API Anda, yang telah Anda salin sebelumnya. Setelah itu, tekan tombol Simpan Perubahan di bawah ini.

Menempelkan Kunci API Google Place

3. Buat Formulir Kontak Baru

Sekarang setelah Anda membuat API dan menambahkannya ke situs web Anda, saatnya membuat formulir kontak.

Membuat formulir kontak dengan Everest Forms adalah hal yang mudah. Pertama, buka dashboard WordPress Anda, dan klik Everest Forms >> Add New .

Menambahkan Formulir Baru

Everest Forms menawarkan serangkaian templat yang dapat Anda gunakan dengan satu klik tombol atau buat formulir Anda dari awal.

Di sini, kami akan membuat formulir dari awal, dan kami menamakannya Formulir Kontak .

Membuat Formulir Kontak

Kemudian, Anda dapat menarik dan melepas bidang di formulir kontak Anda dari bagian Tambahkan Bidang .

Membangun Formulir Kontak dengan Formulir Everest

Selain itu, dengan Everest Forms, Anda dapat mengubah Field Label , Meta Key , Description , dll. Dan untuk melakukannya, klik bidang formulir apa pun dan buka Opsi Bidang dan buat perubahan.

Opsi Bidang Bentuk Everest

Jika Anda memerlukan bantuan lebih lanjut tentang proses pembuatan formulir, baca artikel kami tentang cara membuat formulir kontak menggunakan Formulir Everest.

Setelah semua penyesuaian yang diperlukan, pastikan Anda menyimpannya dengan mengklik tombol Simpan di bagian atas. Anda juga dapat Pratinjau seperti apa formulir Anda di bagian depan.


4. Tambahkan Bidang Alamat Google Maps ke Formulir Anda

Pertama, Anda perlu menambahkan bidang Alamat di formulir kontak Anda untuk menambahkan fitur alamat Google Maps di formulir kontak Anda.

Jadi, buka bagian Add Fields , dan gulir ke bawah ke Advanced Fields .

Opsi Bidang Lanjutan Bentuk Everest

Dan kemudian, tambahkan bidang Alamat ke formulir kontak Anda.

Menambahkan Bidang Alamat

Setelah itu, klik pada bidang Alamat di sebelah kanan untuk membuka Opsi Lanjutannya di panel kiri.

Opsi Lanjutan

Secara default, formulir menampilkan alamat teks. Karena kita perlu menambahkan peta ke formulir alih-alih alamat teks, ubah opsi Gaya ke Peta dari dropdown.

Menambahkan Peta di Bidang Kontak

Ini menambahkan peta dan Baris Alamat 1 ke formulir kontak. Saat pengguna memilih tempat di peta, bidang alamat di bawah ini otomatis terisi dengan lokasi yang dipilih.

Itu dia! Anda telah berhasil menambahkan Google Maps ke formulir kontak WordPress menggunakan Formulir Everest!


5. Publikasikan Formulir WordPress

Setelah Anda menyelesaikan semua langkah di atas, saatnya untuk mempublikasikan formulir kontak Anda.

Cukup salin kode pendek formulir kontak Anda dari bagian atas pembuat formulir.

Formulir Kode Pendek

Kemudian, buka pos atau halaman tempat Anda ingin menampilkan formulir Anda. Di sini, tambahkan blok Shortcode menggunakan penyisip blok ( + ).

Menambahkan Blok Kode Pendek

Kemudian, rekatkan kode pendek ke dalam blok.

Menempelkan Kode Pendek

Terakhir, tekan tombol Publish dari atas pojok kiri.

Menerbitkan Formulir

Atau, untuk mempublikasikan formulir kontak Anda, klik tombol penyisip blok ( + ) seperti yang ditunjukkan pada gambar. Ketik Formulir Everest ke dalam bilah pencarian dan klik pada blok ketika muncul di hasil.

Menambahkan Formulir Everest

Setelah itu, pilih formulir kontak yang baru saja Anda buat dari menu tarik-turun dan Publikasikan .

Dengan itu, formulir kontak Anda dengan Google Maps akan ditayangkan di situs web Anda.

Menampilkan Formulir Kontak Dengan Google Maps

Kesimpulan

Jadi, itu saja untuk artikel kami tentang cara menambahkan Google Maps ke formulir kontak WordPress. Seperti yang Anda lihat, sangat mudah dengan plugin seperti Everest Forms. Namun, itu tidak semua.

Dengan Formulir Everest, Anda juga dapat menambahkan bidang pengulang ke formulir dan mengubah warna tombol kirim. Anda bahkan dapat mengirim email konfirmasi setelah pengiriman formulir.

Tapi itu hanya puncak gunung es. Jika Anda tertarik untuk mempelajari lebih lanjut tentang plugin ini, Anda dapat mengunjungi blog kami dan halaman dokumentasi resmi.

Juga, jangan lupa untuk mengikuti kami di Twitter dan Facebook untuk menerima pembaruan tentang artikel yang lebih bermanfaat.