WordPress Formlarınızı Özelleştirme ve Stil Verme (2 Kolay Yöntem)

WordPress formlarınızı nasıl şekillendireceğinizi mi merak ediyorsunuz?

Formlarınızı web sitenizin tasarımına uyacak şekilde özelleştirebilirsiniz. Bu, siteniz için görsel olarak daha çekici ve profesyonel bir görünüm oluşturabilir ve kullanıcı deneyimini iyileştirebilir.

Bu makalede, WordPress formlarını nasıl kolayca özelleştireceğinizi ve şekillendireceğinizi adım adım göstereceğiz.

WordPress Formlarınızı Neden Özelleştirmeli ve Stilize Etmelisiniz?

WordPress web sitenize bir eklenti kullanarak bir form eklediğinizde, düzeninin genellikle basit ve sade görünümlü olduğunu fark edeceksiniz.

Örneğin, bir kullanıcı kayıt formu eklentisi kullanarak web sitenize bir kayıt formu eklerseniz, düzeninin biraz sıkıcı olduğunu göreceksiniz. Bu, ziyaretçinizin dikkatini çekmeyebilir ve hatta formu doldurmaktan vazgeçirebilir.

Formlarınızı özelleştirerek WordPress temanızla ve markanızla eşleştirebilir ve daha çekici hale getirebilirsiniz.

Bu daha fazla dönüşüm sağlayabilir çünkü stilize edilmiş WordPress formlarında gezinmek daha kolaydır ve daha fazla kullanıcıyı formları doldurmaya teşvik edebilir.

Stil sahibi formlar kullanıcılar arasında marka bilinirliğinizi de artırabilir. Örneğin, formunuzu daha akılda kalıcı ve etkili hale getirmek için web sitenizin logosunu ve imza şirket renklerini kullanabilirsiniz.

Bunu söyledikten sonra, WordPress formlarınızı adım adım nasıl kolayca özelleştirebileceğinizi ve şekillendirebileceğinizi görelim. Bu yazıda iki yöntemi ele alacağız ve kullanmak istediğinize atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

Yöntem 1: WPForms ile WordPress Formlarını Özelleştirme ve Stil Verme (Kodsuz Yöntem)

WPForms kullanarak WordPress formlarınızı kolayca özelleştirebilir ve şekillendirebilirsiniz. Piyasadaki en iyi WordPress iletişim formu eklentisidir ve 6 milyondan fazla web sitesi tarafından kullanılmaktadır.

WPForms, istediğiniz her türlü formu oluşturmayı süper kolaylaştıran bir sürükle ve bırak oluşturucu ile birlikte gelir. Ayrıca, formunuz için herhangi bir kodlama gerektirmeyen önceden hazırlanmış temalar ve yerleşik özelleştirme seçeneklerinden oluşan bir kütüphaneye bile sahiptir.

Daha fazla bilgi edinmek için ayrıntılı WPForms incelememize bakın.

Öncelikle WPForms eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Ayrıntılı talimatlar için WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından, lisans anahtarınızı girmek için WordPress yönetici kenar çubuğundan WPForms ” Ayarlar sayfasını ziyaret edin.

Bu bilgileri WPForms web sitesindeki hesabınızda bulabilirsiniz.

Bunu yaptıktan sonra, WordPress panosundan WPForms ” Yeni Ekle ekranına gidin.

Bu sizi formunuz için bir ad yazarak başlayabileceğiniz ‘Şablon Seç’ sayfasına götürecektir. Bundan sonra, istediğiniz herhangi bir form şablonunu seçebilir ve altındaki ‘Şablonu Kullan’ düğmesine tıklayabilirsiniz.

Bu eğitimde, web sitemize basit bir iletişim formu oluşturup ekleyeceğiz.

Bu, şablonu WPForms form oluşturucusunda başlatacak ve burada sağda bir form önizlemesi ve sol sütunda form alanları göreceksiniz.

Buradan, istediğiniz herhangi bir form alanını isteğinize göre forma sürükleyip bırakabilirsiniz. Ayrıca alanları yeniden düzenleyebilir veya silebilirsiniz.

Ayrıntılı talimatlar için WordPress’te bir iletişim formunun nasıl oluşturulacağına ilişkin eğitimimize bakın.

Formunuzla işiniz bittiğinde, form oluşturucudan çıkmak için üstteki ‘Kaydet’ düğmesine tıklamanız yeterlidir.

