5 Kolay Adımda WordPress'te Çok Adımlı Form Nasıl Eklenir

Tek adımlı WordPress formunuzu çok adımlı WordPress formuna dönüştürmenin , dönüşümünüzü neredeyse %60 oranında artırabileceğini biliyor muydunuz ? Aslında, bazı durumlarda dönüşüm oranı %300'e kadar çıkabilir .

Evet. Çünkü günümüzde insanlar çok meşgul ve dikkatleri kısa. Bunun da ötesinde, onlardan bir adımlık uzun bir form doldurmalarını isterseniz, büyük olasılıkla web sitenizden ayrılacak ve formu eksik bırakacaktır.

Ancak, WordPress siteniz için çok adımlı bir form kullanarak bu senaryoyu değiştirebilirsiniz. Ama soru nasıl?

İşte bu yüzden size WordPress'te çok adımlı bir form ekleme konusunda adım adım bir kılavuz göstermek için buradayım.

WordPress web sitesinde birkaç dakika içinde nasıl kolayca çok adımlı bir form oluşturabileceğinizi öğrenmek için okumaya devam edin….

Çok Adımlı Form nedir?

Adından da anlaşılacağı gibi, soruların/giriş alanlarının hepsini tek bir adımda koymak yerine farklı adımlara bölündüğü, birden çok adıma sahip bir form. Bir tanım arıyorsanız, HubSpot çok adımlı formu şu şekilde tanımlar.

Çok adımlı bir form, birden çok parçaya bölünmüş uzun bir formdur. Uzun formları daha az göz korkutucu ve göz korkutucu hale getirmek için kullanılırlar.

– Hubspot

Çok adımlı formlar, temel olarak, çok fazla giriş alanı olan uzun formun yerine geçer. Nispeten daha küçük bir formunuz varsa, tek adımlı bir forma bağlı kalabilirsiniz.

Artık çok adımlı bir formun ne olduğunu bildiğinize göre, WordPress sitenize neden çok adımlı bir form eklemeyi düşünmeniz gerektiğine dair bazı nedenlere bakalım.

WordPress'te Neden Çok Adımlı Form Kullanılır?

Basit cevap, dönüşüm oranınızı hızla artırmaktır. Çok adımlı formlar günümüzde kayıt formları, rezervasyon formları, yemek siparişi formları vb. gibi kullanımları olan web sitelerinde son derece popüler hale geliyor. Web sitenizde çok adımlı formu kullanmayı düşünmenizin nedenlerinden bazıları şunlardır:

• Çok adımlı formlar, kullanıcının dikkatini çekmek söz konusu olduğunda daha iyi çalışır. Sonuç olarak, insanlar daha fazla etkileşime giriyor ve form gönderimlerini daha sık tamamlıyor.
• Kullanıcılar multistep'i daha kullanıcı dostu buluyor ve uzun tek adımlı bir formun sağlayamadığından daha iyi kullanım kolaylığı sağlıyor.
• Çok adımlı bir form içeren bir gezinme çubuğu/ilerleme çubuğu bulunduğundan, kullanıcılar çok adımlı bir formu doldurmaya daha fazla teşvik edilir.
• Koşullu çok adımlı formlar, yalnızca ihtiyacınız olan ilgili verileri toplamak için mükemmeldir.
• Yukarıda bahsedilen tüm olumlu yönlerin bir sonucu olarak, çok adımlı formlar dönüşüm oranını arttırır.

Artık WordPress sitesinde çok adımlı formlar kullanmanız gerektiğini bildiğinize göre, çok parçalı formunuzu oluşturmak için ihtiyacınız olan mükemmel kurulumu oluşturmanın zamanı geldi.

Bir WordPress Çok Adımlı Form oluşturmanız gerektiğini ayarlayın

WordPress ile birlikte, WordPress'te kolaylıkla çok adımlı formlar oluşturmak için iki eklentiye daha ihtiyacınız olacak. Bu WordPress eklentileri şunlardır:

