WordPress’te adres alanları için otomatik tamamlama eklemek istiyor musunuz?
Kısa süre önce kullanıcılarımızdan biri WordPress formlarındaki adres alanları için otomatik tamamlama özelliğinin nasıl ekleneceğini sordu. Otomatik tamamlama, kullanıcıların yazarken gerçek zamanlı olarak oluşturulan öneriler arasından hızlı bir şekilde adres seçmelerine olanak tanır.
Bu makalede, Google Places API kullanarak WordPress’te adres alanları için otomatik tamamlamayı nasıl ekleyeceğinizi göstereceğiz.
WordPress’te Otomatik Tamamlanan Adres Alanları Neden Eklenmeli?
WordPress’e otomatik tamamlama adres alanları eklemek, web sitenizdeki kullanıcı deneyimini iyileştirmenize yardımcı olabilir.
Örneğin, bir e-ticaret mağazanız varsa, müşterileriniz adreslerini daha hızlı girebilecek ve yazım hatalarından kaçınabileceklerdir.
Müşteriler adreslerini yazdıklarında, mevcut konumlarına göre olası adresler ekranlarında gösterilir, böylece tek yapmaları gereken doğru olanı seçmektir. Kullanıcıya gösterilen seçenekler Google Places ve Google Maps API ile bağlantılı olduğu için bu, hataları azaltmanıza yardımcı olur.
Adres alanlarında otomatik tamamlama, kullanıcılarınıza sağlayabileceğiniz en kullanışlı işlevlerden biridir. Alıcılara ödeme sırasında hızlı bir şekilde yardımcı olabilirseniz, satın alma işlemini gerçekleştirme olasılıkları daha yüksektir.
Her satın alma işlemini hızlı ve basit hale getirerek satışlarınızı artırma ve ara sıra alışveriş yapan müşteriyi tekrar eden bir müşteriye dönüştürme olasılığınız daha yüksektir.
Artık WordPress’te otomatik tamamlama adres alanları eklemenin faydalarını anladığınıza göre, size bunu adım adım nasıl yapacağınızı göstereceğiz.
Video Eğitimi
Videoyu beğenmediyseniz veya daha fazla talimata ihtiyacınız varsa, okumaya devam edin.
Yapmanız gereken ilk şey Otomatik Tamamlama Google Adres eklentisini yüklemek ve etkinleştirmektir.
Daha fazla ayrıntı için, WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.
Etkinleştirmenin ardından, eklenti ayarlarını yapılandırmak için WordPress kontrol panelinizdeki Ayarlar ” Otomatik Tamamlama sayfasını ziyaret etmeniz gerekir.
Google Places API Anahtarını girmeniz istenecektir. Bu API anahtarı, web sitenizin Google Haritalar ile bağlantı kurmasını ve veritabanından gerçek zamanlı olarak otomatik tamamlama önerileri almasını sağlar.
Google Places API Anahtarına Erişim
Google Developer Console web sitesine gidin ve yeni bir proje oluşturun.
Projeniz için bir ad vermenizi isteyen yeni bir sayfaya yönlendirileceksiniz.
Projeyi daha sonra tanımlamanıza yardımcı olacak bir ad kullanın ve ardından ‘Oluştur’ düğmesine tıklayın. Bağlanmak istediğiniz bir kuruluş varsa, seçenekler açılır listesini görmek için ‘Gözat’ bağlantısına basabilirsiniz.
Birkaç saniye beklediğinizde otomatik olarak API’ler ve Hizmetler sayfasına yönlendirileceksiniz.
Buradan sol taraftaki panele gidin ve ‘Kütüphane’ sekmesine tıklayın.
Şimdi, projeniz için etkinleştirebileceğiniz popüler Google API’lerinin listesini göreceksiniz. Sol panelde, yalnızca haritalarla ilgili seçeneklere göre filtrelemek için ‘Haritalar’ı seçin.
Sadece ‘Places API’ seçeneğini bulmanız ve tıklamanız gerekir.
Buradan Places API’sinin genel bakış sayfasına yönlendirileceksiniz.
API’yi yetkilendirmek için ‘Etkinleştir’ düğmesine tıklamanız yeterlidir.
Google Console’unuz doğru şekilde ayarlanmışsa, API Anahtarınızla birlikte bir açılır pencere görmeniz gerekir.
Ancak, Google Console hesabınızı ilk kez kuruyorsanız, fatura bilgilerinizi girmeniz gerekebilir.
Şimdi WordPress sitenize geri dönebilirsiniz.
Google Console’unuzdaki API anahtarını ‘Google Place API Anahtarı’ yazan yere yapıştırın.
Otomatik tamamlama adresinin WordPress’te çalıştığından emin olmak için Google Maps JavaScript API’sini etkinleştirmeniz gerekir.
Yapmanız gereken tek şey Google Developer Console panosundan ‘API’ler ve Hizmetler’ sekmesine geri dönmek. Ardından, ‘Haritalar JavaScript API’sini bulun ve ‘Etkinleştir’e tıklayın.
Şimdi, form kimliğini eklemeye geçmeye hazırsınız.
Bir sonraki adım için, otomatik adres tamamlama özelliğini eklemek istediğiniz adres alanının form kimliğine ihtiyacınız olacak.
WordPress Form Alanlarında Otomatik Tamamlanan Adresi Etkinleştirme
Herhangi bir WordPress form oluşturucu eklentisi tarafından oluşturulan herhangi bir form alanına otomatik adres tamamlama özelliği ekleyebilirsiniz.
Bu eğitimde WPForms ‘u kullanacağız çünkü en iyi sürükle ve bırak form oluşturucu ve yeni başlayanlar için kullanımı en kolay olanıdır. Ancak, bu talimatlar hangi iletişim formu eklentisini kullanıyor olursanız olun işe yarayacaktır.
Öncelikle, bir adres alanı veya bir dizi adres alanı olan bir form oluşturmanız gerekir.
İşiniz bittiğinde, normalde yaptığınız gibi bu formu WordPress web sitenize ekleyin.
Ardından, formunuzu eklediğiniz gönderi veya sayfaya gidin. Adres alanına sağ tıklamanız ve tarayıcı menüsünden ‘İncele’yi seçmeniz gerekir.
Burada, giriş alanı için form kimliği değerini içeren vurgulanmış bir bölüm göreceksiniz.
Örneğin, bu ekran görüntüsünde formumuzun ID değeri wpforms-567-field_4‘tür.
Bu değeri kopyalamanız ve eklenti ayarları sayfasına yapıştırmanız gerekir.
Ancak, otomatik tamamlama özelliğini tüm adres formunuza eklemek isteyeceksiniz. Örneğin, kullanıcıların bir gönderi adresinin tamamını otomatik olarak doldurabilmesini istediyseniz bu, şehir, başlangıç ve posta kodunu otomatik olarak doldurmaları gerektiği anlamına gelir.
Bu durumda, ‘İncele’ye tıklayarak ve ardından her alan için form kimliğini bularak aynı süreci izlemeniz gerekir.
Tüm ID’lerinizi aldıktan sonra, ‘Form ID’ yazan Otomatik Tamamlama sayfasına kopyalayın.
Birden fazla kimlik eklerken, aşağıda gösterildiği gibi her bir kimliği tırnak içinde virgülle ayırmanız gerekecektir. İşiniz bittiğinde, ‘Değişiklikleri Kaydet’ düğmesine basmayı unutmayın.
Hepsi bu kadar; şimdi form sayfanızı ziyaret edebilir ve bir adres girmeyi deneyebilirsiniz.
Form alanı otomatik olarak Google Places ve Google Maps kullanarak öneriler göstermeye başlayacaktır.
Artık Google adres otomatik tamamlama özelliğini formlarınıza başarıyla eklediniz. Kullanıcılar, ister WooCommerce mağazanızdan ödeme yapıyor ister bir kullanıcı kaydı kaydını tamamlıyor olsunlar, formunuzu otomatik olarak doldurabilecekler.
Umarız bu makale WordPress’te adres alanları için otomatik tamamlama eklemeyi öğrenmenize yardımcı olmuştur. Ayrıca ticari web siteleri için olmazsa olmaz 24 WordPress eklentisi listemize veya e-posta bülteni oluşturma kılavuzumuza da göz atmak isteyebilirsiniz.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
M K Soleman Ahmed says
It is not working now.
WPBeginner Support says
Thank you for letting us know, we’ll be sure to take a look and find an alternative.
Yönetici
Vinod says
autocomplete is coming in the first filed but not in zip and state fields, please advice.
WPBeginner Support says
Hi Vinod,
Sadly, for that customization, you would need to reach out to the plugin’s support for if they currently support multiple fields
Yönetici
Mooki says
It works thanks, I had searched of websites and plugins and nothing worked until I got to this helpful site
WPBeginner Support says
Glad our site could help you
Yönetici
Fabiano Hirtz says
I have a travel site, tours and transfers, I would like to install this tool, when the client selected the place of visit and the arrival was not transferred, or tour, but it is not a contact form, but rather a search form, does it work? I put the class, did everything correctly, it still does not work. Can someone help me?
Jay Kuntal says
Hey, I tried a lot with getting API. It works fine when i use custom code from google on code pen. But when i put the same API on this plugin, it doesn’t work.
I have enabled two APIs – Places Web and Maps JS with credentials on Places Web.
What am i missing here
Thanks
ahmer says
Hi jay,
did you get it working? i’m stuck, can’t seem to get it working.
Tess says
Curious to know how to set a default country to appear first (instead of the default US addresses). Do you have any idea if there is a shortcode or some way to do this with this plugin?
BTW, I got the plugin working by just adding into the “Name” field. It works fine for me apart from wanting it to show AU addresses first.
asima says
How to populate the ‘current location’ in ‘area/neighborhood ‘ select dropdown as the first select option (rest of the options coming from the database) ?
steve hajjaj says
Hi there thanks for the article. I have followed the process you described but I still cannot get autocomplete to work at all. Is there something wrong with my google developers account ? as I can see the 2 APIs are enabled but cannot see any requests. Thanks
WPBeginner Support says
Hi Steve,
Make sure that you are targeting the correct CSS class or ID used by your form’s address field.
Yönetici
Luke says
I found a bug. When you type in the name of the business, the auto-completed address does NOT include the street number, only the street name (Main St, not 123 Main St). Big problem!!!
Luke says
Also, the zip code is always missing!
Luke says
Also, the only thing that comes through on form submission is the keys a user started typing. The address the user selects is what is shown, but not what is submitted with the form
WPBeginner Support says
Hey Luke,
If you think you have found a bug, then please report it to plugin authors. They may be aware of a fix or can then work on it.
Yönetici
Sarah says
If there is one thing we are mindful; it’s the ‘mission creep’ of Google into websites and related app areas.
Where able, we try not to engage google into our sites so as to remain ‘in control’ in what we do.
But thanks for the insight …
Camilo says
Can it be possible to have the autocomplete fill out the zipcode, state and country as well? I just followed everything here and the address populates automatically but the user still has to manually input their zip code, state, and city
WPBeginner Support says
Hi Camilo,
Currently it is only possible if you use the single field for complete address.
Yönetici
Zafar Rathore says
Excellent article for autocomplete. I was looking for such a easy to go method and you guys made it.
Autocomplete really saves a lot of time for end users which ultimately contributes to user friendly environment.
Keep it up guys.
Thank you
Nicholas Johnson says
I’m planned to create WP form with autocomplete, but I don’t know how to do that. After reading this post, I have an idea to create auto-complete forms.