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

Sade, kaba bir WordPress formu, en iyi tasarlanmış web sitesini bile bitmemiş hissettirebilir ve tamamen uyumsuz görünebilir.

En kötüsü? Ziyaretçiler, sitenizin 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?

WordPress formlarınızı özelleştirmek, markanızla eşleşmelerine yardımcı olur, bu da güven oluşturur ve form dönüşüm oranlarınızı önemli ölçüde artırabilir. Formlarınızı stilize ederek, onları daha görsel olarak çekici ve ziyaretçilerinizin gezinmesi daha kolay hale getirirsiniz.

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

Formlarınızı özelleştirmek, onları WordPress temanız ve markanızla eşleştirerek daha çekici hale getirebilir.

Bu, daha fazla dönüşüm sağlayabilir çünkü stil verilmiş WordPress formları gezinmesi daha kolaydır ve daha fazla kullanıcının bunları doldurmasını teşvik edebilir.

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

Şimdi, 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öntem ele alacağız ve kullanmak istediğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

Başlayalım!

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

WPForms, sürükle-bırak oluşturucuya sahip en iyi WordPress iletişim formu eklentisidir. Kodsuz form stilendirmesi için 2.000'den fazla hazır tema ve yerleşik özelleştirme seçenekleri ile form oluşturma için yapay zeka araçları sunar.

WPBeginner'da iletişim formları, web sitesi geçişleri ve yıllık anketimiz için WPForms kullanıyoruz. Deneyimimiz hakkında daha fazla bilgi edinmek için eksiksiz WPForms incelememize bakın.

Adım 1. WPForms Eklentisini Yükleyin ve Etkinleştirin

İlk olarak, bir WPForms hesabına kaydolalım.

Web sitelerinde, ‘Şimdi WPForms Al’ düğmesine tıklayın, bir plan seçin ve kaydı tamamlamak için ekrandaki talimatları izleyin.

Şimdi WPForms eklentisini yüklemeniz ve etkinleştirmeniz gerekiyor.

WordPress yönetici alanınızda, Eklentiler » Eklenti Ekle bölümüne gidin.

Sonraki ekranda, WPForms eklentisini hızlıca bulmak için arama çubuğunu kullanabilirsiniz.

WordPress sitenizde etkinleştirmek için ‘Şimdi Yükle’ ve ardından ‘Etkinleştir’e tıklayın.

Ayrıntılı talimatlar için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Pro sürümünü kullanıyorsanız, etkinleştirme üzerine lisans anahtarınızı girmek için WordPress yönetici kenar çubuğundaki WPForms » Ayarlar sayfasına gidin.

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

Ardından, yönetici kontrol panelinizdeki WPForms » Ayarlar bölümüne gidin ve ‘Modern İşaretlemeyi Kullan’ onay kutusunun işaretli olduğundan emin olun.

WordPress blok düzenleyicisindeki gelişmiş tasarım ayarlarını ve özelleştirme seçeneklerini etkinleştirmek için Modern İşaretlemeyi etkinleştirmeniz gerekir.

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

Adım 2. WordPress Formunuzu Oluşturun

Buradan, formunuzu oluşturmak için WordPress yönetici kontrol panelinden WPForms » Yeni Ekle ekranına gidelim.

Bu sizi, formunuz için bir isim yazarak başlayabileceğiniz 'Kurulum' sayfasına götürecektir.

Bundan sonra, istediğiniz herhangi bir form şablonunu seçebilir, üzerine gelip altındaki 'Şablonu Kullan' düğmesine tıklayabilirsiniz. Bu eğitim için, basit bir iletişim formu oluşturup web sitemize 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 nasıl oluşturulur konusundaki eğitimimize bakın.

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

Adım 3. WPForms Temaları ile Form Tasarımınızı Özelleştirin

Artık formunuzu blok düzenleyiciye eklemeye ve özelleştirmeye hazırsınız. Form oluşturucudaki 'Göm' düğmesine tıklayalım.

