İletişim formları, ziyaretçilerle etkileşim kurmak için temel bir yöntem olsa da, çoğu WordPress web yöneticisi, bunları uygun şekilde biçimlendirmek için mücadele eder. Çoğu durumda formlar, tarayıcı tarafından sağlanan varsayılan bir stile sahiptir. Bu formlar nadiren stilize olma eğilimindedir ve sitenizin tasarımından çok farklı olabilir. Öte yandan, kullandığınız WordPress teması, stilizasyon sorununuza yardımcı olabilecek formları stilize eden CSS kodunu içerebilir. Fakat temaya özgü bir stil bile web sitenizin markasıyla çatışabilir.
Bu yüzden İletişim Formu 7’yi uygun şekilde biçimlendirmek ve kendinizin diğerlerinden farklı olmasını sağlamak size kalmıştır. Ve bu makale, bunu yapmanıza yardımcı olmak için burada. İçinde, form stilizasyonu için gerekli kodu oluşturmanın çeşitli yönlerini ele alacağız. Vitrin olarak Contact Form 7 eklentisi tarafından oluşturulan bir iletişim formunu kullanmaya odaklandık. Fakat tartıştığımız şeylerin çoğu herhangi bir forma uygulanabilir. Hatta mevcut CSS bilginize bağlı olarak kodu tam olarak anlamak için bazı ek okumalar yapmanız gerekebilir.
Bununla birlikte size CSS yöntemini göstermeden önce, bir eklenti kullanarak bir İletişim Formu 7 formu tasarlamanın yeni başlayanlar için daha uygun iki yolundan bahsetmek istiyoruz: Elementor için kendi WordPress Eklentilerimiz ve Gutenberg eklentileri için WordPress Blocks.
-
Elementor için WordPress Eklentilerini Kullanarak İletişim Formu 7 Formu Nasıl Stillendirilir
-
Gutenberg için WordPress Bloklarını Kullanarak İletişim Formu 7 Formu Nasıl Stillendirilir
-
CSS Kullanarak İletişim Formu 7 Formunu Şekillendirme
Elementor için WordPress Eklentilerini Kullanarak İletişim Formu 7 Formu Nasıl Stillendirilir
Kendi WordPress Addons for Elementor eklentimiz, çok sayıda güzel, profesyonelce tasarlanmış widget içerir ve eklentinin ücretsiz sürümünde bile mevcut olan Contact Form 7 widget’ı bunlardan yalnızca biridir. Bunları kullanmak için, Elementor’un en son sürümünü ve WordPress Eklentileri eklentisini yüklemeniz gerekir ve hazırsınız. Elementor bir zorunluluktur; WordPress Eklentileri başka hiçbir sayfa düzenleyiciyle çalışmaz. Yine de Elementor’un ücretsiz sürümüyle çalışacaktır, bu nedenle tüm paketin size bir kuruşa mal olması gerekmez.
Widget’ın tüm seçeneklerini aşağıdaki videoda çalışırken görebilirsiniz. Öğreticilerinizi metin biçiminde tercih ederseniz, size aşağıda kısa bir genel bakış sunacağız.
WordPress Eklentileri İletişim Formu 7 Yerleştirme
Bir form oluşturmak için, sol taraftaki menüden WordPress Eklentileri widget’ını sayfada formun olmasını istediğiniz yere sürüklemeniz yeterlidir.
Varsayılan olarak açık olması gereken içerik alanı, kaydettiğiniz formlardan hangilerinin pencere öğesinde yer alacağını seçmenize olanak tanır.
WordPress Eklentileri İletişim Formu 7 Etiket ve Metin Şekillendirme
Stil söz konusu olduğunda, widget’ın Stil sekmesine geçmeniz gerekir. Oradayken, birkaç bölüm halinde organize edilmiş stil kontrolleri bulacaksınız. Etiket Stili bölümünde, etiket renginin yanı sıra farklı bir stil kullanmak istiyorsanız etiket tipografisini değiştirebilirsiniz.
Giriş Stili bölümleri, giriş topografyası, metin rengi, arka plan rengi ve kenarlıklar için kontrollere ve aktif ve aktif olmayan alanlar için farklı ayarlar oluşturmak üzere kullanabileceğiniz bir Normal/Etkin sekmesine sahiptir. erişilebilirlik adına aktif bir alan için farklı arka plan rengi ve ziyaretçilerinizin hangi alana metin girdiklerini görmelerini kolaylaştırın.
WordPress Eklentileri İletişim Formu 7 Onay Kutusu, Düğmeler ve Aralık Stili
Formunuzda onay kutuları veya radyo düğmeleri kullanıyorsanız, bunları Stil sekmesinin Onay Kutusu Stili ve Radyo Stili bölümlerinde stillendirmek için kontroller bulacaksınız. Orada, boyutlarını ve kenar boşluklarını değiştirebilirsiniz.
Düğmelere gelince, stil seçeneklerini Düğme Stili bölümünde bulabilirsiniz. Düğmeler aynı Normal/Etkin modlarda. Fakat renk, arka plan rengi, boyut ve stil açısından da stillendirilebilir.
Aralık Stiline gelince, bu bölüm widget’ın kenar boşlukları ve bazı bölümleri için kontrolleri içerir.
WordPress Eklentileri İletişim Formu 7 Genel Stil
Stil sekmesinin Global Stil bölümü yalnızca widget’ın hizalamasını sol, orta ve sağ arasında ayarlar. Hata Stili bölümü, bir ziyaretçinin formu doldururken yanlış bir şey yapması durumunda hata mesajı ayarlarınızı yönetir. Son olarak Yanıt Stili bölümü, ziyaretçinizin formu doldurup gönderdikten sonra alması gereken tamam mesajını biçimlendirmek için kullanılır.
Şimdi, başka bir eklentimiz olan WordPress Blocks for Gutenberg’i kullanarak İletişim Formu 7 formlarınızı nasıl şekillendirebileceğinizi görelim.
Gutenberg için WordPress Bloklarını Kullanarak İletişim Formu 7 Formu Nasıl Stillendirilir
İletişim formlarını bu kadar harika bir araç yapan şeylerden biri de çok yönlü olmalarıdır. Bunları ister açılır pencere olarak ekleyin, ister bazı yenilikçi tasarım fikirlerini ifade etmek için kullanın, her türlü web sitesinde kolaylıkla yerlerini bulabilir ve işlerini iyi yapabilirler. Ve web sitenizi Gutenberg blok düzenleyicisini kullanarak düzenlemek istiyorsanız, o zaman WordPress Blocks for Gutenberg, CF7 formlarını şekillendirmek için ilk tercihiniz olmalıdır. Eklenti, Contact Form 7 Gutenberg bloğu da dahil olmak üzere yarısından fazlası ücretsiz sürümde bulunan 81 farklı bloğa sahiptir.
Başlamadan önce, Contact Form 7 eklentisinin yanı sıra Gutenberg için WordPress Blocks’u yüklemeniz gerekeceğini unutmayın. Contact Form 7 Gutenberg bloğu, Contact Form 7 eklentisinde oluşturduğunuz farklı formları eklemenizi sağlar – bu örnekte kullandığımızı biz oluşturduk. Sayfayı, her ikisi de eklentinin ücretsiz sürümünde bulunan Gelişmiş Sütunlar ve Bölüm Başlık bloklarını kullanarak kurduk.
İletişim Formu 7 Bloğunu Ekleme
İletişim formu başlığı olarak kullanacağımız bölüm başlığının altında yeni bir paragraf oluşturarak başladık. Yeni bir blok eklemenin en basit yolu, paragraf bloğunun sağ kenarındaki “+” düğmesine tıklayıp Contact Form 7 bloğunu aramak olacaktır. Widget’ı ekledikten sonra, blokla birlikte yüklemek istediğiniz iletişim formunu seçtiğiniz İçerik seçeneklerinde sağ taraftaki blok seçenekleri menüsü otomatik olarak açılır.
İletişim Formu 2, CF7 eklentisinde yaptığımız ve onu seçerek herhangi bir ayar yapmadan bloğa yüklediğimiz formdur. Formu biçimlendirmek için blok seçenekleri menüsündeki Stil sekmesine gittik.
Formu Şekillendirmek
İlk iki stil seçeneği, Genel Stil ve Etiket Stili seçenekleridir. İlki, etiket metninin hizalamasını seçmenizi sağlarken, ikincisi, etiketi uygun gördüğünüz şekilde biçimlendirmek için ihtiyacınız olan tüm tipografi ve renk seçeneklerini sunar. İletişim formumuz için, Global Stil seçeneklerinde hizalamayı yalnızca merkeze değiştirdik.
Bir sonraki seçenek grubu olan Giriş Stili, giriş alanlarının ve metnin stilinin yanı sıra kenarlığı da ayarlamanıza olanak tanır. Tipografi, renkler ve arka plan renklerini seçebileceksiniz ve bunu hem bir alanın ilk durumu hem de alan seçildiğindeki durumu için yapabileceksiniz.
İlk adımımız Border Type altından None seçerek kenarlığı kaldırmak oldu. İlk metin rengi için #c4c4c4’ü seçtik ve arka plan rengi olarak #ffffff’yi seçtik. Odak seçenekleri altında, metin rengini tekrar #1e1e1e olarak değiştirdik.
Onay Kutularını ve Radyo Düğmelerini Şekillendirme
Onay Kutusu Stili ve Radyo Stili seçenekleri, formunuzdaki onay kutularına ve radyo düğmelerine stil vermenizi sağlar. Boyutlarını, kenar boşluklarını ve boşluklarını seçebilir ve ayrıca onay kutusu için özel tipografi seçenekleri ayarlayabilirsiniz.
Aklınızda bulundurmanız gereken tek şey, onay kutularını ve radyo düğmelerini şekillendirirken yapılan değişikliklerin yalnızca sayfayı önizlediğinizde düzgün şekilde görülebildiğidir. Bizim durumumuzda, onay kutuları ve radyo düğmeleri dikey olarak istiflenirken önizlemede yatay olarak görünüyorlardı. İşte editörde görecekleriniz.
Ve işte size web sitenizin ziyaretçilerinin ne göreceğini gösteren önizleme.
Onay kutuları için kullandığımız ayarlar, sağ onay kutusu giriş marjı için 7px, arasındaki onay kutusu boşluğu için 50px, üst onay kutusu tutucu kenar boşluğu için -4px ve üst onay kutusu tutucu kenar boşluğu için 5px idi. Radyo Stili seçenekleri için, sağ radyo giriş marjı için 7 piksel, radyo aralığı için 24 piksel ve üst radyo tutucu kenar boşluğu için 28 piksel kullandık.
Düğmeleri ve Aralığı Şekillendirme
Düğme Stili seçenekleri arasında, düğme tipografisini, rengini, kenarlığını ve gölgelerini ayarlama seçeneklerini bulacaksınız. Hatta düğmenin ilk ve fareyle üzerine gelme sürümlerini ayrı ayrı biçimlendirebileceksiniz.
Metin için Başlangıç rengini #ffffff olarak ayarlarken, arka plan rengi için #333333 kullandık. Hatta fareyle üzerine gelindiğinde arka plan rengini #000000 olarak ayarladık.
Boşluk Stili, formdaki öğeler içindeki tüm çeşitli boşlukları, dolguları ve kenar boşluklarını ayarlamanıza olanak tanır. Formumuzu tam olarak doğru yapmak için, Form Öğesi alanının altında üst için 14px ve alt için 33px ayarladık. Input Padding altında, 20px olarak ayarladığımız son, sol değer dışında her yerde 5px ayarlıyoruz. Üst Düğme Kenar Boşluğunu 8px olarak ayarladık ve Düğme Dolgusu için şu değerleri kullandık: 14px, 40px, 13px ve 40px.
Hata ve Yanıt Mesajlarını Şekillendirme
Hata Stili için mesajların hizalamasını, tipografi seçeneklerini, rengini ve kenar boşluklarını seçeceksiniz. Tipografi seçenekleri altında yazı boyutunu 17 piksel ve satır yüksekliğini 26 piksel olarak ayarlıyoruz. Renk seçeneğini #e54848 ve üst Hata Marjını 9px olarak ayarladık.
Yanıt Stili seçenekleriyle, formu gönderdikten sonra görünen mesajın stilini elde edersiniz. Hizmetinizde olan seçenekler arasında tipografi, renk, dolgu ve kenar boşlukları, kenarlık ve arka plan seçenekleri bulunur.
Tipografi seçenekleri altında yazı boyutunu 17 piksel ve satır yüksekliğini 26 piksel olarak ayarlıyoruz. Response Padding altına şu değerleri girdik: 16px, 25px, 19px, 25px. Üst Response Margin için değeri 40px olarak ayarladık. Solid border tipini seçiyoruz ve Border Width’i 1px olarak ayarlıyoruz.
Blok, farklı mesajlar için farklı kenarlık renkleri seçmenize de olanak tanır. Gönderilen kenarlık rengi için #61a73a, spam gönderilen kenarlık için #f58e32 ve geçersiz kenarlık rengi için #f1ce41’i seçtik. Ve bununla formumuzu şekillendirmeyi bitirdik.
Elbette, İletişim Formu 7 formlarınızı CSS kullanarak biçimlendirmenin bir yolu vardır ve bunu öğrenmek için tek yapmanız gereken bir sonraki bölüme geçmek.
CSS Kullanarak İletişim Formu 7 Formunu Şekillendirme
Herhangi bir nedenle Elementor’u kullanmıyorsanız veya eklentimizi kullanmak istemiyorsanız (ve kullanmak istememenizin bir yolunu bulamıyoruz), üzülmeyin. Seni koruduk. Hatta tüm CF7 formlarınıza uygulanabilir stiller oluşturmanın yanı sıra, CSS kullanarak belirli bir formun nasıl stilize edileceğini de ele alacağız. Bu makaleyi takip etmek için, Contact Form 7 eklentisinin kurulu olması ve web sitenizde bu eklenti ile oluşturulmuş en az bir form olması gerekir. Daha sonra aşağıda tartıştığımız yöntemleri uygulamak için bu formu kullanabileceksiniz.
Başlamadan Önce
Bu makalede, tüm CF7 formlarınıza uygun stillerin nasıl oluşturulacağını ve ayrıca belirli bir formun nasıl stilize edileceğini ele alacağız. Bu makaleyi takip etmek için, Contact Form 7 eklentisinin kurulu olması ve web sitenizde bu eklenti ile oluşturulmuş en az bir form olması gerekir. Daha sonra aşağıda tartıştığımız yöntemleri uygulamak için bu formu kullanabileceksiniz.
Lütfen bu işlem sırasında oluşturduğunuz CSS’nin Görünüm > Özelleştir > Ek CSS’ye eklenmesi gerektiğini unutmayın. Mevcut CSS becerilerinizden memnun değilseniz, bu makaledeki konuları kavramak için biraz CSS bilgisi gerekli olduğundan, bunları önceden tazelemelisiniz. Bunu yaptıktan sonra, aşağıdaki makalenin ana bölümüne ilerleyebilirsiniz.
Site çapında form stilleri oluşturma
Bu makale için, web sitenizdeki tüm İletişim Formu 7 formlarına belirli bir stil uygulayacak olan aşağıdaki CSS’yi oluşturduk.
.wpcf7 {
background-color: #6ec1e4;
padding: 30px;
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
font-size: 16px;
color: #000000e8;
background-color: #E9ECF5;
border: 1px solid #E9ECF5;
border-radius: 10px;
}
.wpcf7 .wpcf7-submit {
background-color: #E9ECF5;
border: 1px solid #E9ECF5;
color: #1f1f1f;
width: 100%;
}
Bu kod aşağıdaki çıktıyı üretecektir.
Fakat bu yalnızca kullanabileceğiniz bir CSS örneğidir. Bu yüzden nasıl yapıldığını anlamadan kopyalayıp web sitenize yapıştırmak için acele etmemelisiniz. Formları şekillendirmek için CSS’nin duruma göre yapılması gerektiğinden, en çok…