WordPress'te İletişim Formu 7 Formlarını Stilize Etme

WordPress sitenize büyük olasılıkla İletişim Formu 7'yi yüklediniz çünkü ücretsizdir ve WordPress için en popüler iletişim formu eklentilerinden biri olmuştur.

Ancak, varsayılan formların canlı sitenizde oldukça sade göründüğünü fark etmiş olabilirsiniz. Bu temel gri stil, sitenizin geri kalanıyla uyumsuz olabilir ve genel tasarımın daha az cilalı görünmesine neden olabilir.

Contact Form 7'de görsel bir düzenleyici veya yerleşik stil seçenekleri bulunmadığından, kodla rahat değilseniz değişiklik yapmak biraz çaba gerektirir.

İyi haber şu ki, bunu düzeltmek için geliştirici olmanıza gerek yok. Sadece birkaç CSS ayarıyla, formlarınızı temiz, modern ve tamamen markanıza uygun hale getirebilirsiniz.

Bu başlangıç dostu rehberimizde, gelişmiş kodlama veya tasarım becerileri gerektirmeden Contact Form 7'yi adım adım nasıl özelleştireceğinizi anlatacağız. 🙌

İletişim Formu 7 Formlarınızı Neden Stilize Etmelisiniz?

Contact Form 7 formlarınızı stilize etmek, sitenizin daha profesyonel görünmesini sağlar, okunabilirliği artırır ve formlarınızın markanızla uyumlu olmasına yardımcı olur. Tüm bunlar güveni ve form dönüşümlerini artırabilir.

Dalış yapmadan önce, Contact Form 7, WordPress için en popüler iletişim formu eklentilerinden biridir. Kullanımı ücretsizdir ve kısa kod kullanarak bir WordPress formu eklemenize olanak tanır.

Dezavantajı, İletişim Formu 7'nin tasarım ve özelleştirme özellikleri açısından oldukça sınırlı olmasıdır. Ayrıca, formlarınızın stilini değiştirmek için yerleşik seçenekler sunmaz.

Bu, iletişim formunuzun tasarımını web sitesi temanızla eşleştirmeyi veya formunuzun öne çıkmasını sağlamak için yazı tipi ve arka plan rengi gibi temel ayrıntıları değiştirmeyi zorlaştırır.

Daha da önemlisi, eklenti yeni özellik geliştirmeyi durdurdu, bu da kritik hata düzeltmeleri ve güvenlik yamaları dışındaki güncellemeleri almayacağı anlamına geliyor.

Bununla birlikte, şimdi WordPress'te bir İletişim Formu 7 formunu nasıl stilize edeceğimize bakacağız. Aşağıdaki bölümlerde şunları ele alacağız:

Başlayalım!

İletişim Formu 7 ile Başlangıç

İlk olarak, web sitenize Contact Form 7 eklentisini yükleyip etkinleştirmeniz gerekecek.

Bunu yapmak için WordPress yönetici alanınızda Eklentiler » Yeni Eklenti Ekle bölümüne gidelim.

Bu, WordPress eklenti dizininden bir eklenti seçebileceğiniz sayfayı açacaktır.

Eklentiyi hızlıca bulmak için arama özelliğini kullanın. Ardından, arama sonucundaki 'Şimdi Yükle' düğmesine tıklayabilirsiniz.

WordPress sitenizde etkinleştirmek için 'Etkinleştir' düğmesine tıklamayı unutmayın. Yardıma ihtiyacınız olursa, lütfen bir WordPress eklentisinin nasıl kurulacağına dair kılavuzumuza bakın.

Etkinleştirdikten sonra, WordPress kontrol panelinizden İletişim » Yeni Ekle bölümüne gidebilirsiniz.

Artık web siteniz için form ayarlarını düzenleyebilir ve formunuz için bir başlık girerek başlayabilirsiniz.

Eklenti, ad, e-posta adresi, konu ve mesaj için varsayılan alanları otomatik olarak ekleyecektir. İstediğiniz yere sürükleyip bırakarak daha fazla alan ekleyebilirsiniz.