Bu, aşağıdaki seçeneklerden birini seçebileceğiniz gömme sihirbazını açacaktır:

• Mevcut bir sayfa seçin – WordPress sitenizdeki bir sayfayı seçin ve formu WPForms bloğunu kullanarak ekleyin.
• Yeni bir sayfa oluşturun – Bu, formu otomatik olarak yeni bir sayfaya ekler.

Bu kılavuz için 'Yeni Sayfa Oluştur' seçeneğini seçeceğiz.

Ardından, yeni sayfa için bir ad ekleyelim, örneğin, 'Bize Ulaşın'.

İşiniz bittiğinde 'Hadi Başlayalım!' düğmesine tıklayın.

Bu, formunuzun zaten gömülü olduğu sayfa düzenleyicisini açacaktır.

Ayrıntılar için, formları WordPress'e yerleştirme kılavuzumuza bakın.

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, 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, 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.

Şimdi, stil verilmiş 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.

Adım 1. Formunuzu WPForms Kullanarak Oluşturun

Başlamak için WPForms kullanarak bir form oluşturmanız gerekecek. Bu, iletişim formları, dosya yükleme formları, kayıt formları ve RSVP formları oluşturmanıza yardımcı olmak için 2.000'den fazla şablon sunan, sürükle-bırak oluşturucuya sahip en iyi WordPress iletişim formu eklentisidir.

Ayrıntılı talimatlar için, WordPress'te iletişim formu oluşturma eğitimimize bakın veya 1. yöntemi inceleyin.

Bunu yaptıktan sonra, form kimliğinizi alalım – özel kod parçacığınız için ona ihtiyacınız olacak.

Bunu yapmak için WordPress kontrol panelindeki WPForms » Tüm Formlar sayfasını ziyaret edin ve stil vermek istediğiniz formun WPForms Kimlik numarasını kopyalayın.

Adım 2. WPCode'u Yükleyin ve Etkinleştirin

WPCode, özel CSS ekleyerek formları biçimlendirmek için en güvenli ve en kolay WordPress kod parçacığı eklentisidir. Hataları önlemek için akıllı kod doğrulama özelliğine sahiptir ve WordPress özelleştirmesi için hazır kod parçacığı kütüphanesi sunar.

İşletme web sitelerimizde özel kod parçacıklarını eklemek ve yönetmek için WPBeginner'da WPCode kullanıyoruz. Deneyimlerimiz hakkında daha fazla bilgi edinmek için eksiksiz WPCode incelememize bakın.

İlk olarak, bir WPCode hesabı oluşturabilirsiniz. WPCode web sitesinde ‘Şimdi WPCode Al’ düğmesine tıklayın, bir plan seçin ve kaydolmak için ekrandaki talimatları izleyin.

Şimdi, WPCode eklentisini kuralım ve etkinleştirelim.

WordPress yönetici kontrol panelinizde, Eklentiler » Eklenti Ekle bölümüne gidin.

Ardından, WPCode eklentisini hızlıca bulmak için arama kutusunu kullanabilirsiniz.

Gördüğünüzde, ‘Şimdi Kur’ düğmesine ve ardından ‘Etkinleştir’e tıklayın.

Ayrıntılı talimatlar için, bir WordPress eklentisinin nasıl kurulacağına dair başlangıç kılavuzumuza bakın.

Adım 3. WordPress Formlarını Özelleştirmek İçin Özel Kod Parçacığı Ekleyin

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

Ardından, ‘Özel Kodunuzu Ekleyin (Yeni Parçacık)’ seçeneğinin üzerine gelin ve ‘Parçacığı Kullan’ düğmesine tıklayın.

Ardından sizden Kod Türünüzü seçmenizi isteyen bir açılır pencere göreceksiniz.