Bundan sonra, WordPress kontrol panelinden WPForms ” Ayarlar sayfasını ziyaret etmeniz ve ‘Modern Biçimlendirmeyi Kullan’ onay kutusunu tıklamanız gerekir. Bunu yapmazsanız, WPForms özelleştirme ayarları blok düzenleyicide kullanılamayacaktır.

Ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’ düğmesine tıklamayı unutmayın.

Ardından, yeni oluşturduğunuz formu eklemek istediğiniz sayfayı veya gönderiyi açın.

Buradan, blok menüsünü açmak ve WPForms bloğunu eklemek için sol üst köşedeki blok ekle ‘+’ düğmesine tıklamanız gerekir.

Bunu yaptıktan sonra, sitenize eklemek istediğiniz formu bloğun içindeki açılır menüden seçmeniz yeterlidir.

Formu eklediğinize göre, şimdi onu özelleştirme ve stil verme zamanı.

Bunu yapmak için ekranın sağ tarafındaki blok panelini açmalı ve ‘Temalar’ bölümüne ilerlemelisiniz. Buradan, formunuza anında güzel bir görünüm kazandırmak için önceden tasarlanmış 40’tan fazla temadan oluşan bir kitaplıktan seçim yapabilirsiniz.

Ardından, formunuzu daha da özelleştirmek için ‘Alan Stilleri’ bölümüne gidebilirsiniz.

Açılır menüden form alanlarınız için bir boyut seçebilir ve hatta bunlar için bir kenarlık boyutu ve yarıçapı ayarlayabilirsiniz.

Ardından, renk seçici aracını kullanarak form alanlarının arka plan, metin ve kenarlık rengini değiştirebilirsiniz.

Burada, görsel olarak çekici bir form oluşturmak için markanızın imza renklerini veya WordPress blogunuzun geri kalanında kullanılan diğer renkleri kullanabilirsiniz.

Bunu yaptıktan sonra, açılır menüden etiketlerin yazı tipi boyutunu seçebileceğiniz ‘Etiket Stilleri’ bölümüne ilerleyin.

Bundan sonra, formunuzda görüntülenecek alan etiketlerinin, alt etiketlerin ve hata mesajlarının yazı tipi rengini de değiştirebilirsiniz.

Formunuzdaki düğmeyi özelleştirmek için, ‘Düğme Stilleri’ bölümüne ilerlemeniz ve açılır menüden boyutunu seçmeniz gerekir.

Ayrıca bir kenarlık yarıçapı ayarlayabilir ve formun gönder düğmesinin arka planını ve metin rengini değiştirebilirsiniz.

Formu özelleştirmeyi tamamladıktan sonra, ayarlarınızı kaydetmek için üstteki ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklamanız yeterlidir.

Şimdi, şekillendirilmiş WordPress formunu çalışırken görmek için sitenizi ziyaret edebilirsiniz.

Yöntem 2: WordPress Formlarını CSS ile Stilize Etme (Gelişmiş Özelleştirme)

WPForms tarafından sunulan özelleştirme seçeneklerini kullanmak istemiyorsanız veya CSS ile farklı özelleştirmeler uygulamak istiyorsanız, özel bir CSS snippet’i de kullanabilirsiniz.

Bunu yapmak için, öncelikle piyasadaki 1 numaralı form oluşturucu olan WPForms‘u kullanarak bir form oluşturmanız gerekecektir.

İletişim formları, dosya yükleme formları, kayıt formları, RSVP formları ve çok daha fazlasını oluşturmak için kullanabileceğiniz birçok şablonla birlikte gelen bir sürükle ve bırak oluşturucudur.

Ayrıntılı talimatlar için WordPress’te iletişim formu oluşturma eğitimimize veya yöntem 1’e bakabilirsiniz.

Bir form oluşturduktan sonra, piyasadaki en iyi WordPress kod parçacıkları eklentisi olan WPCode‘u kullanarak formu özelleştirmenin zamanı geldi.

WordPress formunuzu şekillendirmek için CSS kodu eklemenin en kolay ve en güvenli yoludur.

Öncelikle WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekecektir. Ayrıntılı talimatlar için WordPress eklentisinin nasıl kurulacağına ilişkin başlangıç kılavuzumuza bakabilirsiniz.

Etkinleştirmenin ardından, WordPress kontrol panelinden Kod Parçacıkları ” + Parçacık Ekle sayfasını ziyaret edin.