1. eleman (ücretsiz sürüm)
2. MetForm (Ücretsiz ve Profesyonel)

Elementor, en iyi WordPress sayfa oluşturucusudur ve MetForm, en hızlı büyüyen WordPress çok adımlı form eklentilerinden biridir. MetForm'u yüklemek için yardıma ihtiyacınız varsa, MetForm'un nasıl kurulacağına ilişkin belgelerimize göz atabilirsiniz.

Yüklemeyi bitirdikten sonra, Metform'u kullanmadan önce Elementor sayfa oluşturucu ile bir sayfa oluşturmanız gerekir. Bunun için Dashboard ⇒ Sayfa ⇒ Yeni Ekle'ye gidin.

Şimdi, uygun bir Başlık sağlayın, Şablon olarak Elementor Full Width'i seçin, Yayınla h'ye tıklayın . Bundan sonra, Elementor ile Düzenle'ye tıklayın.

Son olarak, çok adımlı formunuzu oluşturmaya hazırsınız. Öyleyse, ana sürece geçelim.

Not: Bu eğitimde size bir sayfaya nasıl çok adımlı bir form ekleyeceğinizi göstereceğim. Ancak , MetForm ile oluşturulmuş formları kalıcı bir açılır pencereye de kolayca ekleyebilirsiniz.

WordPress'te Çok Adımlı Bir Form Nasıl Oluşturulur

Bu blogda, sadece 5 kolay adımda sıfırdan modern görünümlü çok adımlı bir form oluşturmayı öğreneceksiniz:

1. Adım: MetForm'u Sürükleyip Bırakın

Elementor ile Düzenle moduna girdikten sonra, MetForm'u arayın ve formun görünmesini istediğiniz yere sürükleyip bırakın .

2. Adım: Yeni Bir Form Oluşturun

MetForm Düzenle seçeneklerine gitmek için form bölümüne tıklayın. Formu Düzenle Düğmesine tıklayın .

Bir kez yeni pencere açılır

• Yeni'yi seçin (yeni form oluşturun)
• Form için bir form adı sağlayın
• Boş şablonu seçin,
• ve Düzenle Formuna tıklayın

3. Adım: MetForm ve Elementor Sayfa oluşturucuyu kullanarak Sıfırdan Çok Adımlı Form Oluşturun

Formu Düzenle'ye tıkladığınızda, formunuzu sıfırdan oluşturmak için Elementor sayfa oluşturucu ile başka bir yeni pencereye erişebilirsiniz. Çok adımlı formda tek bir adım oluşturmak için şu dört adımı izlemeniz gerekir:

Yepyeni bir bölüm ekle

Giriş alanlarını gereksinimlere göre sürükleyip bırakın

Formun ifadesine bağlı olarak Önceki/Sonraki/Gönder düğmesini sürükleyip bırakın

Bölüme uygun bir ad verin

Bu blog için, yukarıda belirtilen adımları kullanarak 3 adımlı Hotel Booking Multi-step formunun bir demosunu oluşturacağım. Formun üç adımı Kişisel Bilgiler, Rezervasyon Bilgileri ve Ek Bilgileri içerecektir.

Rezervasyon Formu Birinci Adım – Kişisel Bilgiler:

• Kişisel Bilgiler bölümü için Elementor + simgesine tıklayın ve iki eşit sütunlu bir yapı seçin.

• Metin giriş alanını arayın ve sol sütundaki form alanını sürükleyip bırakın.

• Şimdi bu giriş alanının niteliğini düzenlemek için düzenle işaretine tıklayın, İçerik ⇒ içerik seçeneğine gidin ve aşağıdaki seçenekleri düzenleyin:
  • Etiketi Göster: Giriş alanının etiketini göstermek için bu seçeneği açın.
  • Konum: Etiketi üstte veya solda konumlandırmayı seçebilirsiniz.
  • Etiket: Etiketinize bir ad verin. "Ad" kullanacağım.
  • Ad: Ad alanı zorunludur ve benzersiz olmalıdır. Bu nedenle, her alana farklı bir ad verdiğinizden ve boşlukları alt çizgi/tire ile değiştirdiğinizden emin olun.
  • Yer tutucu: Bir yer tutucu metin sağlayın.
  • Yardım Metni: Kullanıcılara bir yardım metni vermek isterseniz buradan yapabilirsiniz.

