Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Web sitenize formlar eklediyseniz, bunları sitenizin tasarımına uyacak şekilde özelleştirmek harika bir fikirdir. İnsanların dikkatini çekmeye, etkileşimi artırmaya ve hedef kitlenizle sorunsuz bir etkileşim sağlamaya yardımcı olabilir.

İster iletişim formu, ister kayıt formu veya anket olsun, sitenizin estetiğine uygun olması büyük fark yaratabilir.

Yıllar içinde web sitemize çeşitli formlar ekledik ve bunları her zaman marka renklerimize uyacak şekilde özelleştirdik. Bu sadece marka bilinirliğini artırmakla kalmıyor, aynı zamanda formları görsel olarak daha çekici hale getiriyor. Sonuç olarak, formları dolduran kullanıcı sayısında bir artış olduğunu fark ettik.

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

Customize and style your WordPress forms

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.

Registration form preview

Formlarınızı özelleştirerek, WordPress temanız ve markanızla eşleştirerek 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.

Styled form preview

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, her türlü formu oluşturmayı süper kolaylaştıran bir sürükle ve bırak oluşturucu ile birlikte gelir. Hatta formunuz için herhangi bir kodlama gerektirmeyen önceden hazırlanmış temalar ve yerleşik özelleştirme seçeneklerinden oluşan bir kütüphaneye 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.

Not: WPForms’un bu eğitim için kullanabileceğiniz ücretsiz bir sürümü de vardır. Ancak, daha fazla ayar ve seçeneğe sahip olduğu için premium eklentiyi kullanacağız.

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.

Entering the WPForms license key

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.

Choose the contact form template

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.

Save your form

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 etmenizve ‘Modern Biçimlendirmeyi Kullan’ onay kutusunu tıklamanız gerekir.Bunu yapmazsanız, WPForms özelleştirme ayarları blok düzenleyicidekullanılamayacaktır.

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

Enable modern markup in WPForms

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.

Add the WPForms block

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.

Select a form theme

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ın boyutunu seçebilir ve hatta kenarlık boyutlarını ve yarıçaplarını ayarlayabilirsiniz.

Change form field size and radius

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.

Change field color

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.

Configure label style

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

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

Configure button style

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.

Form customization preview

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.

WPCode WordPress code snippets plugin

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.

Not: WPCode’un bu eğitim için kullanabileceğiniz ücretsiz bir sürümü vardır. Ancak biz premium planı kullanacağız.

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.

Add new snippet

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.

Choose CSS snippet option from the dropdown menu

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.

copy the form ID number

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.

Add form ID number in the code snippet

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.

Choose an insertion method

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

Save form styling snippet

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.

Add the WPForms block

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.

Form CSS styling preview

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.

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

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.

Adding a contact form to your maintenance page

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.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

6 yorumBir Cevap Bırakın

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Mrteesurez

    Part of the reasons I like WPForms is the fact that it’s flexible and highly customizable with built-in templates or using CSS code, one only needs to identify the ID of the particular form he is customizing.
    A well designed and customized form appeal to users and position your form as professional.
    Thanks for the guide.

    • WPBeginner Support

      You’re welcome!

      Yönetici

  3. Jiří Vaněk

    Thanks for the tutorial. I placed a contact form on the website using WPForms and left it in its default state. Actually, I didn’t even think that I could customize it somehow. Thanks to this article, I got several ideas on how to make it more graphically appealing. Thanks

  4. Ralph

    Thank you for this guide.
    Now my contact form will look better and more professional than default white blank space with light grey lines. This will level up my website design!

    • WPBeginner Support

      Glad we could help improve your site’s design :)

      Yönetici

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.