WordPress İletişim Formu Stili Nasıl Değiştirilir

WordPress iletişim formu stilinizi değiştirmek ister misiniz? O zaman bu rehber tam size göre! WordPress form stilinin nasıl süper kolay olabileceğini öğreneceksiniz! Daha fazlasını bul.

Yaklaşık okuma süresi : 6 dakika

İlk izlenim yaratmak için sadece bir şansınız var.

Ziyaretçilerinizin dikkatini güzel bir formla çekmek, mükemmel bir izlenim bırakmanın bir yoludur.

Aynı zamanda formunuzu doldurmalarını sağlamanın da mükemmel bir yoludur. Sonuçta, görmezlerse nasıl doldurabilirler?

Dolayısıyla, formlarınızla temelden güzele gitmeye hazırsanız, bu kılavuz tam size göre.

WordPress iletişim formu stilinizi kolayca değiştirmenin iki yolunu göstereceğiz!

Hadi başlayalım.

WordPress iletişim formu stilinizi nasıl değiştirirsiniz?

Bahsettiğimiz gibi, formunuzun stilini özelleştirmenin iki yolu vardır.

Hangisini seçeceğiniz, kodlama ile konfor seviyenize bağlı olacaktır. Ancak size her iki yöntemi de göstereceğiz, böylece mevcut tüm seçenekleri bilirsiniz.

Yöntem 1: Formunuzun kodunu WordPress'te düzenleyin

Yani, kodlama sularına kafa üstü dalmak istiyorsun, öyle mi?

Halihazırda oluşturulmuş bir formunuz olduğunu ve onu özelleştirmek istediğinizi varsayıyoruz. Formunuz yoksa, başlamak için form oluşturma kılavuzumuza bakın.

1. Adım: Formunuzun kimliğini veya sınıfını alın

Başlamak için, formunuzun kimliğini veya Sınıfını almanız gerekir.

Bunu yapmanın kolay bir yolu, web sitenize gidip formunuzu sağ tıklatıp İncele'yi tıklamaktır. Burada, alt temanızda form HTML şablonunu göreceğiz.

Google'ın Geliştirici Araçları kenar çubuğu dışarı kayar ve formunuz için farklı kod bölümlerini görüntüleyebilirsiniz.

En önemli şey, özelleştirmek istediğiniz alanı bulmak ve kimliği veya Sınıf adını takip etmektir. Değişiklik yapmak için bunu kullanacaksınız.

Örneğin, Bize Ulaşın form şablonumuzun arka plan rengini değiştirmek istersek, en dıştaki kod parçasını buluruz. Bu durumda, bu bir div api-form-box sınıfı.

Hatta bu konsoldan nasıl görüneceğini test edebiliriz.

Div'e sağ tıklayıp Add Attribute'e tıklarsak, bir arka plan renk stili ekleyebiliriz.

Enter'a basın ve değişiklikler hemen pencerede gösterilir.

Ama endişelenme. Sayfayı her yenilediğinizde, form normale dönecektir.

Ardından, gerekli CSS kodu değişikliklerini yapmak için WordPress yöneticinize gidin.

2. Adım: WordPress yönetici panelinizde CSS'yi değiştirin

Artık formumuzda değiştirmek istediğiniz birkaç şeyi not aldığınıza göre, başlamak için WordPress yöneticinize gidin.

Ardından, formun stilini belirlemek için WordPress kenar çubuğunuzda Görünüm → Özelleştir → Ek CSS'yi seçin.

Formunuz için CSS sınıflarını girebileceğiniz yer burasıdır.

Örneğin, formumuzda birkaç şeyi değiştirmeye karar verdik, işte girdiğimiz kod:

Bir Sınıfı etiketlemek için bir . sınıf adından önce. Bir kimlik için, bir # koyarsınız.

Ancak, bu yöntemi kullanıyorsanız, değişikliklerinizi daha iyi anlamak için CSS kuralları hakkında daha fazla bilgi edinmenizi öneririz.

