İletişim Formlarına Google Haritası Nasıl Yerleştirilir (Harita Pini ile)

Çevrimiçi formları yeterince doldurduk ve genellikle aynı adresi tekrar tekrar yazarken bulduk kendimizi. İşte o zaman daha basit bir yol olmasını dilemeye başladık.

Bunu hayal edin: bir ziyaretçi iletişim sayfanıza iner, adresinin otomatik olarak doldurulduğunu ve haritada zaten bir pinin yerleştirildiğini görür. Hızlı, kişisel ve onlara zaman kazandırır.

WordPress iletişim formunuza bir konum sabitleme işaretçisiyle birlikte bir Google Haritası eklemek küçük bir dokunuş gibi görünebilir, ancak büyük bir etki yaratabilir. WPForms ile deneyimimiz, form tamamlama oranlarını artırmaya yardımcı olduğunu ve kullanıcılara daha sorunsuz, daha tatmin edici bir deneyim sunduğunu gösteriyor.

Bu adım adım kılavuzda, etkileşimli bir Google Haritasını doğrudan WordPress iletişim formunuza nasıl yerleştireceğinizi göstereceğiz – kod gerekmez. 🗺️

İletişim Formunuza Google Haritası Neden Yerleştirmelisiniz?

WordPress web sitenizi oluştururken, ürünleriniz ve hizmetleriniz hakkında sizinle kolayca iletişime geçebilmeleri için ziyaretçilerin bir iletişim formu eklemiş olmanız muhtemeldir.

Ve eğer işletmenizin fiziksel bir konumu varsa, muhtemelen insanların mağazanızı ziyaret etmelerini teşvik etmek için kendi konumunuzun bir Google Haritasını da eklemişsinizdir.

Birçok işletme sahibinin bilmediği şey, coğrafi konum kullanılarak iletişim formunuzdaki adres alanının otomatik olarak doldurulabileceği ve kullanıcının konumunun bir haritada görüntülenebileceğidir. Ardından, adreslerinin doğru olduğunu kolayca doğrayabilir veya gerekirse sürükleyip bırakarak değiştirebilirler.

Bu, genel kullanıcı deneyimini iyileştirir ve form terkini azaltmaya yardımcı olur.

Kullanıcılarınızın konumlarını bilmek, kişiselleştirilmiş içerik göstermek ve dönüşüm oranlarını artırmak için coğrafi konum hedeflemeyi kullanmanıza da olanak tanır.

Bunu söyledikten sonra, iletişim formlarına bir Google Haritası yerleştirmeyi paylaşacağız. İşte bu makalede ele alacağımız tüm konulara genel bir bakış:

• Bir İletişim Formuna Google Haritası Nasıl Yerleştirilir
• Formda Kullanıcı Konum Verileri Nasıl Görüntülenir
• Video Eğitim
• Ek Kaynaklar 🔗: WordPress'te Haritaları Kullanma Üzerine En İyi Kılavuzlar

Başlayalım!

Bir İletişim Formuna Google Haritası Nasıl Yerleştirilir

Bu eğitimde, WordPress için WPForms, yani en iyi iletişim formu eklentisini kullanacağız. Bu eklenti, basit bir sürükle ve bırak form oluşturucu ile istediğiniz türde formu kolayca oluşturmanıza olanak tanır.

İhtiyacınız olan tüm özelliklere sahip, temel bir iletişim formu oluşturmak için kullanabileceğiniz ücretsiz bir WPForms sürümü mevcuttur. Ancak bu eğitimde, Google Harita eklentisini içerdiği için WPForms Pro'yu kullanacağız.

ℹ️ Biliyor muydunuz? WPBeginner'da birçok şey için WPForms kullanıyoruz. Örneğin, iletişim formumuz ve yıllık okuyucu memnuniyeti anketlerimiz WPForms tarafından desteklenmektedir. Onunla harika bir deneyimimiz var ve her şeyi derinlemesine WPForms incelememizde bulabilirsiniz.

Yapmanız gereken ilk şey WPForms eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, lisans anahtarınızı girmek için WPForms » Ayarlar sayfasını ziyaret etmeniz gerekir. Bu bilgiyi WPForms hesap alanınızda bulabilirsiniz. Lisansınızı etkinleştirmek için 'Anahtarı Doğrula' düğmesine tıkladığınızdan emin olun.

Ardından, WPForms » Eklentiler bölümüne gitmeniz ve Konum Belirleme Eklentisini bulmanız gerekir.

Ekranın üst kısmındaki arama seçeneğini kullanabilir veya mevcut eklentiler arasında basitçe gezinebilirsiniz.

