Cara Menambahkan Peta Formulir Kontak Dengan Plugin WordPress

Diterbitkan: 2021-04-09

Apakah Anda ingin menambahkan peta (seperti Google Maps) ke formulir kontak Anda dengan plugin WordPress?

Menempatkan peta di dekat formulir kontak Anda akan membantu pengguna Anda mendapatkan kejelasan tentang lokasi mereka dan membantu Anda mendapatkan prospek berkualitas lebih tinggi.

Dalam tutorial ini, kami akan memandu Anda melalui cara menampilkan formulir kontak WordPress dengan peta.

Buat Peta Formulir Kontak Anda Sekarang

Mengapa Menambahkan Peta di Formulir Kontak?

Tentu, bukan rahasia lagi bahwa sebagian besar pemilik usaha kecil dengan situs web tahu mengapa Anda memerlukan formulir kontak.

Tapi, Anda mungkin bertanya-tanya mengapa Anda menambahkan peta ke formulir kontak itu. Nah, menambahkan peta ke formulir kontak Anda bisa menjadi ide bagus.

WPForms adalah plugin Pembuat Formulir WordPress terbaik. Dapatkan secara gratis!

Berikut beberapa alasannya:

  • Peta pada formulir kontak dapat membantu Anda mendapatkan prospek yang lebih baik dengan lebih sedikit kesalahan ketik
  • Perjelas lokasi yang diketik pengguna Anda
  • Bantu pengguna Anda menemukan lokasi yang tepat dengan pin yang dapat dipindahkan
  • Ini sangat mudah dilakukan dengan mengklik tombol (menggunakan plugin WPForms)

Daripada harus membuat kode peta ke situs web Anda sendiri atau membayar pengembang web, Anda dapat melakukannya dengan mudah dengan WPForms Pro.

Selanjutnya, kami akan menunjukkan kepada Anda cara menambahkan peta formulir kontak dengan plugin WordPress selanjutnya.

Cara Menambahkan Peta Formulir Kontak

Ikuti petunjuk langkah demi langkah yang mudah ini untuk menambahkan peta formulir kontak ke situs web WordPress Anda, menggunakan plugin.

Langkah 1: Unduh Plugin WPForms

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin WPForms. Berikut adalah panduan langkah demi langkah tentang cara menginstal plugin WordPress.

Anda memerlukan WPForms Pro untuk mengakses addon Geolokasi.

Langkah 2: Aktifkan Addon Geolokasi

Setelah plugin WPForms Anda diaktifkan, buka WPForms » Addons dan gunakan bilah pencarian untuk menemukan Geolocation Addon. Klik Aktifkan untuk menyalakannya.

tambahan geolokasi

Addon Geolocation memiliki beberapa fitur luar biasa yang dapat Anda gunakan di situs web Anda sekarang setelah diaktifkan, seperti 2 fitur luar biasa ini:

  1. Geolokasi Entri Formulir: Anda akan dapat melihat dari mana pengguna formulir Anda berasal yang dapat membantu Anda mengelompokkan daftar email Anda dengan lebih baik.

Geolokasi WPForms untuk entri

2. Pelengkapan Otomatis Alamat: Saat pengguna mengetik, bidang alamat Anda dapat secara otomatis menunjukkan kepada mereka alamat mereka sebelum mereka menyelesaikannya.

Alamat geolokasi autocomplete di WPForms

Anda akan dapat menggunakan kedua alat keren ini setelah Anda mendapatkan formulir kontak di situs web Anda, jadi mari lanjutkan membuat formulir peta Anda.

Langkah 3: Sesuaikan Addon Geolokasi

Sekarang setelah Anda mengaktifkan addon Geolokasi, saatnya untuk mengatur dan menyesuaikannya.

Arahkan ke WPForms » Pengaturan dan klik pada tab Geolokasi .

Pengaturan geolokasi di WPForms

Sekarang, Anda harus memilih penyedia tempat Anda ingin mendapatkan info geolokasi di area Penyedia Tempat .

Pilih penyedia tempat untuk Geolokasi

Jika mau, Anda dapat membiarkan lokasi pengguna Anda diisi sebelumnya ke dalam formulir dengan mencentang kotak Lokasi Saat Ini.

Jika Anda mencentang kotak Lokasi Saat Ini, maka pengunjung akan melihat kotak seperti ini ketika mereka membuka halaman dengan formulir kontak Anda di dalamnya:

deteksi lokasi pelengkapan otomatis dengan wpforms

Lihat dokumentasi lengkap kami tentang menyiapkan addon Geolokasi untuk menemukan secara spesifik tentang penyedia layanan lokasi yang akan Anda gunakan dan cara menyelesaikan penyiapan itu.

Setelah pengaturan penyedia lokasi Anda semua diisi ke dalam pengaturan addon Geolokasi, Anda siap untuk membuat peta formulir kontak Anda.

Langkah 4: Buat Formulir Kontak Anda

Jadi mari kita lanjutkan dan buat formulir kontak Anda dengan peta sekarang. Bagian ini akan memakan waktu kurang dari 5 menit.

Untuk mulai membuat formulir baru Anda, klik tombol Tambah Baru untuk meluncurkan pembuat formulir WPForms.

Tambahkan Formulir Baru

Sekarang Anda dapat memasukkan nama untuk formulir Anda di bidang input Nama Formulir . Dalam contoh ini, kami akan menggunakan "Hubungi Kami".

Ketik nama formulir

Di bawah Nama Formulir, pilih templat yang ingin Anda gunakan dengan mengkliknya. Mari kita buat formulir kontak sederhana, dan kita akan segera menambahkan peta kita ke dalamnya.

Buat Formulir Kontak Sederhana

Selanjutnya, templat Formulir Kontak Sederhana Anda akan diisi dengan beberapa bidang standar seperti:

  • Nama (Pertama, Terakhir)
  • Surel
  • Komentar atau Pesan

wordpress hubungi kami formulir sebelum plugin menambahkan peta

Sekarang, mungkin ada beberapa hal lagi pengaturan formulir lain yang ingin Anda konfigurasikan seperti pemberitahuan dan konfirmasi. Jika demikian, (dan kami sangat menyarankan ini) lihat panduan terperinci kami untuk membuat formulir pertama Anda.

Kerja bagus! Selanjutnya, mari tambahkan bidang ke formulir Anda yang memungkinkan Anda mengaktifkan opsi Tampilan Peta.

Langkah 5: Aktifkan Opsi Tampilan Peta

Setelah formulir Anda dimuat, Anda akan melihat semua bidang yang dapat Anda tambahkan ke formulir Anda.

bidang pada formulir kontak sederhana sebelum menambahkan peta

Untuk menggunakan opsi Tampilan Peta pada formulir Anda, Anda harus menambahkan bidang Alamat atau bidang Teks Baris Tunggal .

Dalam tutorial ini, kita akan menggunakan bidang Teks Baris Tunggal sehingga alamatnya muncul semua dalam satu baris.

Untuk menambahkan bidang ini ke formulir Anda, Anda dapat mengklik nama bidang, atau menarik dan melepasnya dari panel sebelah kiri ke formulir Anda di sebelah kanan.

teks satu baris untuk formulir kontak dengan peta

Tidak perlu salah satu bidang? Untuk menghapus bidang apa pun dari formulir Anda, arahkan kursor ke bidang tersebut dan klik tombol tempat sampah berwarna merah.

Hapus tombol bidang

Oke, sekarang Anda telah menambahkan bidang Teks Baris Tunggal, saatnya untuk mengaktifkan peta di formulir Anda.

Di tab Opsi Bidang untuk bidang Teks Baris Tunggal Anda, klik Opsi Lanjutan .

opsi lanjutan untuk menemukan opsi peta di bidang formulir

Anda akan melihat beberapa opsi berbeda sekarang, jadi gulir ke bawah dan aktifkan kotak centang di sebelah Aktifkan Pelengkapan Otomatis Alamat, lalu centang kotak di sebelah Tampilkan Peta .

tampilkan tombol peta pada formulir

Peta akan secara default berada di atas bidang, tetapi Anda dapat mengubahnya menjadi di bawah jika Anda mau. Cukup klik pada dropdown dan alihkan ke bidang Di Bawah.

ubah lokasi bidang pada formulir kontak dengan peta (1)

Terakhir, ganti nama bidang ini menjadi 'Alamat' sehingga pengguna Anda tidak melihat 'Teks Satu Baris' saat mengisi formulir Anda.

Gulir ke atas di panel Opsi Formulir di sisi kiri dan edit Label untuk mengatakan 'Alamat'.

ubah bidang teks satu baris ke alamat (1)

Sekarang, buat perubahan lain yang Anda inginkan pada formulir Anda dan ketika Anda menyukainya, klik Simpan di sudut kanan atas.