Örneğimiz için, şu şekilde bozulur:

• .api-form-box arka plan rengini açık mavi olarak değiştiriyor
• .frm-button-submit, gönder düğmesi arka planını sarıya ve metni siyaha çeviriyor
• .frm-gönder, düğmeyi formda ortalıyor

Bu değişikliklerle formumuz şöyle görünecektir:

Buradan, gücünüz sınırsızdır. CSS kullanmayı öğrenirseniz, formunuzu istediğiniz gibi özelleştirebilirsiniz.

Yine de bu yöntemin bazı dezavantajları vardır.

Bir güncelleme formunuzun tasarımını bozabilir ve tekrar yapmanıza neden olabilir. Zaman alıcı olduğundan bahsetmiyorum bile. Birden çok iletişim formunuz varsa, HTML kodunu düzenlemeniz ve her birine özel CSS eklemeniz gerekir.

Ancak daha basit ve kırılmaz bir şey istiyorsanız, aşağıdaki yöntemi incelemenizi öneririz.

Yöntem 2: Görsel şekillendirici içeren bir form oluşturucu kullanın

Kodlama, öğrenmesi zaman alan bir beceridir.

Ve birçok insanın öğrenmeye vakti yok. Bu sizseniz, bir form oluşturucu en iyi seçeneğinizdir.

Ve önerdiğimiz biri Müthiş Formlar .

WordPress'in en gelişmiş form oluşturucu WordPress eklentisidir, yani form oluşturma basit ve zaman kazandırıcıdır, bu da web sitenizin diğer alanlarına ayırmak için daha fazla zaman demektir.

Web sitenizdeki formun türü ne olursa olsun, Formidable hepsini hızlı bir şekilde halledebilir.

Kodlama yok, güçlük yok — sadece kolay form oluşturma.

Aralarından seçim yapabileceğiniz başka form oluşturucular da var (WPForms, Gravity Forms ve daha fazlası), ancak Formidable ile birlikte gelen stil oluşturma yeteneklerini sunmuyorlar. Ve bu, formunuzun nasıl göründüğü konusunda daha fazla güce sahip olduğunuz anlamına gelir.

Formidable'ın premium planlarına da göz atmanızı öneririz.

Formunuza stil vermeleri gerekmese de birçok harika özelliğe sahip olursunuz:

• Form tasarım şablonlarına erişim
• Arka plan resminizi kişiselleştirme yeteneği
• Formunuzu daha hızlı başlatmak için daha fazla form şablonu
• Ve daha fazlası

Böylece, Formidable'ı kurup etkinleştirdikten sonra başlamaya hazır olacaksınız.

Müthiş Formları şimdi alın!

Formunuzu şekillendirmek ve sitenizde canlı hale getirmek için sadece üç basit adım:

1. form oluştur
2. Formu stillendirin
3. formu göster

1. Adım: Bir form oluşturun

Bir forma stil vermek için, stil verecek bir forma ihtiyacınız var, değil mi?

Bu nedenle, WordPress yöneticinize gidin ve Formidable → Forms → Add New seçeneğine gidin.

Başlamak için önceden oluşturulmuş birçok şablonumuzdan (premium özellik) birini veya Boş Form'u seçebilirsiniz.

Ardından, formunuza bir ad verin ve Oluştur'u tıklayın.

Eklenti sizi, formunuzu kolayca düzenleyebileceğiniz sürükle ve bırak oluşturucusuna götürecektir.

Kenar çubuğu menüsünden istediğiniz form alanlarını ekleyin, alan etiketlerini özelleştirin, giriş türünü değiştirin ve daha fazlasını yapın.

Bir iletişim formu oluşturuyorsanız, aşağıdakileri eklemek en iyisidir:

• Ziyaretçinin adı için metin alanı
• Onlarla iletişim kurmanın bir yolu için e-posta
• Eklemek istedikleri bir mesajın paragrafı