İşiniz bittiğinde, 'Kaydet' düğmesine tıklamayı ve kısa kodu kopyalamayı unutmayın.

Yapılacak bir sonraki şey, formu blog yazınıza veya sayfanıza gömmenizdir.

Bunu yapmak için basitçe bir gönderiyi düzenleyin veya yenisini ekleyin.

WordPress düzenleyicisindeyken, devam edin ve üstteki '+' işaretine tıklayın ve ardından bir Kısa Kod bloğu ekleyin.

Bundan sonra, Contact Form 7 formunuzun kısa kodunu kısa kod bloğuna girmeniz yeterlidir. Şuna benzer görünecektir:

[contact-form-7 id="117" title="Contact Form"]

Şimdi, gönderinizi veya sayfanızı yayınlayarak iletişim formunu çalışırken görün.

Bu eğitimde varsayılan iletişim formunu kullandık ve bir WordPress sayfasına ekledik. İletişim formu test sitemizde böyle görünüyordu.

Artık WordPress'te İletişim Formu 7 formunuzu özelleştirmeye hazırsınız.

Yöntem 1: Özel CSS Kullanarak İletişim Formu 7 Formlarını Stilize Etme

Contact Form 7'nin yerleşik stil seçenekleri olmadığından, formlarınızı stilize etmek için CSS kullanmanız gerekecektir.

İletişim Formu 7, form öğelerine standart CSS sınıfları ve kimlikleri ekler. Biraz CSS biliyorsanız, tasarımı özelleştirmeyi kolaylaştırır.

Her İletişim Formu 7 formu, formunuzu stilize etmek için hedefleyebileceğiniz .wpcf7 CSS sınıfını kullanır.

Bu örnekte, girdi alanlarımızda Lora adlı özel bir yazı tipi kullanacağız ve formun arka plan rengini değiştireceğiz. Bu yazı tipinin WordPress temanız tarafından yüklendiğinden emin olun veya 'lora'yı temanızın zaten kullandığı bir yazı tipiyle değiştirin:

.wpcf7 {
  background-color: #fbefde;
  border: 1px solid #f28f27;
  padding: 20px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  background-color: #725f4c;
  color: #FFF;
  font-family: lora, sans-serif;
  font-style: italic;
}

.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
  background-color: #725f4c;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

Bu CSS'yi WordPress kontrol panelinizde Görünüm » Özelleştir » Ek CSS'ye giderek kolayca ekleyebilirsiniz.

Daha fazla yardıma ihtiyacınız olursa, lütfen özel CSS'yi bir WordPress sitesine kolayca ekleme kılavuzumuza bakın.

Bu CSS'yi uyguladıktan sonra iletişim formumuz böyle görünüyordu.

Birden Fazla Contact Form 7 Formunu Stilize Etme

Birden fazla iletişim formu kullanıyorsanız ve bunları farklı şekilde biçimlendirmek istiyorsanız, Contact Form 7'nin her form için oluşturduğu benzersiz kimliği hedefleyebilirsiniz.

Yukarıda kullandığımız CSS'in dezavantajı, web sitenizdeki tüm Contact Form 7 formlarına uygulanacak olmasıdır.

Başlamak için, değiştirmek istediğiniz formu içeren sayfayı açın. Ardından, formdaki ilk alana sağ tıklayın ve 'İncele' seçeneğini seçin.

Kod karmaşık görünse de endişelenmeyin; yalnızca belirli bir satırı bulmanız yeterlidir.

Ekranın alt veya yan tarafında sayfanın HTML kodunu gösteren bir Geliştirici Araçları paneli açılacaktır. Bu panelde, form kodunun başlangıç satırını bulmanız gerekir.

Yukarıdaki ekran görüntüsünde görebileceğiniz gibi, iletişim formu kodumuz şu satırla başlar:

<div role="form" class="wpcf7" id="wpcf7-f113-p114-o1" lang="en-US" dir="ltr">

ID özniteliği, Contact Form 7 tarafından bu belirli form için oluşturulan benzersiz bir tanımlayıcıdır. Form kimliği ile bu formun eklendiği gönderi kimliğinin birleşimidir.

