WordPress sitenizde AMP dostu formlar mı oluşturmak istiyorsunuz?
Hızlandırılmış Mobil Sayfalar (AMP) web sitelerini hızlandırmaya yardımcı olur. Ancak AMP, sitenizin performansını artırmak için WordPress formlarını kaldırır.
Bu makalede, WPForms kullanarak WordPress’te AMP formlarını nasıl oluşturacağınızı göstereceğiz (kolay yol).
WordPress’te Neden AMP Formu Oluşturmalısınız?
Hızlandırılmış Mobil Sayfalar veya AMP, web sitelerinin mobil cihazlarda daha hızlı yüklenmesini sağlayan bir Google projesidir.
AMP, web sayfalarınızın daha hızlı yüklenmesini sağlayarak harika bir mobil tarama deneyimi sunarken, WordPress web sitenizdeki birçok yararlı özelliği devre dışı bırakır.
Bunlardan biri de iletişim formlarıdır. AMP sınırlı sayıda HTML ve JavaScript kullandığından, WordPress formlarınızı AMP sayfalarında düzgün bir şekilde yükleyemez.
Alternatif olarak, masaüstü ve mobil cihazlarda mükemmel performans sunan birçok duyarlı WordPress temasından birini kullanabilirsiniz. Bu şekilde, mobil cihazlarda üstün bir deneyim sunmak için web sitenizin stilinden ödün vermek zorunda kalmazsınız.
Ancak, WordPress sitenizde AMP kullanıyorsanız, formları göstermek için bir eklenti kullanabilirsiniz. Sitenize nasıl AMP formu ekleyeceğinizi görelim.
WordPress’te AMP Formları Ekleme (Adım Adım)
Bir AMP formu oluşturmanın en iyi yolu WPForms kullanmaktır. AMP’ye hazır WordPress formları oluşturmanıza yardımcı olan en acemi dostu WordPress form eklentisidir.
Ekipleri kısa süre önce AMP formlarını WordPress için kolay hale getirmek üzere Google ile birlikte çalıştı.
Adım 1: WPForms Eklentisini Kurun ve Etkinleştirin
Bu eğitim için WPForms Pro sürümünü kullanacağız çünkü daha fazla özellik, form şablonları, eklentiler ve özelleştirme seçenekleri sunuyor. Ücretsiz olarak başlamak için kullanabileceğiniz bir WPForms Lite sürümü de vardır.
WPForms’un hem lite hem de pro sürümü, AMP’ye hazır temel bir iletişim formu oluşturmanıza olanak tanır.
Öncelikle WPForms eklentisini yüklemeniz ve etkinleştirmeniz gerekecektir. Yardıma ihtiyacınız varsa, lütfen bir WordPress eklentisinin nasıl kurulacağına ilişkin kılavuzumuza bakın.
Adım 2: WordPress Sitenize AMP Ekleyin
Bir form oluşturmadan önce, WordPress sitenizde AMP’yi kurmuş olmanız önemlidir.
AMP’yi WordPress ile kullanmak için, WordPress için resmi AMP eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.
Eklenti etkinleştirildiğinde, WordPress siteniz için Google AMP desteğini otomatik olarak ekleyecektir.
Ancak, kontrol panelinizden AMP ” Ayarlar bölümüne giderek web siteniz için AMP ayarlarını değiştirebilirsiniz.
AMP ayarları sayfasından web sitenizde AMP’yi etkinleştirebilir veya devre dışı bırakabilir, AMP için bir web sitesi modu seçebilir ve desteklenen şablonları seçebilirsiniz.
Daha fazla ayrıntı için lütfen WordPress sitenizde Google AMP’yi nasıl düzgün bir şekilde kuracağınıza ilişkin kılavuzumuza bakın.
AMP’yi yapılandırdıktan sonra, bir sonraki adım WordPress sitenizde AMP uyumlu bir iletişim formu oluşturmaktır.
Adım 3: WPForms’ta Yeni Bir AMP Formu Oluşturun
Yeni bir WordPress formu oluşturmak için WPForms ” Yeni Ekle sayfasına gitmeniz yeterlidir. WPForms varsayılan olarak AMP ile uyumludur, bu nedenle herhangi bir özel ayarı açmanız gerekmez.
Form kurulum ekranında, bir form şablonu seçebilir ve üst kısma bir ad girebilirsiniz. Sıfırdan başlamak istiyorsanız Boş Formu seçebilir veya ihtiyaçlarınıza göre hızlıca düzenlemek için önceden oluşturulmuş bir şablon kullanabilirsiniz.
Bu eğitim için‘Basit İletişim Formu‘ şablonunu seçeceğiz.
Ardından, şablonunuzu özelleştirmek için farklı seçeneklerin bulunduğu form oluşturucu sayfasını göreceksiniz.
Buradan form alanları ekleyebilir veya kaldırabilirsiniz. Formunuza yeni bir alan eklemek için sol panelden bir form alanına tıklayabilir ve form şablonuna sürükleyebilirsiniz.
Not: Modern Stil Açılır Menü ve Sayı Kaydırıcısı alanları Google AMP ile uyumlu değildir. Bunun yerine, Sayı ve Klasik Stil Açılır Menü alanlarını kullanmanız gerekecektir.
Bundan sonra, alan seçeneklerini yapılandırabilirsiniz. Bir alana tıklamanız yeterlidir, ardından sol tarafta Alan Seçenekleri görünecektir.
Örneğin, bir alanın etiketini ve biçimini düzenleyebilir, gerekli bir alan haline getirebilir, koşullu mantık ayarlayabilir ve daha fazlasını yapabilirsiniz. Benzer şekilde, diğer tüm alanları da özelleştirebilirsiniz.
Bundan sonra, form ayarlarınızı yapılandırmak için ‘Ayarlar’ sekmesine tıklayabilirsiniz.
‘Genel’ ayarlar form adınızı, gönder düğmesi metnini, gönder düğmesi işleme metnini ve daha fazlasını değiştirmenize olanak tanır.
Ardından, bir kullanıcı formu tamamladığında sizi bilgilendirecek e-posta bildirimlerini ayarlamak için ‘Bildirimler’ sekmesine tıklayabilirsiniz.
Ardından, bir kullanıcı formu gönderdiğinde gösterilecek bir onay mesajı ayarlamak için ‘Onay’ sekmesine tıklayabilirsiniz.
WPForms, form gönderiminde bir mesaj göstermenize, bir sayfa göstermenize veya kullanıcıları bir URL’ye yönlendirmenize olanak tanır.
Yapılandırma tamamlandıktan sonra formunuzu kaydedebilirsiniz.
Adım 4: AMP Formunuzu Bir Sayfaya Ekleyin
Artık WordPress formunuz hazır olduğuna göre, onu bir sayfaya ekleyebilirsiniz.
WPForms form oluşturucusunda, en üstte bir ‘Yerleştir’ düğmesi göreceksiniz. Formunuzu yeni bir sayfaya veya mevcut bir sayfaya eklemek için üzerine tıklamanız yeterlidir.
Ardından, yeni bir sayfa oluşturmanızı veya mevcut bir sayfayı seçmenizi isteyen bir açılır pencere açılacaktır.
Bu eğitim için ‘Yeni Sayfa Oluştur’ seçeneğini seçeceğiz.
Ardından, yeni form sayfanız için bir ad girmeniz gerekecektir.
Bu işlem tamamlandıktan sonra, ‘Hadi Gidelim’ düğmesine tıklamanız yeterlidir.
Buradan, içerik düzenleyicide AMP formunuzun bir önizlemesini göreceksiniz.
Alternatif olarak, formu içerik düzenleyiciye eklemek için WPForms bloğunu da kullanabilirsiniz. Açılır menüden AMP formunuzu seçmeniz yeterlidir.
Ardından, sayfanızı yayınlayabilir veya güncelleyebilirsiniz.
Hepsi bu kadar! Başka bir şey yapılandırmanıza gerek yok. WPForms eklentisi artık formunuza tam AMP desteği ekleyecektir.
Nasıl göründüğünü görmek istiyorsanız, sayfayı cep telefonunuzda açabilirsiniz. Veya sayfanızın URL’sinin sonuna aşağıdaki gibi /amp/ veya /?amp ekleyerek sayfayı masaüstü tarayıcınızda açabilirsiniz:
https://www.example.com/contact/?amp
AMP Formunuza Google reCAPTCHA Ekleme
Varsayılan olarak, WPForms spam yakalamak ve engellemek için anti-spam ayarları içerir. Ayrıca, spam gönderimleri azaltmak için Google reCAPTCHA’yı kullanabilirsiniz.
Google reCAPTCHA’yı AMP formlarınızla kullanmak için sitenizi Google reCAPTCHA v3’e kaydettirmeniz ve Google API anahtarlarını almanız gerekir.
İlk olarak, Google reCAPTCHA web sitesine gitmeniz ve sayfanın sağ üst köşesindeki ‘v3 Admin Console’ düğmesine tıklamanız gerekecektir.
Bundan sonra, Google hesabınızla oturum açmanız gerekir. Giriş yaptıktan sonra, ‘Yeni bir site kaydet’ sayfasını göreceksiniz.
Ardından, Etiket alanına web sitenizin adını girmeniz gerekir. Google AMP yalnızca reCAPTCHA v3’ü destekler, bu nedenle ‘Puan tabanlı (v3)’ reCAPTCHA türü seçeneğini seçmelisiniz.
Bundan sonra, alan adınızı (https://www olmadan) Alan Ad ları alanına girin.
Ardından, ‘Gönder’ düğmesine tıklayın.
Ardından, sitenize reCAPTCHA eklemek için site anahtarı ve gizli anahtarla birlikte bir başarı mesajı göreceksiniz.
Bu anahtarları kopyalamanız yeterlidir.
Artık formlarınıza reCAPTCHA eklemek için Google API anahtarlarına sahipsiniz. Ancak, reCATCHA ile AMP uyumluluğunu sağlamak için gereken bir ayar daha var.
İlk olarak, ‘Ayarlara Git’ bağlantısına tıklamanız gerekecektir.
Ardından, reCAPTCHA ayarlarını ‘Bu anahtarın AMP sayfalarıyla çalışmasına izin ver’ onay kutusuyla birlikte tekrar göreceksiniz. Kutuyu işaretleyin ve aşağıdaki ‘Kaydet’ düğmesine tıklayın.
Artık AMP formlarına reCAPTCHA eklemek için Google API anahtarlarına sahip olduğunuza göre, bunları WPForms’a girmeniz gerekir.
WordPress kontrol panelinizde WPForms ” Ayarlar ” CAPTCHA sayfasını açabilirsiniz.
Ardından, aşağı kaydırabilir ve ‘reCAPTCHA v3’ seçeneğini seçebilirsiniz.
Bundan sonra, site anahtarını ve gizli anahtarı yapıştırmanız yeterlidir. İşiniz bittiğinde, ‘Ayarları Kaydet’ düğmesine tıklamanız yeterlidir.
Artık Google reCAPTCHA WPForms’a eklendiğine göre, gerektiğinde formlarınızda etkinleştirebilirsiniz.
WPForms ” Tüm Formlar bölümüne gidin ve reCAPTCHA’yı etkinleştirmek istediğiniz formu seçin. Form adının altındaki ‘Düzenle’ düğmesine tıklamanız yeterlidir.
Form kurulum ekranı göründüğünde, ‘Ayarlar’ sekmesine tıklayın ve ‘Spam Koruması ve Güvenlik’ sekmesini seçin.
Buradan, Google v3 reCAPTCHA seçeneğini etkinleştirmeniz yeterlidir.
Bu işlem tamamlandıktan sonra, sağ üst köşedeki ‘Kaydet’ düğmesine tıklayarak formunuzu kaydedin.
Bundan sonra, iletişim sayfanızı tekrar ziyaret edebilir ve reCAPTCHA ile AMP formunu çalışırken görebilirsiniz.
Umarız bu makale WordPress’te AMP formlarının nasıl kolayca oluşturulacağını öğrenmenize yardımcı olmuştur. WordPress’te GDPR uyumlu formların nasıl oluşturulacağına ve WordPress için en iyi sürükle ve bırak sayfa oluşturucuya ilişkin kılavuzumuzu da görmek 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!
Jiří Vaněk says
That’s great news. I can finally use the potential of the paid WP Forms I have on the site (that is, besides being able to use it on all the sites I’ve done thanks to unlimited sites). Thank you for the detailed instructions on how to use WP Forms on websites with AMP.
Konrad says
Great info! For those on a budget, are there any good free alternatives to WPForms that offer AMP compatibility?
WPBeginner Support says
If we find one we would recommend we will be sure to share!
Yönetici
Adrian says
This article is a game-changer for anyone seeking to optimize their WordPress site for mobile performance with Accelerated Mobile Pages (AMP). The clear and concise explanation of how AMP impacts WordPress forms, and the subsequent guidance on creating AMP-friendly forms using WPForms, is incredibly valuable.
WPBeginner Support says
Glad you found it helpful!
Yönetici
Shafqat Khan says
Great tutorial! AMP forms are crucial for mobile performance, and your guide simplifies the process with WPForms. I appreciate the clear steps, especially for adding Google reCAPTCHA, which is essential for security. Your articles are always a valuable resource!
WPBeginner Support says
Glad you’ve found our content helpful!
Yönetici
Ralph says
Seems like it is good idea to do this if my site can be faster for mobile. I personally don’t like using my smartphone for reading websites, but from Google Analytcis i see my website went from 55-60% mobile users montly to 73-75% mobile users montly. Sometimes it is lower but it is inevitable trend that all bloggers should respect and adapt.
WPBeginner Support says
Glad you liked our recommendation
Yönetici
Aman says
Thanks WP Begginer, Helpful for my website and works completely well.
WPBeginner Support says
Glad to hear our guide could help!
Yönetici
faizan says
I learned information from WP Beginner and collected many things that can help me for creating best website
WPBeginner Support says
Glad to hear our guides have been helpful
Yönetici
Mikolaj says
Great article! It’s super helpful for anyone who wants to keep their WordPress site AMP-friendly while still having forms. WPForms looks like the way to go. Thanks for sharing!
WPBeginner Support says
Glad you found the post helpful!
Yönetici
Czarek says
This article is a valuable resource for anyone looking to optimize their WordPress site for mobile users while still maintaining the functionality of forms. It’s important to acknowledge that while Accelerated Mobile Pages (AMP) can significantly boost website speed, it often comes at the cost of removing certain features, including forms. The fact that this article addresses this issue by providing a solution is highly beneficial.
The recommendation to use WPForms for creating AMP-friendly forms is particularly noteworthy as it offers an easy and efficient method for ensuring your website remains user-friendly on mobile devices. This approach can help website owners strike a balance between speed and functionality, ensuring a positive user experience.
My question is: Are there any specific considerations or best practices to keep in mind when implementing AMP forms on a WordPress site using WPForms, especially in terms of form design, user experience, and potential impacts on SEO?
WPBeginner Support says
For AMP forms the main thing to keep in mind is ensuring that your users can use the form and there are not strange formatting issues when viewed.
Yönetici
Ronald says
What about user-submitted content forms (for posts or custom post types)? How about user registration/login forms? I know WP Forms has those features at premium costs, but do they still work with AMP?
WPBeginner Support says
Currently the AMP support is valid only for the basic contact form feature.
Yönetici
Irene says
This is nice. I’m so adding AMP and reCaptcha to my site as I’m already using wpforms lite. But I hope it doesn’t take up much resources.
Thanks WPbeginners. Following you has been one of the best decisions I made this year. God bless the day I found you.
WPBeginner Support says
Glad our guide could be helpful
Yönetici