Oraya vardığınızda, ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğinin altındaki ‘Snippet Kullan’ düğmesine tıklamanız yeterlidir.

Bu sizi kod parçacığınız için bir ad yazarak başlayabileceğiniz ‘Özel Snippet Oluştur’ sayfasına götürecektir.

Bundan sonra, ekranın sağ köşesindeki açılır menüden ‘CSS Snippet’ seçeneğini seçin.

Ardından, aşağıdaki kodu kopyalayıp ‘Kod Önizleme’ kutusuna yapıştırın:

#wpforms-0000 .wpforms-form {
    background-color: #ADD8E6 !important;
	font-family: 'Arial', sans-serif !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

Bunu yaptıktan sonra, en üstteki varsayılan kısa kodu özelleştirmek istediğiniz formun kısa koduyla değiştirmeniz gerekecektir.

Bunu yapmak için, WordPress panosundan WPForms ” Tüm Formlar sayfasını ziyaret edin ve stil vermek istediğiniz formun WPForms ID numarasını kopyalayın.

Bundan sonra, formun ID numarasını koddaki wpforms- satırının yanına yapıştırın. Şimdi, tüm kod yalnızca bu belirli formda yürütülecektir.

Ardından, kod parçacığını değiştirerek arka plan rengi için onaltılık kodu kolayca değiştirebilir, istediğiniz bir yazı tipi ailesini ekleyebilir ve formun dolgu ve kenarlık yarıçaplarını yapılandırabilirsiniz.

Bunu yaptıktan sonra, ‘Ekleme’ bölümüne gidin ve ‘Otomatik Ekleme’ modunu seçin.

Kod, aktivasyonun ardından sitenizde otomatik olarak çalıştırılacaktır.

Son olarak, sayfanın en üstüne geri gidin ve anahtarı ‘Etkin’ olarak değiştirin.

Bundan sonra, ayarlarınızı kaydetmek için ‘Snippet’i Kaydet’ düğmesine tıklayın

Artık WordPress formu CSS parçacığına göre otomatik olarak özelleştirilecek ve siz de formu görüntüleyebileceksiniz.

Ancak, formu henüz web sitenize eklemediyseniz, blok düzenleyicide bir sayfa veya gönderi açmanız yeterlidir.

Oraya vardığınızda, blok menüsünü açmak ve WPForms bloğunu eklemek için sol üst köşedeki ‘+’ düğmesine tıklayın.

Bundan sonra, bloğun içindeki açılır menüden CSS kod parçacığını kullanarak şekillendirdiğiniz formu seçin.

Son olarak, ayarlarınızı kaydetmek için ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklayın.

Şimdi, özelleştirilmiş formu çalışırken görmek için WordPress sitenizi ziyaret edebilirsiniz.

Bonus: Özel Web Sitesi Sayfaları Oluşturma

WordPress formlarını şekillendirmek, sitenizi daha çekici ve görsel olarak ilginç hale getirmenin sadece bir yoludur. SeedProd‘u kullanarak kendi tamamen özelleştirilmiş web sitesi sayfalarınızı da tasarlayabilirsiniz.

Herhangi bir kod kullanmadan çekici sayfalar oluşturmanızı sağlayan piyasadaki en iyi WordPress sayfa oluşturucu eklentisidir.

SeedProd sürükle-bırak oluşturucu, önceden hazırlanmış şablonlar ve site kitleri, kolay özelleştirme seçenekleri, renk paletleri ve gelişmiş sayfa blokları ile birlikte gelir. Ayrıca, WPForms formlarınızı SeedProd editörüne kolayca yerleştirebilirsiniz.

SeedProd’u viral bir bekleme listesi sayfası, bir satış sayfası, bir bakım sayfası, bir yakında sayfası ve çok daha fazlasını oluşturmak için bile kullanabilirsiniz.

Daha fazla ayrıntı için WordPress’te açılış sayfasının nasıl oluşturulacağına ilişkin eğitimimize göz atabilirsiniz.

Umarız bu makale WordPress formlarınızı nasıl özelleştireceğinizi ve şekillendireceğinizi öğrenmenize yardımcı olmuştur. WordPress formlarına kupon kodu alanının nasıl ekleneceğine ilişkin eğitimimize ve WPForms ile Gravity Forms ve Formidable Forms karşılaştırmamıza da göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.