İletişim Formu 7 bir eklentidir WordPress iletişim formları oluşturmak için inanılmaz popüler. HTML kodlaması olmadan formlar oluşturmanıza olanak sağlar. bunlar formlar gibi özellikler sunabilir CAPTCHA, dosya indirme, anket alanları vb ...
Varsayılan İletişim Formu 7 tarzı çoğu temel iletişim formu için yeterli olsa da, sık sık değiştirmeniz gerekir.
Bu, daha erişilebilir olması için varsayılan form yapısını değiştirir. O da ekler kısa kod Formun üzerinde [duyarlı], böylece formu gönderirken bir hata varsa, form üzerinde belirtilir.
Hiç bir WordPress web sitesi oluşturmadıysanız, öğrenin Bir FTP istemcisi ile bir WordPress blogu nasıl kurulur
Standart form için, eklenti tarafından oluşturulan kod:
[yanıt] Adınız (gerekli) [metin * adınız-adınız: adınız] E- postanız (gerekli) [e-posta * e-posta kimliğiniz: e-postanız] Konunuz [metin konu kimliğiniz: konunuz] Mesajınız [textarea your-message id: your-message] ["Gönder" gönderin]
Bazı eklentileri formu İletişim Formunu özelleştirmek için 7
1. İletişim Formu 7 Stil
Le eklentisi İletişim Formu 7 Stil aralarından seçim yapabileceğiniz birkaç stil var.
Yirmi Onbeş tema kullanıcıları için, aynı zamanda uyumlu bir stil var.
Stil uygulamak için " Kişi Stilleri> Hızlı Düzenleme Stili uygulamak istediğiniz formu kontrol edin ve ardından "üzerine tıklayın. güncelleştirme '.
2. İletişim Formu 7 Derileri
Skins kullanmak için İletişim Formu 7, yeni bir tane oluştur İletişim formu ve sayfayı aşağı kaydırarak Dış Görünümler bölümüne gidin. Formunuz için bir şablon ve stil seçebilirsiniz.
Formlarına adanmış modeller bulacaksınız.EVENEMENTS, kayıt ve bildirim.
Bu, anket formunun Yirmi Onbeş temasını kullanan Topaz stilinde nasıl göründüğünü gösterir.
3. İletişim Formu İçin Malzeme Tasarımı
Bu stiller tarzı dayanmaktadır Materyal Tasarımı.
Bu eklenti, varsayılan formu silmenizi ve kısa kodlarını kullanmanızı önerir.
İşte Hestia temalı bir örnek. İşaretçi formdaki bir alana taşındığında kayan etikete dikkat edin.
Bazılarında İletişim Formu 7 testi WordPress temaları
ColorMag WordPress Teması ile İletişim Formu
Çoğu zaman, İletişim Formu 7, WordPress temanızın stilini devralır. Bu tema ile durum Mercan Koyu.
WordPress ColorMag teması ile iletişim formu
Özel stil içermeyen form burada. Mavi düğmenin rengini miras alır ColorMag WordPress teması.
Form için arka plan resmi olarak kullanmak üzere bir fotoğraf yükleyerek ve formun etiketlerinin kodunu metinde mavi bir gölge ile griden beyaza değiştirerek başladım.
Aşağıdaki değişiklikler, form etiketleri ve form alanları arasındaki kenar boşluklarını artırmak, çıkarma düğmesini değiştirmek ve işaretçi form alanlarına girdiğinde bir kenarlık eklemek idi.
Form gönderildiğinde hata / başarı mesajlarının görüntülenmesi de doğru şekilde görüntülenmeleri için değiştirilmelidir.
Form gönderildiğinde dönen GIF düzgün görünmedi, Loading.io'ya bir alternatif buldum ve CSS ile referans verdim.
İşte sonuç formu:
div.wpcf7 {margin: 0; dolgu maddesi: 1.5em; background: url ('your_background_image_url_here'); -webkit-border-radius: 3px; -moz-sınır yarıçapı: 3px; kenarlık yarıçapı: 3px; } .wpcf7 etiket, .wpcf7 -ule {renk: beyaz; metin gölgesi: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7 form denetimi {10px 0 20px 0; } .wpcf7 .wpcf7-request: hover {background: #186d8e; } .wpcf7 form kontrolü: focus {border: 2px solid #289dcc; } div.wpcf7-yanıt-çıkışı {background: #F8F8F8; metin hizalama: orta; genişlik:% 92.5; marj: 1em 0em 1em 0em; -webkit-border-radius: 3px; -moz-sınır yarıçapı: 3px; kenarlık yarıçapı: 3px; } span.wpcf7 geçerli değil-tip {background: #F8F8F8; ekran: satır içi blok; genişlik: otomatik; dolgu maddesi:% 1; -webkit-border-radius: 3px; -moz-sınır yarıçapı: 3px; kenarlık yarıçapı: 3px; } div.wpcf7 .ajax-loader {background-image: url ('your_loading_image_url_here'); genişlik: 50px; yükseklik: 50px; }
Kodda bir şeyler karalamanıza gerek yoksa, bize bir göz atmanızı öneririz. 10 WordPress eklentileri blogunuzda bir iletişim formu oluşturmak için
İletişim formlarınızı oluşturmanıza yardımcı olacak 3 premium alternatiflerini de keşfedin.
1. W8 İletişim Formu
W8 İletişim Formu, eklentilerinden biridir. İletişim formu WordPress'teki en popüler. Birden fazla alıcıya gönderme, animasyon desteği, sınırsız form oluşturma, farklı stiller ve çok çeşitli ek özelleştirme seçenekleri gibi birçok özellik sunar.
Ek olarak, web sitenize veya blogunuza müşterilerinizle daha kolay iletişim kurmanızı sağlayacak profesyonel bir sistem sağlar. Tüm formlarınızı ihtiyaçlarınıza ve zevklerinize göre özelleştirebileceksiniz.
Indir | gösteri | Web hosting
2. Bize Ulaşın Formu
Bize Ulaşın Formu, duyarlı bir WordPress eklentisi ve basit bir araçtır, ancak ziyaretçilerinizin mesajlarını bırakarak sizinle iletişime geçebilecekleri açık ve cesaret verici bir form görüntülemenize olanak tanıyan zengin kişiselleştirme seçenekleridir.
Gerekli alanları tanımlayabilir, alanların en iyi düzenini seçebilir ve müşterilerinizi veya ziyaretçilerinizi önerilerini veya iletilerini bırakmaya teşvik etmek için tamamen özelleştirebilirsiniz.
İletileri almak istediğiniz e-posta adresini ayarlayın ve işletmenizi en karlı şekilde büyütmek için kullanın.
Indir | gösteri | Web hosting
3. Slick Popup Pro
Kaygan Popup Pro bir WordPress uzantısı eklenti tarafından oluşturulan herhangi bir formu dönüştüren oldukça basit ve hafif İletişim Formu 7 Bir açılır pencerede. Formu kullanıyor ve güzel ve kusursuz bir şekilde açılan bir pop-up'a dönüştürüyor.
Açılır formun aşağıdakiler dahil çeşitli kullanımları olabilir: bir bilgi toplama formu, İletişim formu, bir kayıt formu, bir teklif formu, bir öneri / şikayet formu ve diğerleri.
Indir | gösteri | Web hosting
Önerilen Kaynaklar
Web sitenizde veya blogunuzda iletişim formlarını daha iyi oluşturmanıza ve yönetmenize yardımcı olacak diğer önerilen kaynaklara göz atın.
- Formlarınızda CAPTCHA tarafından doğrulama için 6 WordPress eklentileri
- WordPress İletişim Formu 7 ile bir iletişim formu nasıl eklenir?
- WordPress'de GDPR uyumlu formlar nasıl oluşturulur
Sonuç
İşte bu kadar! Hepsi bu ders için, umarım iletişim formunuzu kişiselleştirmek için daha fazla fikriniz olur. Çekinme En sevdiğiniz sosyal ağlarda arkadaşlarınızla paylaşın.
Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma.
Ancak bu arada, bize Yorumlar ve özel bölümdeki öneriler.
...
Profesyonel bir web sitesi oluşturmak için kullanıcıyı hızlıca ikna etmek için kesin ve özlü olmanız gerekir. Size bir vitrin sitesi veya bir portföyün üretimi konusu olsun, profesyonel bir web sitesi oluşturma fırsatı sunuyoruz. Bir çevrimiçi sitenin veya profesyonel bir web sitesinin üretilmesi artık herkese açık. Bu nedenle, orson web siteniz tüm bu özellikleri doğaya ekler.
Lütfen reklam yok!