• Ardından, aşağıdaki seçenekleri değiştirmek için İçerik ⇒ Ayarlar'a gidin:
  • Gerekli: Bu form alanını zorunlu kılmak için bu seçeneği açın.
  • Doğrulama türü: Metin alanı için karakter uzunluğuna, sözcük uzunluğuna ve ifadeye göre farklı doğrulama türleri ayarlayabilirsiniz.
  • Uyarı mesajı: Burada gereklilik karşılanmadığında ortaya çıkacak uyarı mesajını ayarlayabilirsiniz.

Not: Bu formun ikinci adımında koşullu mantık özelliğini kullanacağım.

Ad gibi, soyadı için başka bir Metin giriş alanı ekleyin. Kişisel bilgiler adımının bir parçası olarak, buraya iki alan daha ekleyeceğim; E-posta ve Cep telefonu numarası.

E-posta ve Cep Numarası alanının ayarlarını değiştirmeyi tamamladığınızda. Sonraki Adım düğmesini arayın ve sürükleyip bırakın . Etiket, Düğme hizalama, simge, simge konumu gibi farklı düğme ayarlarını değiştirebilirsiniz.

• Şimdi ilk adıma uygun bir isim vermek için ilk adım için bölüm hazır
  • Ayarlar seçeneğini açmak için altı nokta simgesine tıklayın ve düzene gidin ⇒ çok adımlı .
  • Çok Adımlı Sekme Başlığı seçeneğinde bir ad sağlayın
  • Kitaplıktan bir simge seçin veya bir SVG yükleyin.
  • Kaydetmek için güncellemeye tıklayın.

Şimdi ilk bölüm hazır olduğuna göre, İkinci Adımı oluşturalım.

Rezervasyon Formu İkinci Adım – Rezervasyon Bilgileri:

• İkinci adım için yeni bir bölüm seçmeniz gerekiyor. Tek sütunlu yeni bir bölüm seçeceğim ve ardından iki eşit sütunlu yeni bir iç bölüm ekleyeceğim.
• Sütunu seçtikten sonra giriş ve çıkış seçenekleri için 2 tarih giriş alanını sürükleyip bırakın.

Zorunlu Takip Kuralı : Yeni adıma başlamak için yeni bir bölüm seçmelisiniz , aksi takdirde eklediğiniz herhangi bir giriş alanı bir önceki adıma eklenecektir. Bu nedenle, her zaman unutmayın, aynı düzene sahip olsa bile yeni adımlar yeni bir bölüm gerektirir .

• Metin alanı için belirtilen ayarlar seçeneğiyle birlikte, İçerik ⇒ Ayarlar altında Tarih giriş alanı için aşağıdaki ayarları alırsınız.
  • Geçerli tarihi minimum tarih olarak ayarla: Geçerli tarihi minimum tarih olarak ayarlamak için bu seçeneği açın.
  • Minimum tarihi manuel olarak ayarla: Mevcut tarihi minimum tarih olarak ayarlamak istemiyorsanız minimum tarihi manuel olarak da ayarlayabilirsiniz.
  • Maksimum tarihi manuel olarak ayarlayın: Burada maksimum tarihi ayarlayabilirsiniz.
  • Tarih Listesini Devre Dışı Bırak: Bazı tarihleri ​​devre dışı bırakmak için bu seçeneği kullanabilirsiniz. Herhangi bir tarihi devre dışı bırakmak için + ÖĞE EKLE düğmesine tıklayın ve tarihi seçin.
  • Aralık tarih girişi: Bu seçeneği açarak, kullanıcılara bir tarih aralığı seçme seçeneğini etkinleştirebilirsiniz. Ancak bu form için bu seçeneği kapalı bırakacağım.
  • Yıl girişi: Tarih girişinin bir parçası olarak bir yılı almak için bu seçeneği açın.
  • Ay girişi: Tarih girişinin bir parçası olarak ayı etkinleştirmek için bu seçeneği açın.
  • Tarih girişi: Tarih girişinin bir parçası olarak bir tarih (gün) almak için bu seçeneği açın
  • Tarih formatı: Tarih girişinin formatını buradan ayarlayın.
  • Yerelleştirme: Tercihinize göre açılır menüden konumu seçin.
  • Bununla zaman girmek istiyorum: Girdi olarak verilerle birlikte zaman almak için bu seçeneği açın. Bu seçeneği açarsanız, 24 saat etkinleştirme seçeneği olan başka bir seçenek alırsınız. Bu seçeneği kullanarak 24 saat biçimini etkinleştirebilirsiniz.

