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

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

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

Elementor ile web sitenizi kolayca oluşturun

Elementor oluşturmanıza izin verir Kolay ve Ücretsiz profesyonel bir görünüme sahip herhangi bir web sitesi veya blog tasarımı. Kendiniz yapabileceğiniz bir web sitesi için çok fazla ödeme yapmayı bırakın.

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.

Ürünlerinizi internet üzerinden mi satmak istiyorsunuz?

Fiziksel ve dijital ürünlerinizi WordPress'te satmak ve çevrimiçi mağazanızı kolayca oluşturmak için en iyi e-ticaret eklentileri olan WooCommerce'i ücretsiz indirin. Yeni başlayanlar için mükemmel.

İş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 Contact Form, WordPress'teki en popüler iletişim formu eklentilerinden biridir. Birden çok alıcıya gönderim, 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 bir WordPress Plugin duyarlı ve basit bir araç, ancak ziyaretçilerinizin mesaj bırakarak sizinle iletişime geçebileceği açık ve teşvik edici bir form görüntülemenize olanak tanıyan özelleştirme seçenekleri açısından zengin.

İ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 pencere formunun çeşitli kullanımları olabilir: bir bilgi toplama formu, bir iletiş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.

...  

%d bu sayfayı beğendi blogcular: