WordPress Formlarınızı Nasıl Özelleştirir ve Stilleştirirsiniz (2 Kolay Yöntem)

Düz, hantal bir WordPress formu, en iyi tasarlanmış web sitesini bile bitmemiş hissettirebilir ve tamamen uyumsuz görünebilir. En kötüsü ne mi? Ziyaretçiler, sitenin geri kalanıyla eşleşmiyorsa doldurma konusunda emin olamayabilirler.

Bir WordPress blogu çalıştırma yolculuğumuz boyunca, iyi tasarlanmış, markalı formların büyük bir fark yaratabileceğini öğrendik.

Hatta formlarımızı sitemizin renkleri ve düzeniyle eşleştirdiğimizde, form gönderimlerinde büyük bir artış gördük.

Bu kılavuzda, WordPress formlarınızı özelleştirmenin ve stilini belirlemenin, böylece sadece harika görünmelerini değil, aynı zamanda daha iyi performans göstermelerini sağlamanın iki basit ama güçlü yolunu göstereceğiz. 🚀

WordPress Formlarınızı Neden Özelleştirmeli ve Stilleştirmelisiniz?

Bir eklenti kullanarak WordPress web sitenize bir form eklediğinizde, düzeninin genellikle basit ve sıradan göründüğünü fark edeceksiniz.

Örneğin, bir kayıt formu eklediğinizde, kullanıcı kayıt formu eklentisi kullanarak web sitenize, 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ştirmek, onları WordPress temanız ve markanızla eşleştirerek daha çekici hale getirebilir.

Bu, daha fazla dönüşüme yol açabilir çünkü stilize edilmiş WordPress formları gezinmesi daha kolaydır ve daha fazla kullanıcının bunları doldurmasını teşvik edebilir.

Stilize edilmiş formlar ayrıca kullanıcılar arasında marka bilinirliğinizi artırabilir. Örneğin, formunuzu daha akılda kalıcı ve etkili hale getirmek için web sitesi logonuzu ve imza şirket renklerinizi kullanabilirsiniz.

Bununla birlikte, WordPress formlarınızı adım adım nasıl kolayca özelleştireceğinizi ve stilize edeceğinizi göstereceğiz. Bu gönderide iki yöntemi ele alacağız ve kullanmak istediğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

• Yöntem 1: WPForms ile WordPress Formları Nasıl Özelleştirilir ve Stilize Edilir (Kodsuz Yöntem)
• Yöntem 2: WordPress Formlarını CSS ile Biçimlendirme (Gelişmiş Özelleştirme)
• Bonus İpucu 🧑‍💻: Özel Web Sitesi Sayfaları Nasıl Kolayca Oluşturulur

Başlayalım!

Yöntem 1: WPForms ile WordPress Formları Nasıl Özelleştirilir ve Stilize Edilir (Kodsuz Yöntem)

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

Kendimiz de birçok form türü için WPForms kullanıyoruz ve eklenti hakkında detaylı WPForms incelememizde daha fazla bilgi edinebilirsiniz.

WPForms, her türlü formu oluşturmayı süper kolaylaştıran sürükle ve bırak oluşturucu ile birlikte gelir. Hatta kodlama gerektirmeyen 2.000'den fazla hazır tema ve yerleşik özelleştirme seçeneklerinden oluşan geniş bir kütüphaneye sahiptir.

Ayrıca, basit bir komut istemi kullanarak sıfırdan özel formlar oluşturmanıza ve açılır menü, radyo düğmeleri veya onay kutuları gibi alanlar için birden çok seçenek oluşturmanıza yardımcı olacak yapay zeka araçlarına sahiptir.

Öncelikle WPForms eklentisini yükleyip etkinleştirmeniz gerekir. Ayrıntılı talimatlar için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, lisans anahtarınızı girmek için WordPress yönetici kenar çubuğundan WPForms » Ayarlar sayfasını ziyaret edin.

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

Bunu yaptıktan sonra, WordPress kontrol panelinden WPForms » Yeni Ekle ekranına gidin.

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

Bu eğitimin amacı doğrultusunda, web sitemize basit bir iletişim formu oluşturup ekleyeceğiz.

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

Buradan, istediğiniz herhangi bir form alanını beğeninize göre forma sürükleyip bırakabilirsiniz. Alanları yeniden düzenleyebilir veya silebilirsiniz.

Ayrıntılı talimatlar için, WordPress'te iletişim formu oluşturma konulu eğitimimize nasıl iletişim formu oluşturulacağı bölümüne 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ına gitmeniz ve ‘Modern İşaretlemeyi Kullan’ onay kutusunu işaretlemeniz gerekir. Bunu yapmazsanız, WPForms özelleştirme ayarları blok düzenleyicide kullanılamaz.

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

Ardından, az önce 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 ekle bloğu '+' düğmesine tıklamanız gerekir.

Bunu yaptıktan sonra, bloğun içindeki açılır menüden sitenize eklemek istediğiniz formu 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 kaydırmalısınız.

Buradan, formunuza anında güzel bir görünüm kazandırmak için 40'tan fazla önceden tasarlanmış şablon kitaplığından seçim yapabilirsiniz.

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

Açılır menüden form alanlarınızın boyutunu seçebilir, hatta kenarlık boyutlarını ve yarıçaplarını ayarlayabilirsiniz.

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

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

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

Ardından, 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, aşağı kaydırarak ‘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 ve metin rengini değiştirebilirsiniz.

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

