Form Düzenlerini Tasarlama: 7 En İyi Uygulama

Yayınlanan: 2022-10-14

İletişim formlarınızı geliştirmek için en iyi form düzenlerini mi arıyorsunuz?

Güvenecek fazla deneyiminiz yoksa, maksimum dönüşüm için form düzenleri tasarlamak zor olabilir.

Bu gönderi için, form düzeni tasarımlarınızı bir sonraki düzeye taşımak ve daha fazla dönüşüm elde etmek için en iyi 7 uygulamayı bir araya getirdik.

Bir Form Tasarlamanın En İyi Yolu Nedir?

Bir form tasarlamanın en iyi yolu, kullanıcı deneyimi hakkında düşünmektir.

Ziyaretçileriniz, özellikle göz korkutucu görünüyorsa, uzun ve karmaşık bir formu doldurmak istemeyecektir.

Sütunları kullanmak, form tasarımlarınızı daha çekici hale getirmek için kullanabileceğiniz tekniklerden yalnızca biridir. Sonuçta amaç, kullanıcı çabasını en aza indirirken, kullanıcıları formu mantıklı bir sırayla doldurmaya teşvik eden bir form düzeni kullanmaktır.

WPForms, en iyi WordPress Form Oluşturucu eklentisidir. Ücretsiz Al!

Form Düzenlerini Tasarlama: İzlenecek En İyi Uygulamalar

Bu makalede

  • 1. Tek Sütun Düzeni Her Zaman İdeal Değildir
  • 2. Form Düzenlerini Girdi Gereksinimleriyle Eşleştirin
  • 4. Mobil Uyumlu Düzenleri Kullanın
  • 5. Konuşma Formlarını Kullanın
  • 6. Alanlarınızı Sola Hizalı Tutun
  • 7. Satır İçi Hata Mesajlaşma ve Doğrulama Kullanın

1. Tek Sütun Düzeni Her Zaman İdeal Değildir

Tek sütunlu formların, çok sütunlu formlardan daha iyi dönüşüm oranları sunduğuna yaygın olarak inanılmaktadır. Ancak gerçek şu ki, mizanpajlar oluşturmak için herkese uyan tek bir yaklaşım yoktur .

Aslında, HubSpot'un form dönüştürme A/B testleri, belirli durumlarda iki sütunlu formların tek sütunlu formlardan daha iyi dönüştüğünü gösterir.

Örneğin, tek bir sütuna yığılmış uzun bir alan listeniz varsa, bu genellikle kullanıcı deneyimi için iyi değildir.

Aşağıdaki tek sütunlu form örneğinde kayda değer bir dikey kaydırma vardır (alanların yarısı görüntüye sığdırmak için kesilir), bu nedenle kullanıcıların bunu doldururken bazı zorluklarla karşılaşmasını bekleyebiliriz.

1 col form

Ancak, aynı sayıda alan bunun yerine düzgün bir şekilde iki veya daha fazla sütun halinde düzenlenirse, form çok daha kompakt hale gelir.

2 cols

Yukarıdaki iki sütunlu formdaki tüm alanlar aynı kat üzerinde görünür, bu da ziyaretçilerin bunları doldurmasını çok daha rahat hale getirir.

İşin iyi yanı, WPForms Düzen alanını kullanarak form düzenlerinizi kolayca değiştirebilmenizdir.

form layout field

Formunuz çok sayıda alan kullanıyorsa, form uzunluğunu azaltabilecek ve dönüşümlerinizi iyileştirebilecek olanı bulmak için her zaman farklı düzenlerle denemeler yapabilirsiniz.

2. Form Düzenlerini Girdi Gereksinimleriyle Eşleştirin

Gelişmiş düzenlere sahip formlar tasarlarken, sütunlarınızın genişliği, kullandığınız sütunların sayısı kadar önemlidir.

Örneğin, kullanıcıların sağdaki metin kutusu alanınıza ayrıntılı metin girmesini bekliyorsanız, o alan için sütunu genişletmeniz daha mantıklı olacaktır.

columns with different widths

Formunuzun her iki tarafında da aynı alanların kabul edildiği diğer senaryolarda, eşit boyutlu sütunlar kullanabilirsiniz.

2 cols

WPForms çok esnek düzenlere sahiptir ve aralarından seçim yapabileceğiniz 8 farklı düzen ön ayarı içerir. Ve tek bir tıklama ile bir düzenden diğerine geçiş yapabilirsiniz.

form layout presets

Her form düzeni, farklı durumlar için faydalar sunar. Alanlarınız için en uygun düzeni seçmek için en iyi pazarlama kararınızı kullanma meselesi.

3. Çok Adımlı Düzenlerle Uzun Formları Bölün

Kısa bir formunuz olduğunda, tüm alanlar doğal olarak sorunsuz bir şekilde tek bir sayfaya sığmalıdır.

Ancak çok fazla alanınız olduğunda işler zorlaşıyor. Formunuz çok uzunsa, tüm alanları tek bir sayfaya doldurmak iyi bir fikir değildir.

Bunun yerine, birkaç sayfaya bölünmüşlerse daha uzun formları daha kolay yönetilebilir hale getirebilirsiniz.

multi step forms

WPForms, çok adımlı formlar oluşturmanıza olanak tanır. Bu formlardaki her "adım", İleri düğmesine basıldığında anında görünür, böylece kullanıcılar bir sonraki adıma geçmek için aynı sayfayı tekrar tekrar yüklemek zorunda kalmazlar. Bu, maksimum kullanıcı rahatlığı sağlar.