Şimdi son olarak Check Out alanı için koşullu form özelliğini kullanacağız. Check out alanını sadece check in alanı boşken görünür kılmak için,

• Check-In giriş alanının Ad alanının değerini kopyalayın .
• Ardından İçeriğe gidin ⇒ Koşullu , etkinleştirme seçeneğini açın
• Koşul eşleşme ölçütleri açılır menüsünden VE'yi seçin.
• Eylem açılır seçeneklerinden Bu Alanı Göster'i seçin.
• + ÖĞE EKLE üzerine tıklayın, if giriş alanına kopyaladığınız check-in alan adı değerini yapıştırın.
• Eşleşme (karşılaştırma) açılır menüsünden “ boş değil ”i seçin.

Şimdi görmek için önizleme düğmesine tıklayın. Check-out alanı, yalnızca Check-in tarihi seçtiğinizde görünür olmalıdır.

Koşullu seçenek başlangıçta kullanıma almayı gizlediğinde formun kötü görünmemesi için yeni bir iç bölüm ekleyin . Oda sayısı ve Kişi sayısı için iki alan daha oluşturmak üzere Sayı form alanını iki kez sürükleyip bırakın .

Ve bu orta adım olduğu için hem Önceki hem de Sonraki Düğmeleri eklememiz gerekiyor.

Bu bölüm için eklenen tüm alanların ayarlarını düzenlemeyi bitirdikten sonra, ilk bölümde yaptığınız gibi bölüm/adım adını layout ⇒ multistep'ten değiştirin. Ben buna Rezervasyon Bilgileri adını veriyorum.

Şimdi ikinci adım hazır, üçüncü adıma geçelim

Rezervasyon Formu Adım Üç – Ek Bilgi

Üçüncü adım için tek sütunlu yeni bir bölüm ekleyelim. Ve bir metin alanı ekleyin ve Ek Bilgi olarak adlandırın.

Ardından, bölümün içine iki sütunlu bir iç bölüm ekleyin. Bundan sonra, bir önceki düğmesini ve ardından form gönderimi için bir gönder düğmesini sürükleyip bırakın .

Not: İstediğiniz kadar iç bölüm ekleyebilirsiniz. Ancak yeni bir adım oluşturmak için yeni bir bölüm eklemelisiniz.

Üçüncü bölüme isim vermek için layout ⇒ multistep'e gidin ve “ Ek Bilgiler ” başlığını ekleyin ve bir ikon ekleyin.

Sonunda, 3 adımlı WordPress çok adımlı formumuzu oluşturmayı bitirdik. Şimdi çok adımlı ayarlara geçmek için pencereyi kaydetmek ve kapatmak için güncellemeye tıklayın.

Adım 4: MetForm'un Çok Adımlı Form Seçeneğini Etkinleştirin

Artık formumuza sahip olduğumuza göre, onu çalışan çok adımlı bir forma dönüştürmenin zamanı geldi. Böyle yaparak

