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

Çevrimiçi formları bolca doldurduk ve genellikle aynı adresi tekrar tekrar yazarken buluyoruz kendimizi.

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 iğnesiyle 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ı olabileceğini ve kullanıcılara daha sorunsuz, daha tatmin edici bir deneyim sunabileceğini 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 sitenizi kurarken, ziyaretçilerin ürünleriniz veya hizmetleriniz hakkında size ulaşabilmeleri için muhtemelen bir iletişim formu eklediniz. Ve fiziksel bir mağazanız varsa, muhtemelen insanların konumunuzu kolayca bulmalarına yardımcı olmak için bir Google Haritası eklediniz.

Birçok işletme sahibinin bilmediği şey, coğrafi konumu kullanarak iletişim formunuzdaki adres alanını otomatik olarak doldurabileceğiniz ve ziyaretçinin konumunu bir haritada görüntüleyebileceğinizdir.

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

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.

Şimdi, iletişim formlarınıza bir Google Haritası nasıl yerleştireceğimize bakalım. Bu makalede ele alacağımız tüm konuların genel bir özeti aşağıdadır:

• How to Embed a Google Map in a Contact Form
  • Google Places API Anahtarı Oluşturma
  • Google Places API Anahtarınızı Kısıtlama
  • Google API Anahtarını WPForms Ayarlarına Ekleme
  • WordPress'te Gömülü Google Haritası ile İletişim Formu Oluşturma
  • İletişim Formunu Web Sitenize Ekleme
  • İletişim Formunda Google Haritasını Görüntüleme
• Formda Kullanıcı Konum Verileri Nasıl Görüntülenir
• Video Eğitim: İletişim Formlarına Google Haritası Yerleştirme
• 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 ile güçlendiriliyor. Bu konuda harika bir deneyimimiz oldu ve detaylı WPForms incelememizde daha fazlasını öğrenebilirsiniz.

Yapmanız gereken ilk şey bir WPForms hesabı oluşturmak. WPForms web sitesinde, ‘Şimdi WPForms Al’a tıklayın ve ardından kayıt işlemini tamamlayın.

Bu işlem tamamlandığında, WPForms Pro ZIP dosyanıza ve lisans anahtarınıza erişebileceğiniz WPForms hesap kontrol panelinize yönlendirileceksiniz.

Ardından, WPForms eklentisini yükleyip etkinleştirebilirsiniz.

WordPress yönetici alanınızdan, Eklentiler » Yeni Eklenti Ekle bölümüne gidebilirsiniz.

Ardından, WPForms eklentisini hızlıca bulmak için arama çubuğunu kullanın.

Arama sonuçlarında, kullanmaya başlamak için sadece ‘Şimdi Yükle’ düğmesine ve ardından ‘Etkinleştir’e tıklayın.

Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın: bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuz.

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, ‘Eklenti Yükle’ düğmesine tıklayın.

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 eğitim için ‘Google Places API’yi seçeceğiz.

Ayrıca ‘Mevcut Konum’ onay kutusuna da tıklamalısınız. Bu, kullanıcının tarayıcısından konumunu isteyerek adres alanını otomatik olarak önceden doldurur. Bu, zamandan tasarruf sağlar ve doğruluğu artırmaya yardımcı olur.

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

Burada WPForms sizden Google API anahtarınızı girmenizi isteyecektir. 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.

Öncelikle, açılır menüden ülkenizi seçin ve hizmet şartlarını kabul edin. 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 Google'ın API Kitaplığı'na götürecektir; burada üç haritalama API'sini etkinleştirmeniz gerekecektir:

• Google Places API – kullanıcılar yazarken formunuzun önerilen adresleri çekmesini sağlar.
• Maps JavaScript API – sitenizde interaktif haritayı görüntüler.
• Geocoding API – bir adresi tam koordinatlara dönüştürerek haritanın sabitleme noktasını doğru yerleştirmesini sağlar.

Bunları en üstteki arama çubuğunu kullanarak veya Haritalar bölümündeki 'Tümünü Gör' düğmesine tıklayarak bulabilirsiniz.

Buradan, Places API'yi bulup etkinleştirelim. Bulduğunuzda üzerine tıklamanız gerekecek.

Bir sonraki sayfada, 'Etkinleştir' düğmesine tıklayın.

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

Üç API'yi etkinleştirdikten sonra 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ı WPForms'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ı aşırı kullanmak sizi ücretsiz katmandan çıkarabilir ve beklenenden daha fazla maliyete neden olabilir. Yetkisiz veya beklenmedik kullanımı ö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önlendiricileri (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, 'Geocoding API', 'Maps JavaScript API' ve 'Places API' kutularını işaretleyeceğiniz 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 API anahtarını sahip olduğunuz diğer anahtarların yanında listelenmiş olarak göreceksiniz. Anahtarı WPForms Geolocation ayarları sayfasına ekleyebilmek 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.

Oradayken, anahtarı WPForms ayarlarındaki 'Google Places API' alanına yapıştırın. Ve '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ç farklı yolu vardır.

İlk olarak, boş bir tuvalle 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 kılar.

İ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.

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

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ırlı Metin alanı kullanabilirsiniz.

Bu eğitim için 'Tek Satırlı Metin' alanı kullanacağız. Bu nedenle, 'Tek Satırlı Metin' bloğunu forma sürükleyelim.

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 sayfaya mı eklemek yoksa yeni bir sayfa mı oluşturmak istediğiniz 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 sayfayı yayına 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, ziyaretçilerin adreslerini daha hızlı ve kolay bir şekilde girmelerini sağlayarak zaman kazandıracaktır.

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

Konum belirlemeyi etkinleştirdiğinizde, WPForms ayrıca formunuzu gönderdiklerinde her kullanıcının konumunu 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.

Şimdi kullanıcının gönderdiği form verilerini, adları, iş e-postaları ve iş telefon numaraları gibi bazı konum verileriyle birlikte göreceksiniz.

Bu, Google Haritalar'da bir pin, kullanıcının konumu, posta kodu ve ülkesini içerir. Doğruluğun kullanıcının cihazına bağlı olduğunu unutmayın; mobil telefonlardan alınan GPS verileri genellikle çok hassastır, masaüstü bilgisayarlardan alınan IP tabanlı konum ise yaklaşık olabilir.

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

Hepsi bu kadar. WordPress'te iletiş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: İletişim Formlarına Google Haritası Yerleştirme

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.