‘CSS Parçacığı’nı seçelim.

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. !important etiketleri, tarayıcıya bu stilleri temanızın varsayılan ayarlarından daha öncelikli hale getirmesini söyler:

#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;
}

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

Ardından, markanızın özel rengine uyacak şekilde #ADD8E6 gibi onaltılık kodu değiştirebilirsiniz. Bu kodları ücretsiz çevrimiçi bir renk seçici araç kullanarak bulabilirsiniz.

Ayrıca istediğiniz bir yazı tipi ailesi ekleyebilir ve kod parçasını değiştirerek formun dolgusunu (kutunun içindeki boşluk) ve kenar yuvarlaklığını (yuvarlak köşeler) 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, sayfayı veya gönderiyi blok düzenleyicide 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 Gizli veya Özel pencerede ziyaret edebilirsiniz, çünkü tarayıcı önbelleği bazen son değişiklikleri gizleyebilir.

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

Sitenizi daha çekici ve görsel olarak ilginç hale getirmek için WordPress formlarınızı biçimlendirebilirsiniz. Ayrıca SeedProd kullanarak tamamen özelleştirilmiş web sitesi sayfalarınızı tasarlamanız da mümkündür. Kodlama olmadan web sitesi sayfaları ve temaları oluşturmak için en iyi sürükle ve bırak WordPress sayfa oluşturucu eklentisidir.

Diğer çözümlerle nasıl karşılaştırıldığını görmek için SeedProd'u kapsamlı bir şekilde test ettik. Deneyimlerimiz hakkında daha fazla bilgi edinmek için eksiksiz SeedProd incelememize bakın.

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

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

WordPress Formlarını Özelleştirme ve Stilize Etme Hakkında SSS

Hala sorularınız mı var? Okuyucularımızdan en sık aldığımız sorulardan bazıları burada yanıtlanıyor.

Bir WordPress formunda neleri özelleştirebilirim?

Sitenizin tasarımına uyacak şekilde alanları, düzeni, renkleri, yazı tiplerini, etiketleri, hata mesajlarını ve gönder düğmesini özelleştirebilirsiniz.

WordPress formlarını stilize etmek için kodlama becerilerine ihtiyacım var mı?

Hayır. WPForms gibi harika eklentilerle, kod gerektirmeden yerleşik ayarları kullanarak formları özelleştirebilir ve biçimlendirebilirsiniz.

Formlarımın web sitemin markasıyla eşleşmesini sağlayabilir miyim?

Evet. Formun WordPress temanızla doğal bir şekilde uyum sağlaması için marka renklerinizi, yazı tiplerinizi ve aralığınızı kullanabilirsiniz.

Bir formu özelleştirmek ve stilize etmek, çalışma şeklini etkiler mi?

Görsel değişiklikler işlevselliği etkilemez. Gerekli alanları veya kuralları değiştirirseniz formu test ettiğinizden emin olun.

Form stilini daha sonra değiştirebilir miyim?

Kesinlikle. Formu sıfırdan yeniden oluşturmadan tasarımı istediğiniz zaman güncelleyebilirsiniz.

WordPress'te Form Kullanımına İlişkin Daha Fazla Kılavuz

Umarım bu makale, WordPress formlarınızı nasıl özelleştireceğinizi ve stilize edeceğinizi öğrenmenize yardımcı olmuştur.

Ayrıca şu konulardaki eğitimlerimize de bakmak isteyebilirsiniz:

• WordPress Formlarından Google Drive'a Dosya Yükleme
• Kullanıcıların WordPress Formlarında Canlı Fotoğraf ve Video Çekmelerine Nasıl İzin Verilir
• WordPress Formlarınızı Daha Etkileşimli Hale Getirme İpuçları
• WordPress Formlarını n8n ile Otomatikleştirerek Manuel İş Yükünü Saatlerce Azaltma
• En İyi Google Forms Alternatifleri (Daha İyi Özellikler + Ücretsiz)

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.