• İçeriğe Git ⇒ Çok Adımlı Ayarlar
• Çok adımlı seçenekleri aktif hale getirmek için Çoklu adım seçeneğini etkinleştirin
• Çok Adımlı Gezinmeyi Görüntüle'yi etkinleştirin, böylece Bölüm menüsü en üstte görünecektir. Uyarlanabilir Form Konteyner Yüksekliği, En üste kaydırmayı etkinleştir vb. gibi farklı ayarları da düzenleyebilirsiniz.
• Tüm değişiklikleri yaptıktan sonra, kaydetmek için güncellemeye tıklayın.

Adım 5: Onay, Bildirim ve Diğer Ayarları Tamamlanacak Şekilde Yapılandırın

Artık çok adımlı formunuzu tasarladığınıza göre. MetForm'un sunduğu tüm form ayarlarını yapılandıralım. MetForm ayarlarını WordPress panosundan değiştirmek için MetForm ⇒ Formlar ⇒ Yeni oluşturduğunuz formun Düzenle seçeneğine tıklayın .

Not: Burada, formunuzu web sitesinde herhangi bir yere eklemek için kopyalayıp yapıştırdığınız, oluşturduğunuz formun kısa kodunu da bulacaksınız. Form ayarlarına Form Düzenle seçeneğinden de ulaşabilirsiniz.

Burada aşağıdaki ayarları bulacaksınız:

Genel:

Genel ayarların bir parçası olarak Başlık, Başarı Mesajı, Gerekli Giriş, Görünüm sayısı vb. üzerinde değişiklik yapabilirsiniz. Ayrıca, formu gönderdikten sonra kullanıcıların gelmesini istediğiniz özel URL'leri de ayarlayabilirsiniz.

Onayla:

Bu form oluşturucu eklentisi ile kullanıcılarınıza gönderdikleri formun bir kopyası ile bir onay e-postası gönderebilirsiniz. Onay seçeneğini açın, ardından E-posta Konusu, E-posta Gönderen, E-postadan, E-posta Yanıtı ve Teşekkür mesajı ayarlayabilirsiniz.

Bildirim ayarları:

MetForm ile yöneticiye form bildirim e-postaları da gönderebilirsiniz. Yönetici seçeneğinde Bildirim postasını etkinleştirin . Ardından E-posta Konusu, E-posta Kime, E-posta Kimden, Yönetici Notu vb. öğelerini ayarlayın.

Tüm düzenlemeleri yaptıktan sonra, ayarları güncellemek için aşağı kaydırın ve değişiklikleri kaydet'e tıklayın.

Bu blogda bahsettiğim ayarlara ek olarak, REST API, Mail Chimp, Google Sheet , vb. Gibi Entegrasyonlara da sahip olursunuz. Ayrıca PayPal, Stripe gibi ödeme ağ geçidi entegrasyonu. HubSpot, Zoho vb. içeren CRM entegrasyonu . Ayrıca oturum açma ve kayıt gibi yetkilendirme seçeneklerine de sahip olursunuz. Bu ayarlarla ilgili daha fazla ayrıntı için MetForm belgelerimize bakın.

Bahsedilen adımları doğru bir şekilde takip ettiyseniz, aşağıdaki gibi çok adımlı bir rezervasyon formu almalısınız:

Sarmak

Orada, birkaç dakika içinde WordPress çok adımlı formunuzu oluşturdunuz. Bu formun basit olduğunu düşünüyorsanız endişelenmeyin. Bu blogun temel amacı, MetForm kullanarak WordPress'te nasıl çok adımlı bir form oluşturabileceğinizi göstermekti.

Artık çok adımlı bir WordPress formunu nasıl oluşturacağınızı bildiğinize göre, özel formunuzu ve mantığınızı oluşturabilirsiniz. Umarım harika çok adımlı formlar oluşturmak için MetForm özelliklerini kullanırsınız. Yol boyunca herhangi bir sorunla karşılaşırsanız, bizimle paylaşın, ekibimiz en kısa sürede cevap verecektir.

MetForm'un sunduğu tüm harika özelliklere göz atmayı unutmayın.