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

Så här stylar du Contact Form 7-formulär i WordPress

Vill du customize dina Contact Form 7-formulär och ändra deras stil?

Contact Form 7 är ett av de mest populära tilläggen för kontaktformulär för WordPress. Den största nackdelen är dock att de out-of-the-box-formulär som du addar ser väldigt enkla ut.

I den här artikeln kommer vi att visa dig hur du formaterar Contact Form 7-formulär i WordPress.

How to style Contact Form 7 in WordPress

Varför Styling dina Contact Form 7-formulär?

Contact Form 7 är ett av de mest populära tilläggen för kontaktformulär för WordPress. Det är gratis att använda och låter dig add to ett WordPress-formulär med hjälp av shortcode.

Contact Form 7 har dock mycket begränsade funktioner. Ett av problemen med Contact Form 7 är att formulären är stylade på ett enkelt sätt. Dessutom erbjuder inte pluginet några inbyggda alternativ för att ändra stilen på dina formulär.

Det gör det svårt att matcha kontaktformulärets design med din websites theme eller om du vill editera fonten och bakgrundsfärgen för att få ditt formulär att sticka ut.

Om du vill ha mer anpassningsbara formulär med avancerade funktioner, rekommenderar vi WPForms, som är det mest nybörjarvänliga pluginet för kontaktformulär. Det kommer med en drag and drop form builder, 1,800+ pre-built form templates, och många alternativ för customize.

Det finns också en gratisversion av WPForms som innehåller 60+ mallar, villkorlig logik, Stripe-betalningar och mycket mer. Se vår jämförelse av Contact Form 7 vs WPForms för att lära dig mer.

Med detta sagt, låt oss ta en titt på hur man utformar ett Contact Form 7-formulär i WordPress.

Kom igång med Contact Form 7

Först måste du installera och aktivera Contact Form 7 plugin på din website. Om du behöver hjälp kan du vänligen läsa vår guide om hur du installerar ett plugin för WordPress.

När du har aktiverat kan du heada till Kontakt ” Add New från din WordPress dashboard.

Edit Contact Form 7 settings

You can now edit the form for your website and start by entering a title for your form.

Pluginet lägger automatiskt till formulärets standardfält för namn, email, ämne och message. Du kan dock också add to fler fält genom att helt enkelt dra and drop dem där du vill.

När du är klar, glöm inte att klicka på knappen ”Save” och kopiera shortcoden.

Copy the shortcode

Nästa sak att göra är att add to det till ditt blogginlägg eller din page.

För att göra det, redigera helt enkelt ett post eller lägg till ett nytt. När du är i WordPress Editor, gå vidare och klicka på ”+” -tecknet högst upp och lägg sedan till ett Shortcode block.

Add a shortcode block

Efter det, enter bara shortcoden för ditt Contact Form 7-formulär i shortcode-blocket. Det kommer att se ut ungefär så här:

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

Nu kan du gå vidare och publicera ditt blogginlägg i WordPress för att se kontaktformuläret i action. I den här artikeln har vi använt standardkontaktformuläret och lagt till det på en page i WordPress. Så här såg kontaktformuläret ut på vår testsite.

Contact form 7 preview

Är du nu redo att customize ditt Contact Form 7-formulär i WordPress?

Styling av Contact Form 7-formulär i WordPress med hjälp av customize CSS

Eftersom Contact Form 7 inte har några built-in alternativ för stil, måste du använda CSS för att utforma dina formulär.

Contact Form 7 genererar standardkompatibel kod för formulär. Varje element i formuläret har ett korrekt ID:n och en CSS-klass associerad med det, vilket gör det enkelt att customize om du kan CSS.

Varje Contact Form 7-formulär använder CSS-klassen .wpcf7 som du kan använda för att utforma ditt formulär.

I det här exemplet kommer vi att använda det customizade fonten som heter Lora i våra input fields och ändra bakgrundsfärgen i formuläret.

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

Om du behöver hjälp med att lägga till den anpassade CSS:en, vänligen se vår guide om hur du enkelt lägger till anpassad CSS på en WordPress site.

Så här såg vårt kontaktformulär ut efter att ha tillämpat denna CSS.

Custom CSS preview

Styling av flera Contact Form 7-formulär

Om du använder flera Contact Form och vill utforma dem på olika sätt måste du använda ID:n som genereras av Contact Form 7 för varje formulär. Problemet med den CSS vi använde ovan är att den kommer att tillämpas på alla Contact Form 7-formulär på din website.

