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’te Contact Form 7 Formları Nasıl Stilize Edilir?

Editoryal Not: WPBeginner üzerindeki ortak bağlantılardan komisyon kazanıyoruz. Komisyonlar, editörlerimizin görüşlerini veya değerlendirmelerini etkilemez. Editoryal Süreç hakkında daha fazla bilgi edinin.

Contact Form 7 formlarınızı özelleştirmek ve stillerini değiştirmek mi istiyorsunuz?

Contact Form 7, WordPress için en popüler iletişim formu eklentilerinden biridir. Bununla birlikte, en büyük dezavantajı, eklediğiniz kutudan çıkan formların çok sade görünmesidir.

Bu makalede, WordPress’te iletişim formu 7 formlarını nasıl şekillendireceğinizi göstereceğiz.

How to style Contact Form 7 in WordPress

Contact Form 7 Formlarınızı Neden Stilize Etmelisiniz?

Contact Form 7, WordPress için en popüler iletişim formu eklentilerinden biridir. Kullanımı ücretsizdir ve kısa kod kullanarak bir WordPress formu eklemenizi sağlar.

Ancak Contact Form 7’nin özellikleri çok sınırlıdır. Contact Form 7 ile ilgili sorunlardan biri de formların sade bir şekilde tasarlanmış olmasıdır. Ayrıca, eklenti formlarınızın stilini değiştirmek için herhangi bir yerleşik seçenek sunmuyor.

Bu, iletişim formunun tasarımını web sitenizin temasıyla eşleştirmenizi veya formunuzu öne çıkarmak için yazı tipini ve arka plan rengini düzenlemek istemenizi zorlaştırır.

Gelişmiş özelliklere sahip daha özelleştirilebilir formlar istiyorsanız, en yeni başlayan dostu iletişim formu eklentisi olan WPForms‘u öneririz. Sürükle ve bırak form oluşturucu, 1.800’den fazla önceden oluşturulmuş form şablonu ve çok sayıda özelleştirme seçeneği ile birlikte gelir.

WPForms ‘un 60’tan fazla şablon, koşullu mantık, Stripe ödemeleri ve daha fazlasını içeren ücretsiz bir sürümü de vardır.

Bununla birlikte, WordPress’te bir Contact Form 7 formunun nasıl şekillendirileceğine bir göz atalım.

İletişim Formu 7 ile Başlarken

Öncelikle, web sitenize Contact Form 7 eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Yardıma ihtiyacınız varsa, lütfen bir WordPress eklentisinin nasıl kurulacağına ilişkin kılavuzumuza bakın.

Etkinleştirmenin ardından, WordPress panonuzdan İletişim ” Yeni Ekle bölümüne gidebilirsiniz.

Edit Contact Form 7 settings

Artık web siteniz için formu düzenleyebilir ve formunuz için bir başlık girerek başlayabilirsiniz.

Eklenti, formun varsayılan ad, e-posta, konu ve mesaj alanlarını otomatik olarak ekleyecektir. Ancak, istediğiniz yere sürükleyip bırakarak daha fazla alan da ekleyebilirsiniz.

İşiniz bittiğinde, ‘Kaydet’ düğmesine tıklamayı ve kısa kodu kopyalamayı unutmayın.

Copy the shortcode

Yapılacak bir sonraki şey, bunu blog yazınıza veya sayfanıza eklemektir.

Bunu yapmak için bir yazıyı düzenlemeniz veya yeni bir yazı eklemeniz yeterlidir. WordPress editörüne girdikten sonra, devam edin ve üstteki ‘+’ işaretine tıklayın ve ardından bir Kısa Kod bloğu ekleyin.

Add a shortcode block

Bundan sonra, Contact Form 7 formunuz için kısa kodu kısa kod bloğuna girmeniz yeterlidir. Şuna benzer bir şey görünecektir:

[contact-form-7 id="117" title="Contact Form"]

Şimdi, iletişim formunu çalışırken görmek için devam edin ve WordPress blog gönderinizi yayınlayın. Bu makale için varsayılan iletişim formunu kullandık ve bir WordPress sayfasına ekledik. Test sitemizde iletişim formu bu şekilde görünüyordu.

Contact form 7 preview

Şimdi, WordPress’te Contact Form 7 formunuzu özelleştirmeye hazır mısınız?

Özel CSS Kullanarak WordPress’te Contact Form 7 Formlarını Şekillendirme

Contact Form 7 yerleşik stil seçeneklerine sahip olmadığından, formlarınızı stilize etmek için CSS kullanmanız gerekir.

Contact Form 7 formlar için standart uyumlu kod üretir. Formdaki her öğenin uygun bir kimliği ve onunla ilişkilendirilmiş CSS sınıfı vardır, bu da CSS biliyorsanız özelleştirmeyi kolaylaştırır.

Her Contact Form 7 formu, formunuzu şekillendirmek için kullanabileceğiniz .wpcf7 CSS sınıfını kullanır.

Bu örnekte, giriş alanlarımızda Lora adlı özel yazı tipini kullanacağız ve formun arka plan rengini değiştireceğiz.