İletişim formunuz ayarlandıktan sonra, değişikliklerinizi kaydetmek için Güncelle'ye tıklayın.

Ardından, Stil sekmesine gideceğiz.

2. Adım: Forma stil verin

Stil sekmesinin altında birkaç seçenek göreceksiniz.

Size zaman kazandırmak (premium) için önceden hazırlanmış tasarım şablonlarımızdan birini seçebilir veya kendi şablonunuzu tasarlamaya başlayabilirsiniz.

Kendinizinkini tasarlamak için Müthiş Stil'in yanındaki üç noktayı tıklayın ve Düzenle'yi tıklayın. Formidable Style, Formidable'daki varsayılan stildir.

Bu sizi formunuzu özelleştirebileceğiniz Formidable Style tasarımcımıza götürecektir.

Etiketlerinizin boyutunu ve rengini, giriş alanlarını, yazı tipi boyutunu ve arka plan rengini değiştirebilir ve hatta bir arka plan resmi yükleyebilirsiniz!

Örneğin, Cheap n' Cheesy adlı bir test sitesi için işletmeyi yansıtan bir form tasarladık:

Siz ve iletişim formunuz için olasılıklar sonsuzdur!

Bu nedenle, formunuzu özelleştirdikten sonra değişikliklerinizi kaydetmek için Güncelle'yi tıklayın.

Şimdi sadece onu sergilememiz gerekiyor!

3. Adım: Formu görüntüleyin

Formunuzu sergilemek, onu oluşturmaktan daha kolaydır.

Öncelikle, formunuzu göstermek istediğiniz gönderiye veya sayfaya gidin ve yeni bir WordPress bloğu ekleyin.

Ardından, Formidable Forms bloğunu arayın, ekleyin ve açılır menüden formunuzu seçin.

Son olarak, gönderinizi veya sayfanızı güncelleyin, formunuz sayfanızda yayında olacak!

Formidable'daki her şeyde olduğu gibi bunun da kolay olduğunu söylemiştik.

Müthiş Formları şimdi alın!

Sitenizde WordPress iletişim formlarını şekillendirmeye hazır mısınız?

İletişim formlarını biçimlendirme yeteneğine sahip olmak, istediğiniz değil, ihtiyacınız olan bir şeydir.

Özelleştirmelerini içeren Contact Form 7 eklentisi aramalarını görebilirsiniz. İletişim Formu 7 CSS, WPCF7'de metin girişi veya WPCF7 ile e-posta girişi gibi şeyler.

Bu iki yöntemle bunların hiçbiri gerekli değildir. Ve bu gönderi size WordPress'te bir iletişim formunu nasıl özelleştireceğinizi öğretti, böylece formunuz istediğiniz gibi görünecek. İster özel HTML, CSS ve daha fazlasını girin, ister Formidable Forms ile devam edin. Hayal kırıklığına uğramayacaksın.

Yani, daha fazla beklemeyin. Formidable Forms'u alın ve formlarınızı tasarlamaya başlayın!

Daha fazla harika form ipucu ve püf noktası için bizi Facebook, Twitter ve YouTube'da takip edin!

Formidable blogundan daha fazlasını okuyun

• Müthiş Formlar 6.0! Stil Şablonları, Onay Formu Eylemi + Daha Fazlası
  Devamını oku

  Jotform - Typeform - Zorlu Formlar [Karşılaştırıldı]
  Devamını oku

  Gönderdikten Sonra Yönlendirmek İçin Bir WordPress İletişim Formu Nasıl Kullanılır
  Devamını oku

Formidable Forms'un bugün mevcut olan en hızlı WordPress form oluşturucu eklentilerinden biri olduğunu biliyor muydunuz? Halihazırda kullanmıyorsanız, ücretsiz eklentimizi veya tam özellikli pro sürümünü kullanmaya başlayın!