Bulduğunuzda, 'Eklentiyi Yükle' düğmesine tıklayarak eklentiyi yüklemelisiniz.

Coğrafi Konum eklentisi etkinleştirildiğine göre, ayarlarını yapılandırmanız gerekecektir. Bunu yapmak için WPForms » Ayarlar yolunu izleyin ve ‘Coğrafi Konum’ sekmesine tıklayın.

Bu sayfada bir coğrafi konum sağlayıcısı seçmeniz gerekiyor. Bu makale için Google Places API'yi seçeceğiz.

'Mevcut Konum' onay kutusuna da tıklamalısınız. Bu, kullanıcılar iletişim formunu doldururken konumu algılayacak ve adresi otomatik tamamlayacak, zamandan tasarruf edecek ve doğruluğu artıracaktır.

Ardından, Google Places API ayarlarına aşağı kaydırmanız gerekir.

Google API anahtarınızı girmeniz istenecektir. Anahtarınızı Google'dan alıp giriş alanına yapıştırabilirsiniz. Bunu bir sonraki bölümde nasıl yapacağınızı göstereceğiz.

Google Places API Anahtarı Oluşturma

Google Cloud Console web sitesine giderek Google Places için bir API anahtarı alabilirsiniz.

Bir açılır menüden ülkenizi seçmeniz ve hizmet şartlarını kabul etmeniz istenecektir. Bazı ülkelerde, bir posta listesine kaydolma şansı da sunulabilir.

Bir sonraki adıma geçmeye hazır olduğunuzda, ‘Kabul Et ve Devam Et’e tıklayın.

Ardından, API anahtarı için bir proje seçmeniz gerekecek. ‘Proje seç’e tıklamanız ve listeden kullanmak istediğiniz projeye tıklamanız yeterlidir.

Daha önce bir proje oluşturmadıysanız veya bu, Google'a henüz eklemediğiniz yeni bir web sitesiyse, bir tane ayarlamak için ‘Yeni Proje’ye tıklamalısınız.

Şu anda, Google Haritaları'nı WordPress sitenizde görüntülemek için gereken API'leri etkinleştirebileceğiniz 'API'ler ve Hizmetler' sayfasında olmalısınız.

Sayfanın üst kısmındaki '+ API'ler ve Hizmetler Etkinleştir' düğmesine tıklamanız gerekecek.

Bu sizi, üç farklı harita API'sini etkinleştirmeniz gereken Google'ın API Kitaplığı'na götürecektir.

Sayfanın üst kısmındaki arama fonksiyonunu kullanarak veya Haritalar bölümünün yanındaki ‘Tümünü Gör’ bağlantısına tıklayarak onları bulabilirsiniz.

İlk olarak, Places API'yi bulup etkinleştirmeniz gerekir. Bulduğunuzda, üzerine tıklamanız gerekecektir. Bir sonraki sayfada, ‘Etkinleştir’ düğmesine tıklamalısınız.

Bundan sonra, Haritalar JavaScript API'si ve Konum Belirleme API'si için de aynı şeyi yapmalısınız.

Üç API'yi etkinleştirdiğinize göre, bir API anahtarı oluşturabilirsiniz.

Soldaki menüde, API'ler ve Hizmetler » Kimlik Bilgileri bölümüne gitmeniz gerekir.

Buradan, ekranın üst kısmındaki 'Kimlik Bilgileri Oluştur' düğmesine tıklayabilir ve ardından 'API anahtarı' seçeneğini belirleyebilirsiniz.

API anahtarınız oluşturulacak ve bir açılır pencerede görüntülenecektir.

Bu eğitimde daha sonra, bu anahtarı WPForm'un ayarlarına kopyalamanız gerekecek. Şimdilik, API anahtarının kullanımına bazı kısıtlamalar getirmeye bakalım.

Google Places API Anahtarınızı Kısıtlama

API anahtarının aşırı kullanımı sizi ücretsiz plandan çıkarabilir ve beklenenden daha pahalıya mal olabilir. Yetkisiz veya beklenmeyen kullanımları önlemek için anahtarı kısıtlamanızı öneririz.

Bunu yapmak için, yukarıdaki ekran görüntüsündeki ‘API anahtarı oluşturuldu’ açılır penceresinin altındaki ‘Anahtarı Sınırla’ bağlantısına tıklamanız gerekir.

Sonraki sayfada birkaç farklı kısıtlama ayarlayabilirsiniz. Bunlardan ilki ‘Uygulama kısıtlamaları’dır.

Bu bölümde, 'HTTP yönlendirenler (web siteleri) seçeneğine tıklamalısınız. Ardından, anahtar yalnızca web sitelerinde kullanılacaktır.

