Global Styler WP akıcı formlarla güzel CSS formlarının düzenlenmesi
Her çevrimiçi işletme sahibi, beklentisini bir müşteriye dönüştürmek ister. Bununla birlikte, gerçekte yaşadıkları şey, insanların siteyi düzenli olarak ziyaret etmesi, ancak son kullanıcılara geçmemesidir. Bir konuşma başlatmak için, birçok çevrimiçi iş adamı iletişim formunu kullanır. Güçlü bir araç haline gelse de, çoğu sonuç olmadan iletişim formlarını kullanır. Sitenize stilini ve konumunu göz önünde bulundurmadan bir iletişim formu eklerseniz, iyi olmaktan daha kötü olabilir. Peki potansiyel müşterileriniz için nasıl güzel bir CSS formu oluşturabilirsiniz? Her standart form, düzgün çalışırken mükemmel görünmesini sağlamak için temiz bir görsel yapı, gerçek bir form biçiminin gerçek bir formu ve yüksek işlevsellik gerektirir. Güzel formlar tasarlamanıza yardımcı olacak birçok form eklentisi vardır. Bu makalede, güzel bir CSS formu oluştururken Global Styler WP Fluent Forms adlı özel bir formun eklentisine odaklanacağız. Ancak girmeden önce, iletişim formunu düzenlemenin neden önemli olduğunu açıklayalım.
Neden Çevrimiçi Formları Düzenleme?
Önemli alanlar ekleyin Çevrimiçi formları doldururken, genellikle ilgisiz veya uygunsuz sorularla karşılaşabilirsiniz. Örneğin, iletişim formu, sağladıkları hizmetle ilgili olmasa da pasaport numaranızı isterse, büyük olasılıkla sayfadan ayrılırsınız, değil mi? Öte yandan, formunuz oldukça alakalı bir soru içermiyorsa, veri toplamanın amacı kitleniz için belirsiz kalabilir. Ayrıca, gerekli tüm verileri almak için tüm önemli soruları sorduğunuzdan emin olmalısınız. Ayrıntılı ama ilginç iletişim formu, izleyiciyi tamamlamaya teşvik edecektir. Böyle bir durumda, formunuzu insanları sıkılmayacak şekilde düzenlemelisiniz. İnsanların güvenini kazanacak her alan hakkında küçük bir açıklama ekleyebilirsiniz ve web sitenizde kalacaklar. Kullanımı kolay bir form yapın
Kullanıcıların formunuzu masaüstünden veya herhangi bir el cihazından girmeleri için kullanılabilecek tasarım formları. Böylece, formunuz, kullanıcıların formunuzu zorluk çekmeden doldurabilmeleri için olmalıdır. Formunuzun, kullanıcıların onu doldurma konforunu hissedebilecek şekilde donatılması gerekir. Kullanıcıların formunuzun çok can sıkıcı olabilen captcha kullanmak gibi dostça olduğunu varsaymamaları için birçok neden var. Kendinizi rahatsız ettiğini hissettiğinizde, neden web sitenize zarar veriyorsunuz? İnsanları formunuzu doldurmaktan uzaklaştıracak bir diğer faktör de soruya karmaşık veya teknik kelimeler uygulamaktır. İnsanlar formunuzu doldurmak için çok fazla zaman ayırmayacaklar, bu yüzden bunu anlamak için ekstra zaman ve enerji harcamak zorunda kalırlarsa, kesinlikle bitmemesine izin verirler. Bu hatayı herhangi bir şekilde yapmaktan kaçının.
Temas formları tasarlamanın bir başka yaygın hata, çok fazla koyu renk ve lüks yazı tipi kullanmaktır. Aslında, kullanıcılar çevrimiçi formları doldururken bu şeyleri can sıkıcı bulduklarında formunuzu dekore ettiğinizi düşünebilirsiniz. İziotikatatif deneyime izin verin Good Ootomatis, hayatınızı kolaylaştırmak için Google özellikleri sunar. Bu, önemli alanlarda meydana gelen hatalar riskini en aza indirir. Bu nedenle, duyarlı bir CSS oluştururken, Google’ın alanı kolayca anlayabilmesi için basit kullanabilirsiniz veya herhangi bir uzantıyı otomatik şarj amacıyla kullanabilirsiniz. Kullanıcılara bu tür bir esneklik sunarken, zamanlarından tasarruf sağlar ve sorguyu hızlı bir şekilde doldurabilirler. Çekici Bir Eylem Davetiyesi Düğmesi Kullanın
İlginç bir CTA Oluşturma Formun öğesini düzenlerken, davet düğmesi hareketleri en önemli kısımdır. Bu, kullanıcınızın bazı işlemleri yapmak için tıklayacağı ortadür. CTA düğmenizde kafa karıştırıcı kelimeler kullanıyorsanız, insanlar formunuzun amacını anlamayacaktır. Bu bölümü daha önce fark etmediyseniz, düğmenizi geri döndürmeli ve düzeltmelisiniz. Örneğin, iletişim formları açısından, “Tamam” veya “Gönder” gibi doğrudan kelimeleri kullanmak yerine “Bize Ulaşın” ı kullanın. Soru formu için CTA düğmenize “İletişim” kullanın. Bu şekilde, kullanıcılar formunuzu gönderdikten sonra ne alacaklarını kolayca anlayacaklardır. İlerleme çubuğunu uygulayın
İlerleme çubuğunu kullanın, uzun bir soru listesine sahip bir form oluştururken iletişim formunuza ilerleme çubuğunu eklemeye çalışmalısınız. Formunuz için dönüşüm oranını artırma üzerinde doğrudan bir etkisi olmasa da, kullanıcının deneyimine katkıda bulunacaktır. Kullanıcınız formu dolduran formu görebilecektir. Bu şekilde, formunuzu bırakma olasılığı azalacaktır. Şu anda, WordPress’te web siteniz için güzel bir CSS formu tasarlamanıza yardımcı olacak çok sayıda form üreticisi var. Bugün WP akıcı formları kullanarak Duyarlı bir CSS formu oluşturabileceğinizi göreceğiz. Öyleyse, konuya gidelim. Güzel CSS formu, küresel WP akıcı formları kullanır Akıcı formlar Stiller Fluent Forms, web siteniz için çeşitli iyi görünüm formları oluşturabilecek şekilde tasarlanmıştır. Ancak, web sitesi stilinize uygun bir form oluşturmak istiyorsanız, WP Fluent Forms’ın Global Styler özelliğini kullanabilirsiniz. Global Styler, tek bir kodlama sistemi olmadan formlar için herhangi bir tasarımı kolayca düzenlemenizi sağlar. Bu makale, çeşitli tıklamalarda küresel styler ile akıcı formların öğelerini ve düzenini kullanarak güzel bir CSS formu oluşturmanıza yardımcı olacaktır. Bir form oluşturduktan sonra, editörün sağ üst kısmından önizleme ve tasarım tıklayın. Önizleme penceresi açılacak ve şimdi form öğelerini istediğiniz gibi düzenleyebilirsiniz.
Tasarım bölümü, genel sekme ve diğer sekmeler olarak adlandırılan iki tutucu ile donatılmıştır. Genel sekmesi, her formun şablonunu düzenlemektir. Varsayılan, modern, klasik, bootstrap stili ve özel (Gelişmiş Özelleştirme) gibi bir model arasından seçim yapabilirsiniz. Şablondan seçin önceden belirlenmiş şablonlardan birini seçebilirsiniz. Modeli daha önce belirtilen listeden seçtiğinizde, küresel stilinizi yine de özelleştirebilirsiniz. Örneğin, şablonum olarak bootstrap stilini seçtim. Formunuzu ayarlamak için, Genel sekmenin yakınında bulunan başka bir sekmeyi açın. Sekme aşağıda verilen görüntü gibi olacaktır. Burada, adlandırılmış styler, kapsayıcı stilleri, yıldız işareti stilleri, satır içi hata mesaj stillerini, başarı mesaj stillerini gönderdikten sonra ve hata mesajı stillerini gönderdikten sonra göreceksiniz. Konteyner stili Depolama kuvvetini tıkladığınızda, gerilme menüsü birçok ayarlanabilir alanla açılır. Burada adlandırılan alanları, renk arka planı, renk, marj formu, dolgu formu, sınır tipi, sınır rengi, sınır genişliği ve sınır-radius göreceksiniz. Formun rengini, formun genişliğini, sınırın genişliğini ve bu alanda istediğiniz gibi rengi belirleyebilirsiniz. Daha iyi bir anlayış için aşağıdaki ekran görüntülerine bakın.
Yıldız Star Style Style, formunuzdaki yıldız işareti rengini seçmenize yardımcı olacaktır.
Bir hata mesajı satırı satır içi hata mesajı stilleri ile hata mesajının rengini seçin. Ayrıca, yazı tipi boyutunu, yazı tipi ağırlıklarını, metin dekorasyonunu, çizgi yüksekliğini ve harf aralığını ayarlayın. Aşağıdaki ekran görüntüsüne bakın. Bu ayarda başarılı bir mesaj stili gönderdikten sonra, metin gönderdikten sonra formunuzu kişiselleştirebilirsiniz. Test amacıyla formu doldurun ve gönderdikten sonra metni görüntülemek için Gönder’i tıklayın. Şimdi “Başarılı bir mesaj stili gönderdikten sonra” tıklayın. Burada metin, metin arka planı, tipografi ve kutu gölgesi için renkleri seçebilirsiniz. Tipografik alanda yazı tipi boyutunu değiştirebilir, yazı tipi ağırlığı, dönüşüm, yazı tipi stili, metin dekorasyonu, satır yüksekliği ve harfler alanı. Kutuların alanı, bir metin gönderdikten sonra alanın arkasındaki gölgeyi ayarlamanıza izin verecektir. Kutu “istiyorsan. Aşağıdaki ekran görüntülerine bakın. Bir hata mesajı stili gönderdikten sonra, gönderdikten sonra hata mesajı stilini de ayarlayabilirsiniz. Bu stil seçeneği, başarı gönderdikten sonra mesaj stiline benzer. Yazı tipi rengini, arka plan rengini ayarlayın. Tipografi yazı tipi boyutu, yazı tipi ağırlığı, metin dekorasyonu, sıra yüksekliği ve harfler alanı içerir. Tipografik kutudan sonra, başarıdan sonra mesajı düzenlemek için gölge kutusuna geçebilirsiniz. Genel sekmenin özel (gelişmiş ayar), özel bir şablon (gelişmiş ayar) seçerseniz, giriş alanını gerektiği gibi tasarlayabilirsiniz. Yeni pencere aşağıdaki bir ekran görüntüsü gibi görünecektir. Etiket Stili Etiket stillerini tıkladığınızda, yeni açılır menü renkler ve tipografi ile açılır. Yazı tipleri, yazı tipi boyutu, yazı tipi ağırlığı, yazı tipi stili, metin dekorasyonu vb. Rengini değiştirebilirsiniz. Giriş Alanı ve Metin Arka plan renginizi ve formunuzun yazı tipi rengini giriş ve textarea ile değiştirmek için. Ayrıca, yazı tipi boyutunu, yazı tipi türünü, harfleri, yazı tipi ağırlığını vb. Ayarlayabilirsiniz. Tipografi ile. Box-Shadow ile, aşağıdaki resimde gösterilen kutunuzun arkasındaki gölgeyi bile ayarlayabilirsiniz. Sınırı dekore etmek istiyorsanız, “Özel Sınır Stilini Kullan” ı tıklayın. Bu, sınır rengini kişiselleştirmenize, sınır genişliğini, saha alanınızın yarıçapını sınırlamanıza yardımcı olacaktır. Odaklandığında belirli alanları da tasarlayabilirsiniz. Yer tutucu stili İmza ekranını vermek için giriş yer tutucu rengini seçin. Tipografiyi yazı tipi boyutu, yazı tipi ağırlıkları, metin dekorasyonu, çizgi yüksekliği ve harf aralığı ile birlikte yerleştirin. Aşağıdaki ekran görüntüsüne bakın. Bölüm Dinlenme Stili İyileşme alanını formunuza eklemek istiyorsanız, üst çubuktan alan düzenleme seçeneğini açın. Seçeneği tıklayın, giriş formu alanında bir dinlenme bölümü alacaksınız. Şimdi tekrar önizleme ve tasarım seçeneklerine gidin. Burada, bölüm sonlandırma stili olarak adlandırılan formun öğeleri listesine yeni bir öğe ekleneceksiniz. Bu alan, etiket stili ve açıklama stili adı verilen iki parça ile donatılmıştır. Etiket kuvveti bölümünde, uçak etiketlerini yazı tipi boyutu, yazı tipi rengi, metin dekorasyonu, harfler vb. İle düzenleyebilirsiniz. Ayrıca metin etiketlerinin yerleştirilmesi için dolgu ve marj bölümünü destekler. Öte yandan, Açıklama Styling bölümü, Bölüm Break Alanı Açıklama Alanının alanını Styling etiketinden aynı düzenleme seçeneğiyle ayarlamanıza yardımcı olur. Aşağıda kurulumun önizlemesi verilmiştir. Mevcut kafes tablo stili, form giriş alanınızdan bir kafes tablosu eklerseniz, CSS Kustom WP akıcı formlarındaki elemanlarda açılan diğer yeni bölümleri göreceksiniz. Buna ızgara masası stili denir. Styler iki sekme, masa kafaları ve gövde masaları ile birlikte gelir. Masanın başı, tablo başlığının arka plan rengini tasarlamanıza yardımcı olacaktır. Orada tipografik seçenekleri de göreceksiniz. Masa gövdesi, yazı tipi rengi, yazı tipi boyutu, yazı tipi, tip, arka plan rengi vb. Gibi tablonun gövdesini ayarlamakla ilgilidir. Radyo stili ve onay kutusu, radyo düzenleme seçenekleri ve onay kutusu stili bulmak için akıllı kullanıcı arayüzünü etkinleştirin. Burada, radyo ve onay kutusunu ayarlamak için iki seçenek bulacaksınız. Onay kutusunun sınır rengini veya arka plan rengini belirleyin. WP Fluent Forms Düğme Stili ile iletişime geçin, Form Düğme Stilinizi ayarlamanıza da izin verir. Gönder düğmesi stiline tıklayın, yeni açılır menü iki seçenekle görünür. Biri normal ve diğeri şamandıra. Normal bölümde, düğme konumunu ayarlamak için yazı tipi düğmesinin arka planını ve rengini ayarlayabilirsiniz. Yazı tipi boyutunu, aralık yazı tipi türlerini vb. Düzenleyen bir tipografi de vardır. Ardından, bu düğme için özel bir kutunun gölgesini ayarlayabilirsiniz. Özel sınır kuvvetini kullanırsanız, sınır türünü, sınır rengini, sınır genişliğini, sınır yarıçapını vb. Seçebilirsiniz. Gönder düğmesi için. Şimdi, Halk Bölümü hakkında bilgi edinin. Gönder düğmesinin üzerinde yüzdüğünüzde, düğmede bazı değişiklikler göreceksiniz. Gemici bölümü, seçeneği beğeninize göre ayarlamanıza izin vermekle ilgilidir. Arka plan renkleri, yazı tipi renkleri, tipografi, kutu gölgeleri gibi diğer alanlarla aynı tarzda görünür. Çok daha fazlası var, bu stilini kullanarak iletişim formunuzu kişiselleştirebilirsiniz. Bu makalede, WP akıcı formlarla güzel CSS şekilleri düzenlemenin ayrıntılı bir resmini vermeye çalıştım. Bu formun eklenti üreticisi her iki ila üç ayda bir yeni bir güncelleme ile birlikte geliyor. WP Fluent Forms’tan Global Styler’ın kullanımı hakkında birkaç video eğitimi vardır. Ayrıca, bu iletişim formunun eklenti üreticisi çok kullanıcı dostu ve maliyet etkindir. Umarım bu makaleyi yararlı bulur ve WP akıcı formların eklentisi ve küresel unsurunun tadını çıkarırsınız.