Artık, biçimlendirilmiş formu çalışırken görmek için WordPress sitenizi ziyaret edebilirsiniz.

Yöntem 2: WordPress Formlarını CSS ile Biçimlendirme (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 parçacığı da kullanabilirsiniz.

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

Sürükle ve bırak oluşturucu kullanır ve iletişim, dosya yükleme formları, kayıt formları, RSVP formları ve çok daha fazlasını içeren formları hızla oluşturmanıza yardımcı olmak için 2.000'den fazla şablonla birlikte gelir!

Ayrıntılı talimatlar için, WordPress'te iletişim formu oluşturma hakkındaki eğitimimize bakabilir veya 1. yöntemi görebilirsiniz.

Bir form oluşturduktan sonra, onu WPCode kullanarak özelleştirme zamanı. WordPress formunuzu stilize etmek için CSS kodu eklemenin en kolay ve en güvenli yolunu sunan, piyasadaki en iyi WordPress kod parçacığı eklentisidir.

İş web sitelerimizin bazıları özel kod parçacıklarını eklemek ve yönetmek için WPCode'u kullanıyor ve bu son derece iyi çalışıyor. Aracın ayrıntıları için tam WPCode incelememize bakın.

Öncelikle, WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekecektir. Ayrıntılı talimatlar için, bir WordPress eklentisinin nasıl kurulacağına dair başlangıç kılavuzumuza bakmak isteyebilirsiniz.

Etkinleştirdikten sonra, WordPress kontrol panelinden Kod Parçacıkları » + Parçacık Ekle sayfasına gidin.

Oraya gittiğinizde, 'Özel Kodunuzu Ekle (Yeni Kod Parçacığı)' seçeneğinin altındaki 'Kod Parçacığını Kullan' düğmesine tıklamanız yeterlidir.

Bu sizi, kod parçacığınıza bir isim yazarak başlayabileceğiniz ‘Özel Kod Parçacığı 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 ‘Kod Önizleme’ kutusuna kopyalayıp 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, üstteki varsayılan kısa kodu özelleştirmek istediğiniz formun kısa koduyla değiştirmeniz gerekecektir.

Bunu yapmak için, WordPress kontrol panelinden WPForms » Tüm Formlar sayfasına gidin ve stil vermek istediğiniz formun WPForms Kimlik numarasını kopyalayın.

Ardından, kodu wpforms- satırının yanına formun kimlik numarasını yapıştırın. Artık tüm kod yalnızca bu belirli formda çalıştırılacaktır.

Ardından, arka plan rengini kolayca değiştirebilir, istediğiniz yazı tipini ekleyebilir ve kod parçacığını değiştirerek formun dolgu ve kenar yarıçaplarını yapılandırabilirsiniz.

Bunu yaptıktan sonra, aşağı kaydırarak 'Ekleme' bölümüne gidin ve 'Otomatik Ekle' modunu seçin.

Kod, etkinleştirme üzerine sitenizde otomatik olarak yürütülecektir.

Son olarak, sayfanın en üstüne geri kaydırın ve anahtarı ‘Aktif’ konumuna getirin.

Ardından, ayarlarınızı saklamak için 'Kod Parçacığını Kaydet' düğmesine tıklayın

Şimdi, WordPress formu CSS kod parçacığına göre otomatik olarak özelleştirilecek ve görüntüleyebilirsiniz.

Ancak, formu henüz web sitenize eklemediyseniz, blok düzenleyicisinde bir sayfa veya yazı açın.

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

Bundan sonra, bloktaki açılır menüden CSS kod parçacığı kullanarak stil verdiğiniz formu seçin.

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

Artık özelleştirilmiş formu çalışırken görmek için WordPress sitenizi ziyaret edebilirsiniz.

Bonus İpucu 🧑‍💻: Özel Web Sitesi Sayfaları Nasıl Kolayca Oluşturulur

WordPress formlarını stilize etmek, sitenizi daha çekici ve görsel olarak ilginç hale getirmenin yalnızca bir yoludur. Ayrıca SeedProd kullanarak kendi tam özelleştirilmiş web sitesi sayfalarınızı tasarlayabilirsiniz.

Pazardaki en iyi WordPress sayfa oluşturucu eklentisidir. Herhangi bir kod kullanmadan çekici sayfalar oluşturmanıza olanak tanır.

İş ortağı markalarımızın bazıları tüm web sitelerini SeedProd kullanarak oluşturdu. Bu, yalnızca açılış sayfalarının ötesine geçen güçlü, sürükle ve bırak oluşturucudur! Aracı kapsamlı SeedProd incelememizde daha fazla öğrenin.

SeedProd ayrıca hazır şablonlara ve site kitlerine, kolay özelleştirme seçeneklerine, renk paletlerine ve gelişmiş sayfa bloklarına sahiptir. Ayrıca, WPForms formlarınızı SeedProd düzenleyicisine kolayca yerleştirebilirsiniz.

Daha fazla ayrıntı için, WordPress'te açılış sayfası oluşturma hakkındaki eğitimimize bakabilirsiniz.

Umarım bu makale WordPress formlarınızı nasıl özelleştireceğinizi ve stil vereceğinizi öğrenmenize yardımcı olmuştur. Ayrıca WordPress formlarına kupon kodu alanı ekleme ve WPForms, Gravity Forms ve Formidable Forms karşılaştırmamız hakkındaki eğitimlerimize de göz atmak isteyebilirsiniz.

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.