Ardından, yalnızca kendi web sitenizde kullanıldığından emin olmalısınız. Bunu yapmak için, 'Web sitesi kısıtlamaları' bölümüne aşağı kaydırmalı ve ardından 'Öğe Ekle' düğmesine tıklamalısınız.

Şimdi, web sitesi alan adınızı ‘Yeni öğe’ alanına *example.com/* deseniyle yazmalısınız.

Google Haritalarını birden fazla web sitesinde kullanacaksanız, 'Öğe Ekle' düğmesine tıklayabilir ve ihtiyacınız olan kadar alan ekleyebilirsiniz.

API anahtarını yalnızca kendi web sitelerinize kısıtladığınıza göre, yukarıda eklediğiniz yalnızca Google API'leriyle çalışacak şekilde de kısıtlayabilirsiniz.

Sayfanın ‘API kısıtlamaları’ bölümüne aşağı kaydırmanız ve ‘Anahtarı kısıtla’ seçeneğini belirlemeniz gerekir. Bu, ‘Geocaching API’, ‘Maps JavaScript API’ ve ‘Places API’ kutularını işaretlemeniz gereken bir açılır menü gösterecektir.

Bunu yaptıktan sonra, ayarlarınızı kaydetmek için 'Tamam' bağlantısına tıklamalısınız.

Son olarak, seçtiğiniz tüm kısıtlamaları etkinleştirmek için sayfanın altındaki 'Kaydet' düğmesine tıkladığınızdan emin olun.

Ayarların yürürlüğe girmesi 5 dakikaya kadar sürebilir.

Google API Anahtarını WPForms Ayarlarına Ekleme

Artık kullanılabilir olan diğer API anahtarlarınızla birlikte API anahtarını göreceksiniz. Anahtarı WPForms Coğrafi Konum ayarları sayfasına ekleyebilmeniz için ‘Kopyala’ simgesine tıklamalısınız.

API'nin herhangi bir ayarını veya kısıtlamasını değiştirmeniz gerekirse, sağdaki Düzenle simgesine tıklayabileceğinizi unutmayın.

Şimdi, hala WPForms » Ayarlar » Konum sayfasında olması gereken web sitenize geri dönmeniz gerekiyor.

Oraya ulaştığınızda, anahtarı WPForms ayarlarındaki Google Places API alanına yapıştırın. Bunu yaptıktan sonra, 'Ayarları Kaydet' düğmesine tıkladığınızdan emin olun.

WordPress'te Gömülü Google Haritası ile İletişim Formu Oluşturma

WPForms ve Google Places'ı yapılandırdığınıza göre, WordPress'te bir iletişim formu oluşturmaya hazırsınız.

WPForms ile WordPress formlarınızı oluşturmanın birkaç yolu vardır. İlk olarak, boş bir tuval ile başlayabilirsiniz. Bu, form alanlarını sıfırdan ekleme ve düzenleme konusunda size tam kontrol sağlar, bu da onu tamamen özelleştirilmiş tasarımlar için mükemmel hale getirir.

İkinci olarak, basit bir metin istemine dayalı olarak eksiksiz bir form oluşturmak için yapay zeka form oluşturucuyu kullanabilirsiniz. **Nereden başlayacağınızdan emin değilseniz** bu harika bir zaman kazandırıcıdır.

Ve son olarak, 2.000'den fazla hazır form şablonu arasından seçim yapabilirsiniz. Bir iletişim formu, anket, rezervasyon formu veya daha karmaşık bir şeye ihtiyacınız olsun, ihtiyaçlarınıza uygun bir şablon muhtemelen mevcuttur!

WordPress'te iletişim formu oluşturma hakkındaki kılavuzumuzu izleyerek başlayabilirsiniz.

Temel bir form oluşturduktan sonra bir adres alanı eklemeniz gerekir. Bir Adres bloğu veya Tek Satır Metin alanı kullanabilirsiniz. Bu eğitim için 'Tek Satır Metin' alanı kullanacağız.

'Tek Satır Metin' bloğunu forma sürüklemeniz yeterlidir.

Ardından, alanın ayarlarını özelleştireceğiz.

Bunu yapmak için, Tek Satır Metin ayarlarını görüntülemek üzere alana tıklamanız gerekir.

Öncelikle, alanın etiketini 'Adres' olarak değiştirmelisiniz. Bu, kullanıcılara alana ne yazmaları gerektiğini açıkça gösterecektir.

Bundan sonra, alanın ayarlarını, WordPress formunda bir harita gösterecek şekilde değiştirmeniz gerekir. Bunu yapmak için Gelişmiş sekmesine tıklamanız gerekecektir.

Oradayken, ayarların en altındaki 'Adres Otomatik Tamamlama' seçeneğini arayın ve 'Açık' konumuna getirin.

Ardından, 'Haritayı Göster' seçeneğini göreceksiniz, bunu da etkinleştirmelisiniz. Haritayı alanın üstünde veya altında göstermeyi seçebilirsiniz.

İletişim Formunu Web Sitenize Ekleme

İletişim formunu web sitenize eklemenin en kolay yolu ‘Göm’ düğmesine tıklamaktır. Form düzenleyici ekranının üst kısmındaki ‘Kaydet’ düğmesinin yanında bulacaksınız.

Formu mevcut bir forma ekleyip eklemeyeceğiniz veya yeni bir sayfa oluşturup oluşturmayacağınız sorulacaktır.

Bu eğitim için ‘Yeni Sayfa Oluştur’ düğmesine tıklayacağız.

Ardından, sayfaya bir ad vermeli ve ardından ‘Başlayalım!’ düğmesine tıklamalısınız.

O adla yeni bir sayfa oluşturulacak ve iletişim formunuz otomatik olarak eklenecektir.

Tek yapmanız gereken formu canlıya almak için 'Yayınla' düğmesine tıklamak.

İletişim Formunda Google Haritasını Görüntüleme

Bir kullanıcı iletişim formunuzu ziyaret ettiğinde, web sitenizin konumlarına erişmesine izin verip vermeyecekleri sorulacaktır.

‘İzin Ver’ düğmesine tıklarlarsa, mevcut konumları adres alanına girilir ve o konumun bir sabitleme işareti haritaya eklenir.

Bu otomatik tamamlama özelliği, adreslerini yazmayı daha hızlı ve kolay hale getirerek ziyaretçilerinizin zamanından tasarruf edecektir.

Adresi değiştirmeleri gerekiyorsa, yeni bir tane yazabilir veya haritadaki farklı bir konuma sürükleyip bırakabilirler.

Formda Kullanıcı Konum Verileri Nasıl Görüntülenir

Coğrafi konumu etkinleştirdiğinizde, WPForms ayrıca kullanıcılarınız formu doldurduğunda konumlarını da kaydedecektir. Kullanıcılarınızın konumunu bilmek, daha iyi potansiyel müşteriler bulmanıza yardımcı olabilir.

WPForms » Girişler bölümüne gitmeniz ve ardından iletişim formunuza tıklamanız gerekecektir.

Artık kullanıcılarınızın o form için doldurduğu girişlerin bir listesini göreceksiniz.

Belirli bir form gönderimini görüntülemek için sağdaki ‘Görüntüle’ bağlantısına tıklamanız yeterlidir.

Artık kullanıcı tarafından doldurulan form verilerini, adları, iş e-postası ve iş telefonu numarası gibi konum verileriyle birlikte göreceksiniz.

Bu, Google Haritalar'da bir pin, kullanıcının konumu, posta kodu ve ülkesi ile yaklaşık enlem ve boylamını içerir.

Elbette, kullanıcı forma konumunu bilmesi için izin vermediyse, herhangi bir konum verisi görüntülenmeyecektir.

Hepsi bu kadar. İletişim formunuza başarıyla bir Google Haritası eklediniz. Ayrıca WordPress'te anketler oluşturmak, çevrimiçi ödeme kabul etmek için bir ödeme formu oluşturmak ve daha fazlası için WPForms'u kullanabilirsiniz.

Video Eğitim

Nasıl çalıştığını görmek ister misiniz? İletişim formunuza bir Google Haritası yerleştirmeyi öğrenmek için aşağıdaki video eğitimindeki Oynat ▶️ düğmesine tıklamanız yeterlidir.

WPBeginner'a Abone Olun

Ek Kaynaklar 🔗: WordPress'te Haritaları Kullanma Üzerine En İyi Kılavuzlar

Bu eğitimin, iletişim formlarına bir Google Haritası yerleştirmeyi öğrenmenize yardımcı olduğunu umuyoruz. Ardından, web sitenizde haritaları kullanma konusundaki diğer bazı kılavuzlarımızı da görmek isteyebilirsiniz:

• WordPress'e Google Haritaları Nasıl Eklenir (DOĞRU Yöntem)
• WordPress'e Google Haritaları Mağaza Bulucu Nasıl Eklenir
• WordPress'e Bing Haritaları Nasıl Gömülür (Adım Adım)
• WordPress'e Etkileşimli Bir Harita Nasıl Eklenir
• WordPress için En İyi Google Haritalar Eklentileri (Çoğu Ücretsiz)
• En İyi Mapbox WordPress Eklentileri
• En İyi WordPress Coğrafi Konum ve GeoIP Eklentileri

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.