Ayrıca bu formlar, kullanıcıların ilerlemelerini takip etmelerine yardımcı olan ve onları sonuna kadar devam etmeye teşvik eden bir ilerleme çubuğu içerir.

Düzen alanı gibi, çok adımlı formlar da uzun formları doldururken kullanıcı yorgunluğuyla mücadele etmenin başka bir yolunu sunar.

Hatta iki sütunlu düzenleri çok adımlı bir formda birleştirebilirsiniz. Form sayfalarınızdan biri diğerlerinden daha uzunsa, formunuzun sayfadan sayfaya daha düzgün görünmesini sağlamak için o bölüm için iki sütunlu bir düzen kullanabilirsiniz.

2 cols in multi-step

WPForms, formdan vazgeçmeyi en aza indirmenize yardımcı olacak birçok farklı özelliğe sahiptir. Sonunda, daha fazla dönüşüm elde etmek için farklı düzenler kullanmak mı yoksa en üste bir ilerleme çubuğu eklemek mi istediğiniz tamamen size kalmış.

4. Mobil Uyumlu Düzenleri Kullanın

Gelişmiş form düzenleri harika görünür ve akıllıca kullanıldığında masaüstlerinde bile iyi bir şekilde dönüştürülür. Ancak mobil farklı bir hayvandır.

Masaüstünde kusursuz çalışan çok sütunlu bir form, dikkatli olmazsanız mobilde görüntülendiğinde bozulabilir.

Bazı form oluşturucular, CSS kodlarını değiştirmek için fazladan çaba harcamadığınız sürece mobil uyumlu değildir.

mobile responsive design

Neyse ki, WPForms ile oluşturulmuş en gelişmiş çok sütunlu formlar bile tasarım gereği mobil uyumludur.

Bu, bir mobil cihaz çok sütunlu düzeninizi düzgün şekilde yükleyemezse, formların otomatik olarak tek bir sütuna daraltılacağı anlamına gelir.

Sonuç olarak, hangi cihazda olurlarsa olsunlar ziyaretçilerinizin her zaman en iyi deneyimi yaşamalarını ve formlarınızı rahatça doldurmalarını sağlayabilirsiniz.

5. Konuşma Formlarını Kullanın

Konuşma formları, kullanıcıların bir seferde bir soruyu yanıtlamasına olanak tanır. Bu form düzeni, kullanıcıların en az dikkat dağıtıcıyla her bir belirli soruya odaklanmasını istediğinizde çok yararlı olabilir.

Anketler veya geri bildirim formları için konuşma düzenini kullanmak genellikle iyi bir fikirdir.

preview conversational forms

WPForms ile ziyaretçiler, yalnızca klavye girişlerini kullanarak bir konuşma formunu doldurabilir ve bu da çok fazla ekstra kolaylık sağlar.

6. Alanlarınızı Sola Hizalı Tutun

Form alanlarınızı ve içeriğinizi belirli bir stile veya tasarıma uyacak şekilde merkeze hizalamak cazip gelebilir. Yine de buna karşı tavsiyede bulunuruz, çünkü çoğu insan içeriği okumaya ve içerikle etkileşime bu şekilde alışmaz.

Çoğu insan soldan sağa okur, bu nedenle çoğu durumda sola hizalamayı kullanmak mantıklıdır.

İşin iyi yanı, tüm WPForm alanlarının varsayılan olarak sola hizalanmış olmasıdır.

simple form frontend

Sürekli olarak sola hizalanmış alanlara bağlı kaldığınız sürece, ziyaretçinin kafasını karıştırmadan daha karmaşık form düzenleri kullanabilirsiniz.

7. Satır İçi Hata Mesajlaşma ve Doğrulama Kullanın

Formunuz ne kadar iyi tasarlanmış olursa olsun, kullanıcıların ara sıra girdi hataları yapmasını beklemelisiniz.

Sonuç olarak, sorunu net bir şekilde vurgulayan hata mesajları göstermek ve kolayca düzeltmek için rehberlik sağlamak akıllıca olacaktır.

WPForms, söz konusu alanın hemen altında görünen satır içi hata mesajlarını otomatik olarak kullanır. Bu, ziyaretçilerin hataları gerçek zamanlı olarak düzeltmelerini sağlar ve proaktif olarak kullanıcı karışıklığını azaltır.

Validation Error

WPForms'da giriş hatasının doğasına bağlı olarak görünen birçok farklı türde alan doğrulama mesajı vardır. Böylece formlarınızı özgürce dağıtabilir ve WPForms'un herhangi bir doğrulama sorununu halletmesine izin verebilirsiniz.

Ardından, Konuşma Anketleri Oluşturun

Bir seferde bir soru gösteren anketler, kullanıcı deneyimi için harikadır. WPForms konuşma formlarını kullanarak uygulanması da kolaydır. Her seferinde bir soru gösteren anketleri nasıl oluşturacağınız aşağıda açıklanmıştır.

WordPress formları oluşturmaya hazır mısınız? Kullanımı en kolay WordPress form oluşturucu eklentisini bugün kullanmaya başlayın. WPForms Pro, ücretsiz dosya yükleme özelliği ve ücretsiz dosya yükleme formu içerir ve 14 günlük para iade garantisi sunar.

WordPress Formunuzu Şimdi Oluşturun

Ve unutmayın, bu makaleyi beğendiyseniz, lütfen bizi Facebook ve Twitter'da takip edin.