Bu kimliği, yalnızca bu belirli iletişim formunu biçimlendirmek için CSS'imizde kullanacağız. Aşağıdaki kodda, standart .wpcf7'yi benzersiz kimliğinizle (örneğin, #wpcf7-f113-p114-o1) değiştirin.

div#wpcf7-f113-p114-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f113-p114-o1 input[type="text"],
#wpcf7-f113-p114-o1 input[type="email"],
#wpcf7-f113-p114-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;
}
#wpcf7-f113-p114-o1 input[type="submit"],
#wpcf7-f113-p114-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

CSS'nin çalışması için kendi sitenizde oluşturulan Kimliği kullanmanız gerektiğini unutmayın. Ayrıca, bu Kimlik belirli sayfa Kimliğini (p114 gibi) içerdiğinden, bu iletişim formunu daha sonra farklı bir sayfaya taşırsanız, CSS'nizi yeni Kimlikle güncellemeniz gerekecektir.

Artık özelleştirmek istediğiniz her form için bu işlemi tekrarlayabilir, kimliği o belirli form için oluşturulanla değiştirebilirsiniz.

Gönderim Durumuna Göre Formları Stilize Etme

İletişim Formu 7, kullanıcı etkileşimlerine göre formunuza otomatik olarak CSS sınıfları ekleyerek başarı mesajlarını, hata durumlarını ve yükleme durumlarını farklı şekilde stilize etmenize olanak tanır.

İletişim Formu 7'nin uyguladığı durum sınıfları şunlardır:

• .wpcf7-init — Başlangıç durumu (kullanıcı etkileşiminden önce)
• .wpcf7-sent — Form başarıyla gönderildi
• .wpcf7-failed — Gönderim başarısız oldu (sunucu hatası)
• .wpcf7-invalid — Formda doğrulama hataları var
• .wpcf7-spam — Gönderim spam olarak işaretlendi
• .wpcf7-aborted — Kullanıcı tarafından gönderim iptal edildi

Örnek: Başarılı form gönderimini yeşil kenarlıkla biçimlendirin:

div.wpcf7.wpcf7-sent {
    border: 3px solid #4caf50;
    background-color: #e8f5e9;
    padding: 20px;
}

Örnek: Doğrulama hatalarını kırmızı kenarlıkla biçimlendirin:

div.wpcf7.wpcf7-invalid {
    border: 3px solid #f44336;
    background-color: #ffebee;
}

Örnek: Hafif bir yükleme göstergesi ekleyin:

div.wpcf7.wpcf7 form.submitting {
    opacity: 0.7;
    pointer-events: none;
}

Bu durum sınıfları, kullanıcılara net görsel geri bildirimler sağlamanıza, form kullanılabilirliğini ve kullanıcı deneyimini iyileştirmenize olanak tanır.

Yöntem 2: CSS Hero ile İletişim Formu 7 Formlarını Stilize Etme

Contact Form 7 formlarının stilini değiştirmenin daha kolay bir yolu CSS Hero kullanmaktır. Herhangi bir CSS yazmadan formlarınızı düzenlemenizi sağlar.

Bu eklentiyi işe yarayıp yaramadığını görmek için denedik ve test ettik. Tam CSS Hero incelememizde bununla ilgili her şeyi görün.

CSS Hero premium bir eklenti olduğundan, öncelikle web sitelerinde bir CSS Hero hesabı oluşturmanız gerekir. 'Şimdi al' düğmesine tıklayın, bir plan seçin ve ödeme işlemini tamamlayın.

Bu işlem tamamlandığında, eklentinizin zip dosyasını ve lisans anahtarını bulabileceğiniz CSS Hero hesap kontrol panelinize erişeceksiniz.

Artık CSS Hero eklentisini web sitenize kurabilir ve etkinleştirebilirsiniz. WordPress yönetici alanınızda, Eklentiler » Yeni Eklenti Ekle bölümüne gidin.

