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

Wie man Contact Form 7 Formulare in WordPress gestaltet

Möchten Sie Ihre Contact Form 7 Formulare anpassen und ihren Stil ändern?

Contact Form 7 ist eines der beliebtesten Kontaktformular-Plugins für WordPress. Der größte Nachteil ist jedoch, dass die Standardformulare, die Sie hinzufügen, sehr schlicht aussehen.

In diesem Artikel zeigen wir Ihnen, wie Sie Kontaktformulare 7 in WordPress gestalten können.

How to style Contact Form 7 in WordPress

Warum sollten Sie Ihre Contact Form 7-Formulare gestalten?

Contact Form 7 ist eines der beliebtesten Kontaktformular-Plugins für WordPress. Es ist kostenlos und ermöglicht das Hinzufügen eines WordPress-Formulars per Shortcode.

Allerdings sind die Funktionen von Contact Form 7 sehr begrenzt. Eines der Probleme mit Contact Form 7 ist, dass die Formulare einfach gestylt sind. Außerdem bietet das Plugin keine integrierten Optionen, um den Stil Ihrer Formulare zu ändern.

Das macht es schwierig, das Design des Kontaktformulars an das Design Ihrer Website anzupassen oder die Schrift- und Hintergrundfarbe zu ändern, um Ihr Formular hervorzuheben.

Wenn Sie mehr anpassbare Formulare mit fortgeschrittenen Funktionen wünschen, empfehlen wir Ihnen WPForms, das einsteigerfreundlichste Plugin für Kontaktformulare. Es verfügt über einen Drag-and-drop-Formularersteller, über 1.800 vorgefertigte Templates und zahlreiche Optionen zur individuellen Anpassung.

Es gibt auch eine kostenlose Version von WPForms, die 60+ Templates, bedingte Logik, Stripe-Zahlungen und mehr enthält. Siehe unseren Vergleich von Contact Form 7 vs WPForms, um mehr zu erfahren.

Werfen wir also einen Blick darauf, wie man ein Contact Form 7-Formular in WordPress gestaltet.

Erste Schritte mit Contact Form 7

Zunächst müssen Sie das Contact Form 7-Plugin auf Ihrer Website installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie in Ihrem WordPress-Dashboard auf Kontakt “ Neu hinzufügen gehen.

Edit Contact Form 7 settings

Sie können nun das Formular für Ihre Website bearbeiten und zunächst einen Titel für Ihr Formular eingeben.

Das Plugin fügt dem Formular automatisch die Standardfelder Name, E-Mail, Betreff und Nachricht hinzu. Sie können jedoch auch weitere Felder hinzufügen, indem Sie sie einfach per Drag & Drop an die gewünschte Stelle ziehen.

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Speichern“ zu klicken und den Shortcode zu kopieren.

Copy the shortcode

Als Nächstes fügen Sie es zu Ihrem Blogbeitrag oder Ihrer Seite hinzu.

Bearbeiten Sie dazu einfach einen Beitrag oder fügen Sie einen neuen Beitrag hinzu. Sobald Sie im WordPress-Editor sind, klicken Sie oben auf das „+“-Zeichen und fügen Sie einen Shortcode-Block hinzu.

Add a shortcode block

Danach geben Sie einfach den Shortcode für Ihr Contact Form 7-Formular in den Shortcode-Block ein. Er wird in etwa so aussehen:

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

Veröffentlichen Sie nun Ihren WordPress-Blogbeitrag, um das Kontaktformular in Aktion zu sehen. Für diesen Artikel haben wir das Standard-Kontaktformular verwendet und es zu einer WordPress-Seite hinzugefügt. So sah das Kontaktformular auf unserer Testseite aus.

Contact form 7 preview

Sind Sie nun bereit, Ihr Contact Form 7-Formular in WordPress anzupassen?

Gestaltung von Contact Form 7-Formularen in WordPress mit benutzerdefiniertem CSS

Da Contact Form 7 nicht über integrierte Stiloptionen verfügt, müssen Sie CSS verwenden, um Ihre Formulare zu gestalten.

Contact Form 7 generiert standardkonformen Code für Formulare. Jedem Element im Formular sind eine eigene ID und eine CSS-Klasse zugeordnet, sodass es sich leicht anpassen lässt, wenn Sie sich mit CSS auskennen.

Jedes Contact Form 7-Formular verwendet die CSS-Klasse .wpcf7, die Sie zur Gestaltung Ihres Formulars verwenden können.

