How to Create AMP Forms in WordPress (The Easy Way)

Aynı hayal kırıklığını yaşayan çok sayıda WordPress sitesi sahibinden geri bildirim aldık. Formları iyi görünüyor, ancak AMP sayfalarında ya çok yavaş yükleniyorlar ya da hiç çalışmıyorlar.

Küçük bir işletme sahibi bize, müşterilerin sipariş formunun mobil cihazlarda yüklenmesi sonsuza kadar sürdüğü için sipariş formunu terk ettiklerini bile söyledi.

Bu tür hikayeler, basit bir çözüm bulmamız için bize ilham verdi. Herkesin kodlama veya baş ağrısı olmadan AMP uyumlu formlar oluşturmak için kullanabileceği bir yaklaşım.

Birçok eklenti ve yöntemi denedikten sonra, çalışan, hızlı ve mobil uyumlu formlar oluşturmanın güvenilir bir yolunu keşfettik.

Bu kılavuzda, WordPress siteniz için adım adım AMP formları oluşturmanın en kolay yolunu anlatacağız. İster anında mobil cihazlarda yüklenen bir iletişim formu, anket veya sipariş formu isteyin.

WordPress'te Neden AMP Formu Oluşturulur?

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ı daha hızlı yükleyerek harika bir mobil tarama deneyimi sunarken, WordPress web sitenizdeki birçok kullanışlı özelliği devre dışı bırakır.

Bunlardan biri 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 yüklenemez.

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. İşte bu rehberde ele alacağımız tüm konulara hızlı bir genel bakış:

• WordPress'e AMP Formları Ekleme (Adım Adım)
• AMP Formunuza Google reCAPTCHA Ekleme
• Ek İpucu: WordPress Sitenizi Mobil Uyumlu Hale Getirin

Hemen başlayalım!

WordPress'e AMP Formları Ekleme (Adım Adım)

AMP formu oluşturmanın en iyi yolu, WPForms kullanmaktır. AMP uyumlu WordPress formları oluşturmanıza yardımcı olan en yeni başlayan dostu WordPress iletişim formu eklentisidir. Ekibi, AMP formlarını WordPress için kolaylaştırmak üzere Google ile çalıştı.

Adım 1: WPForms Eklentisini Yükleyin ve Etkinleştirin

Bu eğitimde, daha fazla özellik, yapay zeka araçları, form şablonları, eklentiler ve özelleştirme seçenekleri sunduğu için WPForms Pro sürümünü kullanacağız. Başlamak için ücretsiz olarak kullanabileceğiniz bir WPForms Lite sürümü de mevcuttur.

WPForms'un hem Lite hem de Pro sürümü, temel bir AMP uyumlu iletişim formu oluşturmanıza olanak tanır.

İlk olarak, WPForms eklentisini yükleyip etkinleştirmeniz gerekecektir. Yardıma ihtiyacınız olursa, lütfen WordPress eklentisi nasıl kurulur hakkındaki rehberimize bakın.

Adım 2: WordPress Sitenize AMP Ekleyin

Bir form oluşturmadan önce, WordPress sitenizde AMP'nin kurulu olması önemlidir.

WordPress ile AMP kullanmak için, WordPress için resmi AMP eklentisini yükleyip etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirildikten sonra, eklenti WordPress siteniz için otomatik olarak Google AMP desteği ekleyecektir.

Ancak, kontrol panelinizden AMP » Ayarlar'a 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 doğru şekilde kurma kılavuzumuza bakın.

AMP'yi yapılandırdıktan 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 basitçe WPForms » Yeni Ekle sayfasına gidin.

WPForms varsayılan olarak AMP ile uyumludur, bu nedenle herhangi bir özel ayarı açmanıza gerek kalmayacaktır.

Form kurulum ekranında, formunuza bir ad vererek başlayabilirsiniz.

Ardından, formu nasıl oluşturacağınızı seçeceksiniz.

Sıfırdan başlamak istiyorsanız Boş Form'u seçebilirsiniz. Daha kolay ve hızlı seçeneği tercih ederseniz, Yapay Zeka form oluşturucuyu kullanabilirsiniz. Bu, yalnızca basit bir komutla formunuzu oluşturmanıza olanak tanır.

Veya ihtiyaçlarınıza göre hızlıca düzenleyebileceğiniz önceden hazırlanmış bir şablon kullanın. WPForms Pro, seçebileceğiniz 2.000'den fazla hazır şablonla birlikte gelir!

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 paneldeki bir form alanına tıklayıp form şablonuna sürüklemeniz yeterlidir.

Bundan sonra, alan seçeneklerini yapılandırabilirsiniz.

Bir alana tıklamanız yeterlidir, ardından solda ‘Alan Seçenekleri’ görünecektir.

Örneğin, bir alanın etiketini ve biçimini düzenleyebilir, onu zorunlu bir alan haline getirebilir, koşullu mantık ayarlayabilir ve daha fazlasını yapabilirsiniz. Benzer şekilde, diğer tüm alanları da özelleştirebilirsiniz.

Formlarınıza daha fazla alan da ekleyebilirsiniz. WPForms, açılır menü ve kaydırıcı gibi temel alanların yanı sıra tarih seçici ve sayfa sonu gibi daha gelişmiş alanlarla birlikte gelir.