Ardından, dosya yükleyiciyi açmak için 'Eklenti Yükle' düğmesine tıklayabilirsiniz.

Bundan sonra, 'Dosya Seç'e tıklayın ve eklentinin .zip dosyasını seçin.

Yüklendikten sonra, 'Şimdi Kur' düğmesine ve ardından göründüğünde 'Etkinleştir' düğmesine tıklayabilirsiniz. Ayrıntılar için WordPress eklentisi nasıl kurulur kılavuzumuza bakın.

Etkinleştirdikten sonra, formunuzu içeren sayfayı canlı web sitenizde ziyaret edebilirsiniz. Üstteki yönetici araç çubuğunda 'CSS Hero ile Özelleştir' seçeneğini göreceksiniz.

CSS Hero, kod yazmadan CSS'yi düzenlemek için kolay, tıklanabilir bir arayüz sunar.

Eklentiyi kullanarak, formunuzdaki herhangi bir alana, başlığa ve diğer öğelere tıklayabilir ve arka plan rengini, yazı tipini, kenarlıklarını, aralığını ve çok daha fazlasını düzenleyebilirsiniz.

Formunuzu özelleştirdikten sonra, alt kısımdaki 'Kaydet & Yayınla' düğmesine tıklamanız yeterlidir.

Bonus İpucu 💡: WordPress Formlarını Kod Kullanmadan Stil Edinmenin Bir Yolu

CSS sizin işiniz değilse, dakikalar içinde güzel biçimlendirilmiş formlar oluşturmanın çok daha kolay bir yolu var: WPForms. Contact Form 7 özelleştirme için CSS bilgisi gerektirirken, WPForms size sıfır kodlama gerektirmeden kutudan çıktığı gibi profesyonel görünümlü formlar sunar.