Börja med att öppna en page som innehåller formuläret som du vill ändra. Därefter för du muspekaren till det första fältet i formuläret, högerklickar och väljer alternativet ”Inspektera”.

Vyn i webbläsaren delas upp och du ser sidans källkod. I källkoden måste du leta reda på startraden för formulärkoden.

Inspect form and get form id

Som du kan se i screenshot ovan börjar vår kontaktformulärskod med raden:

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

Attributet id är ett unikt ID som genereras av Contact Form 7 för det här vissa formuläret. Det är en kombination av formulärets ID:n och postens ID:n där formuläret är add to.

Vi kommer att använda detta ID:n i vår CSS för att utforma vårt Contact Form och ersätta .wpcf7 i vårt första CSS-snippet med #wpcf7-f113-p114-o1.

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

Du kan nu upprepa steget för alla dina formulär och ersätta formulär-ID:n för varje Contact Form 7-formulär som du vill customize.

Styling Contact Form 7 formulär med CSS Hero

Ett enklare sätt för dig att ändra stilen på Contact Form 7-formulär är att använda CSS Hero. Det låter dig edit dina formulär utan att du behöver skriva CSS.

Du installerar och aktiverar bara CSS Hero plugin på din website. Du kan följa vår guide om hur du installerar ett plugin för WordPress.

Gå sedan till sidan som innehåller ditt formulär och klicka på alternativet ”Customize with CSS Hero” i toolbaren högst upp.

Customize with CSS hero

CSS Hero ger dig ett enkelt användargränssnitt för att editera CSS utan att skriva någon kod.

Med hjälp av pluginet kan du clicka på valfritt fält, heading och andra element i ditt formulär och edit bakgrundsfärg, font, kantlinjer, avstånd och mycket mer.

CSS hero interface

När du har customize ditt formulär klickar du bara på knappen ”Save & Publicera” längst ner.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du stylar Contact Form 7-formulär i WordPress. Du kanske också vill se vår guide om hur man skapar ett nyhetsbrev via email och våra expertval av de bästa tillägg för kalkylatorer för WordPress.

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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

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.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

48 kommentarerLämna ett svar

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

    Thanks!
    Your instructions were very useful.
    Thanks for taking the time to share them!

    • WPBeginner Support

      Glad our guide was helpful :)

      Administratör

  3. hmi

    Hi sir, where can I find the css code of fields ?
    Thank you

  4. Tony Tran

    i can’t change color background css button submit….please help

  5. Deshave

    Submit button in pdf no longer works since uploading form to WordPress website.

    • WPBeginner Support

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

      Administratör

  6. zeeshan alam

    Thanks for sharing Sir

    • WPBeginner Support

      You’re welcome :)

      Administratör

  7. Steve

    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

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

      Administratör

  8. FRED_VERSATILE

    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…

  9. Muhammad Tahir

    How to change response text color of SPECIFIC contact form

  10. waqas

    Can we add a time field in contact form 7 without plugin?

  11. Mary Lou Hoffman

    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

      You can target the lable area like this-

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

      • Rita Accarpio

        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!

  12. Abhijeet

    I want to reduce gap between name and email boxes…how to do it.

  13. Naveen

    Thanks for a great post, was very helpful.

  14. Josh

    This helped heaps. Thanks!

  15. Joel Desrosiers

    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?

  16. Merriann Fu

    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

      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.

  17. Miguel Ceballos

    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.

  18. Osama Ali Khan

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

  19. Deborah

    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.

  20. Mikko

    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.

  21. Wendy

    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!

  22. pranav shinde

    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

    • WPBeginner Support

      You should not edit the core plugin files. Instead you should add your CSS to your theme’s stylesheet.

      Administratör

      • pranav shinde

        ya i understood then can you please help me how can i do it..please help me in detail

        • pranav shinde

          thanks a lot sir very much helpfull will suscribe your channel

        • pranav shinde

          means i hould copy this code in my themes css file righht??

  23. Monique

    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.

  24. puneet singh

    this very helpful realy nice tutorial

  25. Jiniya

    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

    • WPBeginner Support

      Sound like a good idea. Meanwhile, you can access WPBeginner using Feedly app on your mobile device.

      Administratör

  26. Anee

    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.

  27. Neil Murray

    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

      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.

  28. Bhongo

    Fantastic article. I will use this to style one my website.

  29. Mark

    Another good article where you do not end up using yet another plug in.

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.