Alan türlerini sol panelden sağa sürükleyip bırakın veya form önizlemesinde yukarı veya aşağı sürükleyerek yeniden düzenleyin

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 bilgilendirmek için e-posta bildirimleri ayarlamak için 'Bildirimler' sekmesine tıklayabilirsiniz.

Ardından, bir kullanıcının 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 Ekleme

Formunuz hazır olduğuna göre, onu WordPress sitenize ekleyebilirsiniz.

WPForms form oluşturucusunda, üstte bir ‘Göm’ 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 gerekecek.

Bu yapıldıktan sonra, 'Başlayalım' düğmesine tıklamanız yeterlidir.

Buradan, içerik düzenleyicisinde AMP formunuzun bir önizlemesini göreceksiniz.

Alternatif olarak, formu içerik düzenleyicisine eklemek için WPForms bloğunu da kullanabilirsiniz.

Lütfen açılır menüden AMP formunuzu seçin.

Ardından, sayfanızı yayınlayabilir veya güncelleyebilirsiniz.

Hepsi bu kadar! Başka hiçbir ayar yapmanıza gerek yok. WPForms eklentisi artık formunuza tam AMP desteği ekleyecektir.

Nasıl göründüğünü görmek isterseniz, sayfayı cep telefonunuzdan açabilirsiniz. Veya sayfa URL'nizin sonuna /amp/ veya /?amp ekleyerek sayfayı masaüstü tarayıcınızda açabilirsiniz, şöyle ki:

https://www.example.com/contact/?amp

AMP Formunuza Google reCAPTCHA Ekleme

Varsayılan olarak WPForms, spam'ı yakalamak ve engellemek için spam önleme ayarları içerir. Ek olarak, spam gönderimlerini azaltmak için Google reCAPTCHA'yı kullanabilirsiniz.

AMP formlarınızla Google reCAPTCHA'yı kullanmak için sitenizi Google reCAPTCHA v3 için kaydetmeniz 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. İşlem tamamlandığında, 'Yeni bir site kaydet' sayfasını göreceksiniz.

Son olarak, Etiket alanına web sitenizin adını girmeniz gerekir. Google AMP yalnızca reCAPTCHA v3'ü destekler, bu nedenle ‘Puana dayalı (v3)’ reCAPTCHA türü seçeneğini belirlemelisiniz.

Bundan sonra, alan adınızı (https://www. olmadan) Alan Adları alanına girin.

Ardından, 'Gönder' düğmesine tıklayın.

Ardından, reCAPTCHA'yı sitenize eklemek için site anahtarını ve gizli anahtarı içeren bir başarı mesajı göreceksiniz.

Bu anahtarları kopyalamanız yeterlidir.

Artık formlarınıza reCAPTCHA eklemek için Google API anahtarlarınız var. Ancak, reCAPTCHA ile AMP uyumluluğunu sağlamak için bir ayar daha gereklidir.

İ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 tekrar göreceksiniz. Kutuyu işaretleyin ve aşağıdaki 'Kaydet' düğmesine tıklayın.

AMP formlarına reCAPTCHA eklemek için Google API anahtarlarınız olduğuna göre, bunları WPForms'a girmeniz gerekiyor.

WordPress kontrol panelinizde WPForms » Ayarlar » CAPTCHA sayfasına gidebilirsiniz.

Sonra, 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ıklayın.

Google reCAPTCHA artık WPForms'a eklendiğine göre, gerektiğinde formlarınızda etkinleştirebilirsiniz.

WPForms » Tüm Formlar'a 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.

İş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'lı AMP formunun çalıştığını görebilirsiniz.

Ek İpucu: WordPress Sitenizi Mobil Uyumlu Hale Getirin

AMP formları oluşturmak harika bir başlangıçtır, ancak tüm sitenizi mobil uyumlu hale getirmek kullanıcı deneyiminizi daha da iyileştirecektir. İşte birkaç hızlı ipucu:

• Mobil uyumlu bir navigasyon menüsü kullanın: Ziyaretçilerin sitenizde gezinmesini ve küçük ekranlarda bile ihtiyaç duydukları şeyleri bulmasını kolaylaştırın.
• CTA düğmesi yerleşimini ve boyutunu ayarlayın: harekete geçirici mesaj düğmelerinizin dokunulmasının kolay olduğundan ve çok fazla kaydırma yapmadan göründüğünden emin olun.
• Web sitesi hızınızı önceliklendirin: Görüntüleri sıkıştırın ve yükleme sürelerini azaltmaya yardımcı olmak için önbellekleme eklentileri kullanın.

Mobil uyumlu bir site, ziyaretçileri etkileşimde tutar ve formlarınızdan daha fazla dönüşüm elde etmenize yardımcı olur!

Ayrıntılar için, mobil uyumlu bir WordPress sitesinin nasıl oluşturulacağına dair rehberimize başvurabilirsiniz.

Umarız bu makale, WordPress'te AMP formlarını kolayca nasıl oluşturacağınızı öğrenmenize yardımcı olmuştur. Ayrıca WordPress'te GDPR uyumlu formların nasıl oluşturulacağına dair rehberimize ve en iyi çevrimiçi form oluşturucularına ilişkin uzman seçimlerimize de bakmak isteyebilirsiniz.

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.