div.wpcf7 { 
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, sans-serif; 
font-style:italic;    
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] { 
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

Özel CSS’yi eklemek için yardıma ihtiyacınız varsa, lütfen bir WordPress sitesine özel CSS’nin nasıl kolayca ekleneceğine ilişkin kılavuzumuza bakın.

Bu CSS uygulandıktan sonra iletişim formumuz bu şekilde göründü.

Custom CSS preview

Birden Fazla Contact Form 7 Formunu Şekillendirme

Birden fazla iletişim formu kullanıyorsanız ve bunları farklı şekilde biçimlendirmek istiyorsanız, her form için contact form 7 tarafından oluşturulan kimliği kullanmanız gerekecektir. Yukarıda kullandığımız CSS ile ilgili sorun, web sitenizdeki tüm Contact Form 7 formlarına uygulanacak olmasıdır.

Başlamak için, değiştirmek istediğiniz formu içeren bir sayfa açmanız yeterlidir. Ardından, farenizi formdaki ilk alana götürün, sağ tıklayın ve‘İncele‘ seçeneğini seçin.

Tarayıcı ekranı bölünecek ve sayfanın kaynak kodunu göreceksiniz. Kaynak kodunda, form kodunun başlangıç satırını bulmanız gerekir.

Inspect form and get form id

Yukarıdaki ekran görüntüsünde de görebileceğiniz gibi iletişim formu kodumuz şu satırla başlıyor:

<div role="form" class="wpcf7" id="wpcf7-f113-p114-o1" lang="en-US" dir="ltr">

id özelliği, Contact Form 7 tarafından bu özel form için oluşturulan benzersiz bir tanımlayıcıdır. Form kimliği ve bu formun eklendiği gönderi kimliğinin bir kombinasyonudur.

İletişim formumuzu şekillendirmek için CSS’mizde bu kimliği kullanacağız ve ilk CSS parçacığımızdaki .wpcf7’yi #wpcf7-f113-p114-o1 ile değiştireceğiz.

div#wpcf7-f113-p114-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f113-p114-o1 input[type="text"],
#wpcf7-f113-p114-o1 input[type="email"],
#wpcf7-f113-p114-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;
}
#wpcf7-f113-p114-o1 input[type="submit"],
#wpcf7-f113-p114-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

Şimdi bu adımı tüm formlarınız için tekrarlayabilir ve özelleştirmek istediğiniz her Contact Form 7 formu için form kimliğini değiştirebilirsiniz.

CSS Hero ile Contact Form 7 Formlarını Şekillendirme

Contact Form 7 formlarının stilini değiştirmenin daha kolay bir yolu CSS Hero kullanmaktır. CSS yazmanıza gerek kalmadan formlarınızı düzenlemenizi sağlar.

CSS Hero eklentisini web sitenize yüklemeniz ve etkinleştirmeniz yeterlidir. Bir WordPress eklentisinin nasıl kurulacağına ilişkin rehberimizi takip edebilirsiniz.

Ardından, formunuzu içeren sayfaya gidin ve üstteki araç çubuğunda yer alan ‘CSS Hero ile Özelleştir’ seçeneğine tıklayın.

Customize with CSS hero

CSS Hero, herhangi bir kod yazmadan CSS’yi düzenlemeniz için size kolay bir kullanıcı arayüzü sağlayacaktır.

Eklentiyi kullanarak formunuzdaki herhangi bir alana, başlığa ve diğer öğelere tıklayabilir ve arka plan rengini, yazı tipini, kenarlıkları, boşlukları ve çok daha fazlasını düzenleyebilirsiniz.

CSS hero interface

Formunuzu özelleştirdikten sonra, en alttaki ‘Kaydet ve Yayınla’ düğmesine tıklamanız yeterlidir.

Umarız bu makale WordPress’te Contact Form 7 formlarını nasıl şekillendireceğinizi öğrenmenize yardımcı olmuştur. Ayrıca e-posta bülteni oluşturma kılavuzumuza ve WordPress için en iyi hesap makinesi eklentileri uzman seçimlerimize de 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

