İ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.

6 kişilik iletişim stilleri listesiYirmi 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 '.

WordPress iletişim formu örneği2. İ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.

İletişim formu sayfası wordpress şablonu

Bu, anket formunun Yirmi Onbeş temasını kullanan Topaz stilinde nasıl göründüğünü gösterir.

İletişim formu 7 sorgu formu örneği

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.

Malzeme tasarımı örneği iletişim formu 7Bazı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.

Coral Dark İletişim Formu

WordPress ColorMag teması ile iletişim formu

Özel stil içermeyen form burada. Mavi düğmenin rengini miras alır ColorMag WordPress teması.

Colormag temalı iletişim formuForm 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:

Bir iletişim formunun özelleştirme sonucu 7İşte kod:

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.

W8 iletişim formu wordpress iletişim formu eklentisi

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.

İletişim formu wordpress iletişim formu eklentisi

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.Wordpress popup eklentisi kaygan popup pro

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. 

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.

...