Ana İçeriğe Geç

Nasıl formu İletişim Formu 7 özelleştirmek için

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 600.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

İ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 [yanıt veren] formun yukarısındaki formu doldururken bir hata olması durumunda formda belirtilecektir.

WordPress'te hiç bir web sitesi oluşturmadıysanız, Bir FTP istemcisi ile bir WordPress blogu nasıl kurulur

Standart form için, eklenti tarafından oluşturulan kod:

[response] <label> adınız </ label> [text * adınız: adınız] <label for = "e-postanız"> E-postanız (gerekli) < / label> [email * e-posta kimliğiniz: e-posta adresiniz] <etiketiniz için = "konunuz"> Konunuz </ etiket> [konuyla ilgili konu id: konunuz] <etiket için = "mesajınız "> Mesajınız </ etiket> [mesajınızı iletin textarea: mesajınız] [Gönder" Gönder "]

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 " İletişim 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 iletişim formu oluşturun ve Kaplamalar bölümüne gidin. Formunuz için bir şablon ve bir stil seçebilirsiniz.

Formlarına adanmış modelleri bulacaksınızEVENEMENTS, 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ı.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Bu eklenti varsayılan formu kaldırmanızı ve kısa kodlarını kullanmanızı önerir.

İşte Hestia temasına bir örnek. İşaretçi bir form alanına taşındığında kayan etiketi not alın.

Bazı WordPress Temalarında 7 İletişim Formu Testi

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

Formun arkaplan görüntüsü olarak kullanmak için bir fotoğraf yükleyerek ve etiket kodunu metin üzerinde mavi bir gölgeyle gri formdan beyaza dönüştürerek başladım.

Form etiketleri ve form alanları arasındaki boşlukları artırmak, çıkarma düğmesini değiştirmek ve işaretçi form alanlarına girdiğinde bir kenarlık eklemek için aşağıdaki değişiklikler yapılmıştır.

Form gönderilirken hata / başarı mesajlarının gösterilmesi de doğru görüntülenecek şekilde değiştirilmelidir.

Form gönderildiğinde çalışan GIF düzgün görünmüyor, Loading.io'ya bir alternatif buldum ve CSS ile başvurdum.

İşte sonuç formu:

İş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 karalama yapmanız gerekmiyorsa, bizim kodumuzu kontrol etmenizi ö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, WordPress'teki en popüler iletişim formu eklentilerinden biridir. 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 tam işlevsellik sunar.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Ayrıca, web sitenize veya blogunuza, müşterilerinizle daha kolay iletişim kurabilmeniz için profesyonel bir sistem sunar. Tüm formlarınızı ihtiyaçlarınıza ve zevklerinize göre kişiselleştirebileceksiniz.

Indir | gösteri | Web hosting

2. Bize Ulaşın Formu

Bize Ulaşın Form, duyarlı bir WordPress eklentisi ve ziyaretçilerinizin mesajlarıyla sizinle iletişime geçebilecekleri açık ve teşvik edici bir form gösteren basit ama zengin bir özelleştirme aracıdır.

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

Slick Popup Pro, eklenti tarafından oluşturulan herhangi bir formu dönüştüren oldukça basit ve hafif bir WordPress eklentisidir. İ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.

Form açılır penceresinin aşağıdakileri içeren birçok kullanımı olabilir: bir bilgi toplama formu, bir iletişim formu, bir kayıt formu, bir teklif formu, öneri / şikayet formu ve diğerleri.

Indir | gösteri | Web hosting

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Ücretsiz]

Önerilen Kaynaklar

Web sitenizde veya blogunuzda iletişim formları oluşturmanıza ve yönetmenize yardımcı olacak diğer önerilen kaynakları keşfedin.

Sonuç

İşte bu kadar! Hepsi bu ders için, umarım iletişim formunuzu kişiselleştirmek için daha fazla fikriniz olur. Tereddüt etmeyin 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.

Ama bu arada, bize Yorumlar ve özel bölümdeki öneriler.

...

Bu makale yorumları 2 içeriyor
  1. 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.

YORUM BIRAKIN

E-posta adresiniz gösterilmeyecektir. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
107 hisseleri
hisse4
cıvıltı1
Enregistrer102