WPForms Kullanıcıları Neden Seviyor (İletişim Formu 7'ye Göre)

WPForms, 6 milyondan fazla web sitesi tarafından kullanılıyor ve sürekli olarak Contact Form 7'den daha kolay kullanıldığı yönünde derecelendiriliyor. İşte nedenleri:

• 5 Dakikada Form Oluşturma: Gerçek kullanıcılar, sürükle ve bırak oluşturucu ile ilk profesyonel formlarını 5 dakikanın altında oluşturduklarını bildiriyor. CSS öğrenme eğrisi gerekmez.
• 2.100'den Fazla Hazır Şablon: İletişim formları, anketler, kayıtlar, ödemeler ve daha fazlası için binlerce hazır form şablonu arasından seçim yapın. Sadece birini seçin ve özelleştirin.
• Yapay Zeka Destekli Form Oluşturucu: "Yemek seçenekleri olan bir konferans kayıt formu istiyorum" gibi formunuzu basit İngilizce ile açıklayın ve WPForms AI anında oluştursun.
• Tasarım Becerisi Olmadan Profesyonel Tasarım: Formlar, manuel stil çalışması gerektirmeden modern web tasarımı standartlarına uyarak sitenizde otomatik olarak temiz ve cilalı görünür.
• Olağanüstü Destek: Yardıma ihtiyacınız olduğunda, ücretsiz eklentiler için topluluk forumlarına güvenmenin aksine, WPForms ekibinden hızlı ve uzman yanıtları alırsınız.

WPForms'ta Bir Form Nasıl Stilize Edilir

İletişim formunuzu oluştururken, WPForms sürükle ve bırak oluşturucusundaki Ayarlar » Temalar bölümüne gidin.

İçeri girdikten sonra, sitenizin tasarımıyla anında uyum sağlamak için 40'tan fazla güzel, önceden tasarlanmış tema arasından seçim yaparsınız.

Bu temalar tamamen özelleştirilebilir. Şunları yapabilirsiniz:

• Alan boyutunu, kenarlıklarını ve renklerini ayarla
• Etiket yazı tiplerini, alt etiketleri ve hata mesajlarını ince ayarla
• Gönder düğmesini markanızla uyumlu olacak şekilde stilize edin

Ekranınızda şöyle görünebilir:

Alternatif olarak, WordPress blok düzenleyicisinden bir WPForms teması uygulayabilirsiniz.

Formunuzu bir sayfaya ekledikten sonra, sağdaki blok ayarları panelini açın ve 'Temalar' bölümüne gidin. Ardından, form oluşturucunun içindekiyle aynı liste olan WPForms'un yerleşik form temalarını bulacaksınız.

Ayrıca form alanı, etiket, düğme, kapsayıcı ve arka plan için özelleştirme seçenekleri de bulacaksınız.

Adım adım talimatlar için, WordPress formlarını nasıl özelleştireceğiniz ve biçimlendireceğiniz hakkındaki kılavuzumuza bakın.

Sonuç: CSS eğitimini atlamak ve bugün profesyonel formları yayına almak istiyorsanız, WPForms sizin için en iyi seçenektir. Saatlerce süren stil çalışmasından tasarruf sağlar ve bir tasarımcı tarafından yapılmış gibi görünen sonuçlar sunar.

SSS: WordPress'te İletişim Formu 7'yi Stilize Etme

Contact Form 7'ye yeni başlıyorsanız veya tasarımını ince ayarlamak istiyorsanız, bu hızlı SSS'ler en yaygın stil sorularınızda size yardımcı olacaktır.

Contact Form 7 gönder düğmesini nasıl stilize ederim?

Contact Form 7 gönder düğmesini, varsayılan gönder sınıfı .wpcf7-submit'i hedefleyerek CSS ile stilize edebilirsiniz. Ardından özel stillerinizi Görünüm » Özelleştir » Ek CSS bölümüne ekleyin.

WordPress'te Contact Form 7 nasıl yapılandırılır?

Contact Form 7'yi yapılandırmak için formunuzu açabilir, 'Posta' sekmesine gidebilir, 'Kime' adresini (mesajların gönderileceği yer) ayarlayabilir ve posta etiketlerinin form alanlarınızla eşleştiğinden emin olabilirsiniz.

Contact Form 7 ücretsiz mi?

Evet, Contact Form 7 tamamen ücretsiz olarak resmi WordPress.org eklenti dizininden indirilebilir ve kullanılabilir. Çekirdek eklenti ücretsizdir, ancak bazı isteğe bağlı üçüncü taraf eklentileri veya entegrasyonları ücretli olabilir.

İletişim Formu 7 iyi mi?

Ücretsiz ve esnek bir form eklentisi istiyorsanız ve biraz daha teknik bir kurulumdan çekinmiyorsanız, Contact Form 7 işlevsel ve yaygın olarak kullanılan bir seçenektir.

Özel HTML ve CSS ile birleştirildiğinde güçlüdür, ancak görsel bir sürükle-bırak oluşturucu sunmaz, bu nedenle stil ve düzen değişiklikleri genellikle kodu düzenlemeyi veya ek araçlar kullanmayı gerektirir.

Contact Form 7'yi düzenleme için Canva'ya yerleştirebilir miyim?

Hayır, bir Contact Form 7 formunu Canva içinde düzenleyemezsiniz çünkü Contact Form 7 bir WordPress eklentisidir ve çalışması için bir WordPress ortamına ihtiyaç duyar. Ancak, formunuzun görünümünü bir maket olarak Canva'da tasarlayabilir ve ardından bu tasarımı WordPress'te yeniden oluşturabilirsiniz.

WordPress Form Özelleştirmesi İçin Ek Kaynaklar

Umarım bu makale, WordPress'te Contact Form 7 formlarını nasıl stilize edeceğinizi öğrenmenize yardımcı olmuştur.

Ayrıca diğer faydalı rehberlerimize de göz atmak isteyebilirsiniz:

• WordPress Formlarına Resim Seçenekleri Nasıl Eklenir
• WordPress'te Adres Alanları İçin Otomatik Tamamlama Nasıl Eklenir
• WordPress'te Daha Etkileşimli Formlar Oluşturmak İçin İpuçları
• WordPress Formlarında Koşullu Mantık Kullanımı
• WordPress Formlarını Kullanma Kılavuzu

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.