In diesem Beispiel werden wir die benutzerdefinierte Schriftart Lora in unseren Eingabefeldern verwenden und die Hintergrundfarbe des Formulars ändern.

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

Wenn Sie Hilfe beim Hinzufügen der benutzerdefinierten CSS benötigen, lesen Sie bitte unsere Anleitung zum einfachen Hinzufügen benutzerdefinierter CSS zu einer WordPress-Website.

So sieht unser Kontaktformular nach Anwendung dieses CSS aus.

Custom CSS preview

Mehrere Contact Form 7-Formulare stylen

Wenn Sie mehrere Kontaktformulare verwenden und diese unterschiedlich gestalten möchten, müssen Sie die von Contact Form 7 generierte ID für jedes Formular verwenden. Das Problem mit dem oben verwendeten CSS ist, dass es auf alle Contact Form 7-Formulare auf Ihrer Website angewendet wird.

Öffnen Sie zunächst eine Seite mit dem Formular, das Sie ändern möchten. Gehen Sie dann mit der Maus auf das erste Feld des Formulars, klicken Sie mit der rechten Maustaste und wählen Sie die Option„Prüfen„.

Der Bildschirm des Browsers wird geteilt, und Sie sehen den Quellcode der Seite. Im Quellcode müssen Sie die Startzeile des Formularcodes finden.

Inspect form and get form id

Wie Sie im obigen Screenshot sehen können, beginnt der Code unseres Kontaktformulars mit dieser Zeile:

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

Das id-Attribut ist ein eindeutiger Bezeichner, der von Contact Form 7 für dieses spezielle Formular generiert wird. Es ist eine Kombination aus der ID des Formulars und der ID des Beitrags, zu dem das Formular hinzugefügt wurde.

Wir werden diese ID in unserem CSS verwenden, um unser Kontaktformular zu gestalten, und .wpcf7 in unserem ersten CSS-Snippet durch #wpcf7-f113-p114-o1 ersetzen.

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

Sie können diesen Schritt nun für alle Ihre Formulare wiederholen und die Formular-ID für jedes Contact Form 7-Formular, das Sie anpassen möchten, ersetzen.

Gestalten von Contact Form 7 Formularen mit CSS Hero

Eine einfachere Möglichkeit, den Stil von Contact Form 7-Formularen zu ändern, ist die Verwendung von CSS Hero. Damit können Sie Ihre Formulare bearbeiten, ohne dass Sie CSS schreiben müssen.

Installieren und aktivieren Sie einfach das CSS Hero-Plugin auf Ihrer Website. Sie können unserer Anleitung zur Installation eines WordPress-Plugins folgen.

Gehen Sie dann zu der Seite, die Ihr Formular enthält, und klicken Sie in der oberen Symbolleiste auf die Option „Anpassen mit CSS Hero“.

Customize with CSS hero

CSS Hero bietet Ihnen eine einfache Benutzeroberfläche, mit der Sie CSS bearbeiten können, ohne Code schreiben zu müssen.

Mit dem Plugin können Sie auf ein beliebiges Feld, eine Überschrift oder ein anderes Element in Ihrem Formular klicken und Hintergrundfarbe, Schriftart, Rahmen, Abstände und vieles mehr bearbeiten.

CSS hero interface

Nachdem Sie Ihr Formular angepasst haben, klicken Sie einfach auf die Schaltfläche „Speichern und veröffentlichen“ am unteren Rand.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man Contact Form 7 Formulare in WordPress gestaltet. Vielleicht interessieren Sie sich auch für unsere Anleitung zum Erstellen eines E-Mail-Newsletters und unsere Expertenauswahl der besten Plugins für Rechner in WordPress.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

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.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

47 KommentareEine Antwort hinterlassen

  1. Alejandro

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

    • WPBeginner Support

      Glad our guide was helpful :)

      Admin

  2. hmi

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

  3. Tony Tran

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

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

      Admin

  5. zeeshan alam

    Thanks for sharing Sir

    • WPBeginner Support

      You’re welcome :)

      Admin

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

      Admin

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

  8. Muhammad Tahir

    How to change response text color of SPECIFIC contact form

  9. waqas

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

  10. 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!

  11. Abhijeet

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

  12. Naveen

    Thanks for a great post, was very helpful.

  13. 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?

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

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

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

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

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

  19. 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!

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

      Admin

      • 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??

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

  22. puneet singh

    this very helpful realy nice tutorial

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

      Admin

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

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

  26. Bhongo

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

  27. Mark

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

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.