simpan formulir kontak Anda dengan peta di wordpress

Kerja bagus. Formulir Anda siap untuk memulai debutnya.

Langkah 6: Publikasikan Peta Formulir Kontak Anda

Siap untuk mempublikasikan formulir kontak Anda dengan peta? Dengan plugin WPForms Pro Anda, sangat mudah untuk menyematkan formulir Anda di situs Anda.

Jadi setelah formulir Anda terlihat seperti yang Anda inginkan dan disimpan, klik tombol Sematkan di sudut kanan atas.

sematkan peta formulir kontak Anda di halaman wordpress

Di sini, Anda dapat memilih halaman WordPress apa pun yang Anda suka, baik itu halaman yang sudah ada maupun halaman baru.

Dalam tutorial ini, kita akan mengklik Create New Page .

Buat halaman baru

Selanjutnya, beri nama halaman Anda apa pun yang Anda inginkan dan klik Let's Go!

sematkan peta formulir kontak Anda di halaman baru

Voila. Ini akan secara otomatis menambahkan formulir kontak Anda dengan peta ke halaman Anda di WordPress.

Selanjutnya, klik 'Terbitkan' (atau perbarui, jika Anda menggunakan halaman yang sudah ada) untuk akhirnya merilis formulir Anda secara langsung di internet.

publikasikan formulir kontak Anda dengan peta ke wordpress

Selamat – formulir kontak Anda dengan peta sekarang tersedia di internet.

Berikut adalah gambaran bagaimana tampilannya:

formulir kontak dengan peta (1)

Itu dia! Anda sekarang tahu cara mudah membuat peta formulir kontak dengan plugin WordPress.

Buat Peta Formulir Kontak Anda Sekarang

Buat Peta Formulir Kontak Anda Sendiri Sekarang

Sangat mudah untuk membuat peta formulir kontak Anda sendiri.

Dapatkan WPForms Pro hari ini untuk mengakses addon Geolokasi yang memungkinkan Anda menambahkan peta yang luar biasa ini. Anda juga akan mendapatkan akses ke banyak fitur bermanfaat lainnya.

Dan di atas peta formulir kontak, WPForms Pro mencakup:

  • Pembuat yang Mudah Digunakan – Buat formulir Anda sendiri dalam hitungan menit tanpa menulis satu baris kode pun.
  • Survei – Kumpulkan data melalui survei dan jajak pendapat dan lihat dalam laporan yang indah.
  • Halaman Formulir – Dapatkan lebih banyak orang menyelesaikan formulir Anda dengan membuat halaman formulir bebas gangguan hanya dengan satu klik.
  • Formulir Pemesanan – Terima Stripe dan PayPal langsung di formulir Anda dan terima uang secara online.
  • Laporan Perjalanan Pengguna – Lihat di mana orang-orang berada di situs Anda sebelum mereka mengisi formulir Anda.
  • Formulir Aman – Lindungi formulir dengan opsi anti-spam seperti captcha khusus, hCaptcha, atau Google reCAPTCHA v2 atau v3.
  • Formulir Percakapan – Saksikan tingkat konversi yang meroket dengan formulir yang sangat menarik dan tampak modern.
  • 100+ Templat – Jangan pernah membuat formulir dari awal lagi dengan templat yang dibuat sebelumnya dari jenis formulir paling populer di luar sana.
  • Dukungan Premium – Akses tim yang ramah dan berpengetahuan luas yang akan membantu memandu Anda ke arah yang benar jika Anda memerlukan bantuan dengan formulir situs web Anda.
  • …dan masih banyak lagi.

Faktanya, jika Anda melihat WPForms Lite vs Pro, Anda akan melihat ada banyak alasan mengapa Pro begitu populer.

Pikiran Terakhir tentang Peta Formulir Kontak

Kami harap posting ini membantu Anda mempelajari betapa mudah (dan bermanfaat) menambahkan peta formulir kontak ke situs web WordPress Anda dengan sebuah plugin.

Ingin menambahkan logo atau gambar ke formulir Anda? Anda mungkin juga ingin melihat panduan kami tentang cara menambahkan gambar ke formulir WordPress.

Jadi tunggu apa lagi? Mulailah dengan plugin formulir WordPress paling kuat hari ini.

Dan jika Anda menyukai posting ini, silakan ikuti kami di Facebook dan Twitter untuk tutorial WordPress gratis lainnya.