48 yorumBir Cevap Bırakın

  1. Syed Balkhi says

    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!

    • WPBeginner Support says

      The pdf embed we’re recommending is for viewing content. For filling out forms we recommend using a form plugin

      Yönetici

  2. Steve says

    Hello is it possible to ad a message if i dont filled out one ore more “Required fields” to get a Message ? Because i Only get the “red arrows” on the “Required fields” that I don’t filled out. In I want additionally a error Message like

    “One or more Required fields have an error. Please check and try again.”
    But i Only have the red arrows, and the Problem is on mobile Phones the red arrows are not in the window and the Client don’t see it.

    • WPBeginner Support says

      You would need to reach out to contact form 7’s support for what they currently have available.

      Yönetici

  3. FRED_VERSATILE says

    Hello,
    Thank you for this tutorial.
    I would like to add a custom image at the right of the “send” label, in the button.
    I’ve done it with a :before for the other buttons on my website, but i can’t find the element in the send form to put the CSS…

  4. Mary Lou Hoffman says

    I’m a novice, but determined to figure this out! So, please – give me baby steps if you answer.

    I have a contact7 form on my website. The font is showing up as white on a white background for the labels (Your name, Your email, etc).
    How do I change the color – where do I go to tell it to change color?
    I tried copying and pasting some of the codes ya’all had in your answers above, but they just showed up on my page, but didn’t change the font.

    • Karu Price says

      You can target the lable area like this-

      .wpcf7 form p label {
      color: white;
      background: black;
      font-family: sans-serif;
      }

      • Rita Accarpio says

        Hi there!

        I’m here struggling with modal headings. I changed the form background to a darker color but now I want to change the heading’s color. Doesn’t seem to change at all with all the different options I tried so far.

        Do you know anyway to do this? Help me please!

        Thanks!

  5. Joel Desrosiers says

    My contact form has a dark image background so I need “your name”, “your email” and “your message” to be white. I can’t find a class or id for those elements, I tried with inspect element but I can’t find anything that works. This is the only contact form on this site. I’m using css on the stylesheet of my childtheme and I tried different options but can’t change the color. Can anyone help me?

  6. Merriann Fu says

    I’m pretty new to WordPress and Plugins in general but have this Plugin installed and everything is working correctly but instead of seeing the person’s message, it just shows [your-message] in the body of the email. I have everything set up like above and spelled correctly so i’m not sure what the problem is. Any help would be much appreciated! Thanks!

    • Don Walley says

      I have the same problem. I’m only new to forms on WP but I’m stuck too. I’m trying to build a Registration page with business name, address, etc along with personal contact information and a drop down to make their choice and of course a comment field. After testing this numerous times I get the same as you; the content of the comment field.

      Wish there had been an example or two on the Docs page of Contact 7; something besides only the default Contact Form.

  7. Miguel Ceballos says

    I don’t think Contact Form 7 is the most popular. It comes pre-installed with many themes and wordpress instalations, that’s the reason they have so many users. It is so frustrating to edit anything in this plugin.

  8. Osama Ali Khan says

    Hello if some one want contact form with transparent background or want to add contact form 7 on the big banner image with transparent background then add this code to your custom css.

    .wpcf7 input[type=”text”],
    .wpcf7 input[type=”email”],
    .wpcf7 textarea
    {
    background-color: Transparent;
    color: BLUE;
    width: 100%;

    }

    div.wpcf7 {
    color: white;
    margin: 0;
    padding: 0;
    }

  9. Deborah says

    You are an absolute life saver. I’ve been battling with this for hours.
    One point I’d make that others might find it useful to know, is that I was trying to style the submit button, which was on a contact form 7 I’d put on my sidebar.

    This worked for the first page it was on but then wouldn’t on subsequent pages. However, I then noticed that the f2 code on the second page had a suffix of ‘o2’, and when I added this to my css, the styling on this page worked too.

    Thank you again.

  10. Mikko says

    Thanks for a great post, was very helpful. One thing still bothering me and it’s that i haven’t found a way to customize checkboxes. Have you found a way how it would be possible to change checkbox size for example so that it would work on every browser?

    Seems like the input structure isn’t modified so no extra spans could be added to fake the checkboxes an i right?

    Glad if you have time to help me out, cheers.

  11. Wendy says

    Oh my gosh! You have no idea how grateful I am for this post! THANK YOU!

    I simply wanted to change the font used in the Submit button. I searched and searched for hours and tried various CSS code variations and nothing worked until I came across your code and then added a font element to it. Problem solved!

  12. pranav shinde says

    contact-form-7/includes/css/styles.css (inactive) this appears above my css edit file,,by which none of changes are applied to website help me how to make it active

  13. Monique says

    Hello,

    I am wondering if any one can help me fix the contact form for mobile. I am able to see the form but it is too wide and gets cut off.

    Thank you.

  14. Jiniya says

    I find your website very helpful.just a suggestion it would be great if u could launch an app for your website soon…apps are more convenient than following emails

  15. Anee says

    Top most features in WordPress you can own style easily no need deeply knowledge for manage your site in WordPress. In Contact 7 form, you can your own structure that you have already design in HTML or other one.

  16. Neil Murray says

    If working with CSS is a little beyond your current skill levels you might also consider using https://wordpress.org/plugins/contact-form-7-skins/ .

    Contact Form 7 Skins which works right within the normal Contact Form 7 interface, making it easier for regular WordPress users to create professional looking Contact Form 7 forms using a range of compatible Templates and Styles – even if you don’t have HTML and CSS skills.

    • Andrew Wilkerson says

      Thanks Neil, I think that’s just what I needed. I got excited and installed it then wiped out my existing form, so I had to restore a backup of my site to get it working again, I’ll look into it more when I have time, I guess i’ll have to copy my current form into it or start from scratch with a new one. Off to watch some tutorials. Hopefully this is still the best one to use. I know it’s an old post here but it does say it was recently updated on the plugin page.

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.