Die Standardstile von Contact Form 7 sind das Erste, was Ihnen nach der Installation des Plugins auffällt. Schmale Eingabefelder, ein schlichter Absende-Button und Fehlermeldungen ohne jeglichen gestalterischen Anspruch. Nachdem man ein Dutzend Websites eingerichtet hat, verliert man den Überblick, wie oft man style.css manuell bearbeitet hat, und es ist immer dieselbe Routine.

Eine vorbereitete Formular-Exportdatei löst dieses Problem. Sie importieren ein fertiges Formular mit vorkonfigurierten Stilen: Felder, Button, Validierung und reCAPTCHA sehen direkt nach der Aktivierung ansprechend aus. Es bleibt nur noch, die E-Mail-Adressen und den Logo-Pfad für Ihr spezifisches Projekt zu ersetzen.

Nachfolgend finden Sie eine vollständige Aufschlüsselung der CSS-Regeln, die wir in unseren Projekten verwenden, sowie eine Exportdatei für einen schnellen Start. Die Stile wurden mit Contact Form 7 Version 6.x getestet und sind auf dem Stand von 2026.

💡 Kurzüberblick:

• Laden Sie die Formular-Exportdatei herunter und importieren Sie sie mit der Standardmethode in WordPress
• Ersetzen Sie die E-Mail-Adressen in der E-Mail-Vorlage und den Logo-Pfad
• Kopieren Sie die CSS-Stile in die style.css Ihres Themes oder in das zusätzliche CSS
• Passen Sie Farben und Schriftarten bei Bedarf an das Branding Ihres Projekts an

1. Exportdatei: Import und Ersteinrichtung

Die Exportdatei enthält ein fertiges Kontaktformular mit den Feldern: Name, E-Mail, Telefon, Textbereich und Google reCAPTCHA. Das Formular ist in vier Sprachversionen angelegt: Russisch, Ukrainisch, Englisch und Deutsch.

Der Import erfolgt über das standardmäßige WordPress-Werkzeug: Werkzeuge → Import → Contact Form 7 → Importer ausführen. Wählen Sie die heruntergeladene XML-Datei aus, und die Formulare erscheinen im Bereich „Formulare".

Wechseln Sie direkt nach dem Import in die E-Mail-Vorlage jedes Formulars unter dem Tab E-Mail. Ersetzen Sie drei Dinge:

• Das Feld „An": Tragen Sie Ihre tatsächliche E-Mail-Adresse ein;
• Das Feld „Von": Die Adresse muss auf der Domain der Website liegen (zum Beispiel [email protected]), andernfalls landen E-Mails im Spam;
• Den Logo-Pfad: Suchen Sie das Tag <img src="/Logo-150x150.png"> im E-Mail-Text und ersetzen Sie es durch die vollständige URL des Logos Ihrer Website.

Ohne die Ersetzung der E-Mail-Adressen wird das Formular keine E-Mails versenden. Dies ist ein häufiger Grund, warum CF7 nach dem Import „nicht funktioniert".

2. CSS-Stile: Vollständige Aufschlüsselung

Nachfolgend finden Sie den Stilsatz, den wir bei jedem neuen Projekt anwenden. Kopieren Sie ihn in die style.css des aktiven Themes oder in Zusätzliches CSS (Design → Customizer → Zusätzliches CSS). Die zweite Option ist vorzuziehen: Die Stile gehen bei Theme-Updates nicht verloren.

2.1. Antwortmeldungen und Validierung

1
/* Form response — top margin */
2
div.wpcf7-response-output {
3
    margin-top: -30px;
4
}
5
 
6
/* Validation hint — centering and spacing */
7
span.wpcf7-not-valid-tip {
8
    margin-top: -14px;
9
    margin-bottom: -10px;
10
    text-align: center;
11
    color: #a01414;
12
    font-size: 1em;
13
    display: block;
14
    font-weight: 700;
15
}

.wpcf7-response-output ist der Block, der nach dem Absenden erscheint (Erfolg oder Fehler). Standardmäßig stört er den Fluss; der negative margin-top zieht ihn näher an das Formular heran. .wpcf7-not-valid-tip ist der rote Hinweis unter einem nicht ausgefüllten Feld; hier ist der Text zentriert und fett für bessere Sichtbarkeit.

2.2. Eingabefelder und Textbereiche

1
/* Unified font for all form elements */
2
input.wpcf7-form-control,
3
textarea#TextareaJA,
4
input.wpcf7-form-control.wpcf7-submit {
5
    font-family: "Open Sans", sans-serif;
6
    font-size: 15px;
7
    line-height: 30px;
8
    font-weight: 700;
9
}
10
 
11
/* Text area height */
12
textarea {
13
    height: 150px !important;
14
}
15
 
16
/* Border highlight on focus */
17
form.wpcf7-form input:focus,
18
form.wpcf7-form textarea:focus,
19
form.wpcf7-form input[type="text"]:focus {
20
    border-color: #709242;
21
}

Der Selektor input.wpcf7-form-control zielt auf alle CF7-Textfelder ab. textarea#TextareaJA ist eine benutzerdefinierte Kennung aus unserem Formular; falls Ihr Formular eine andere ID hat, ersetzen Sie sie durch die korrekte. Die Fokus-Rahmenfarbe #709242 ist ein Olivgrün, das ruhig und augenfreundlich wirkt.

2.3. Absende-Button

1
/* Submit button — main style */
2
input.wpcf7-form-control.wpcf7-submit {
3
    color: #ffffff;
4
    background: #5a8f2b;
5
    font-weight: 600;
6
    border: 2px dashed #ffffff;
7
    margin-top: -25px;
8
    font-family: FuturaDemiC, sans-serif;
9
    padding: 10px 30px;
10
    border-radius: 0;
11
    transition: all .3s ease 0s;
12
}
13
 
14
/* Hover — color inversion */
15
input.wpcf7-form-control.wpcf7-submit:hover {
16
    background: #ffffff;
17
    color: #5a8f2b;
18
    border: 2px dashed #5a8f2b;
19
}

Der Button hat einen grünen Hintergrund #5a8f2b mit einem weißen gestrichelten Rahmen. Beim Darüberfahren mit der Maus kehren sich die Farben um: weißer Hintergrund, grüner Text und Rahmen. Falls Grün nicht in Ihrer Markenpalette enthalten ist, ersetzen Sie #5a8f2b in beiden Regeln (Standard und Hover) durch Ihre Akzentfarbe.

2.4. Preloader und Ladeindikator

1
/* Centering the ajax loader */
2
span.ajax-loader {
3
    margin-left: auto !important;
4
    margin-right: auto !important;
5
    float: inherit !important;
6
    width: 15px !important;
7
    display: block !important;
8
    margin-top: 10px !important;
9
    margin-bottom: -15px !important;
10
}

Der sich drehende CF7-Absendeindikator haftet standardmäßig am Rand. Hier wird er mittels margin-left/right: auto und display: block zwangsweise zentriert. Die !important-Deklarationen sind notwendig, da das Plugin selbst Inline-Stile auf den Loader anwendet.

2.5. Google reCAPTCHA-Ausrichtung

1
/* Centering the reCAPTCHA block */
2
.wpcf7-form-control-wrap {
3
    width: 100%;
4
}
5
 
6
.wpcf7-form-control.g-recaptcha.wpcf7-recaptcha {
7
    margin-top: -28px;
8
    margin-left: auto;
9
    margin-right: auto;
10
    width: 300px;
11
}

Der reCAPTCHA-Block ist standardmäßig linksbündig. Mit margin-left/right: auto und einer festen Breite von 300px zentrieren Sie ihn innerhalb des Formulars.

2.6. Mobile Darstellung

1
@media screen and (max-width: 768px) {
2
    span.wpcf7-not-valid-tip {
3
        margin-bottom: 15px;
4
    }
5
 
6
    input.wpcf7-form-control.wpcf7-text {
7
        max-height: 30px;
8
    }
9
}

Auf Bildschirmen unter 768px erhält der Validierungshinweis einen zusätzlichen unteren Abstand, damit er nicht mit dem nächsten Feld kollidiert. Textfelder werden in der Höhe begrenzt, was ein übermäßiges Strecken auf mobilen Geräten verhindert.

2.7. Ausblenden von Service-Elementen

1
/* Hide list markers in error messages */
2
.screen-reader-response ul {
3
    display: none;
4
}
5
 
6
/* Hide the green success message */
7
.wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok {
8
    display: none !important;
9
}
10
 
11
/* Hide the duplicate validation error message */
12
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
13
    display: none !important;
14
}
15
 
16
/* Text color for screen-reader block on dark backgrounds */
17
.screen-reader-response {
18
    color: white;
19
    margin-bottom: 10px;
20
}

CF7 dupliziert Validierungsfehler standardmäßig: sowohl im Tooltip als auch im allgemeinen Block unter dem Formular. Wir blenden den allgemeinen Block (.wpcf7-validation-errors) und die Erfolgsmeldung (.wpcf7-mail-sent-ok) aus, da die .wpcf7-not-valid-tip-Hinweise ausreichen. Die Styles für .screen-reader-response sind relevant, wenn das Formular auf einem dunklen Hintergrund platziert wird.

2.8. Zentrieren von Platzhaltern

1
/* Centering placeholder in textarea field for different browsers */
2
textarea#TextareaJA::-webkit-input-placeholder {
3
    text-align: center;
4
}
5
 
6
textarea#TextareaJA:-moz-placeholder {
7
    text-align: center;
8
}
9
 
10
textarea#TextareaJA::-moz-placeholder {
11
    text-align: center;
12
}
13
 
14
textarea#TextareaJA:-ms-input-placeholder {
15
    text-align: center;
16
}

Der Platzhaltertext im Feld wird nur zentriert, solange das Feld leer ist. Sobald der Nutzer zu tippen beginnt, folgt der Text der normalen Ausrichtung. #TextareaJA ist die Kennung aus unserem Formular; ersetzen Sie sie durch die korrekte für Ihr Formular.

2.9. Bonus: Styles für dunkle Hintergründe

1
/* Error styles for forms on dark background */
2
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
3
    color: aliceblue;
4
    font-weight: 800;
5
}
6
 
7
span.wpcf7-not-valid-tip {
8
    font-weight: 900;
9
    background-color: antiquewhite;
10
}

Wenn das Formular in einem Block mit dunkler Füllung platziert wird, müssen Fehlermeldungen lesbar bleiben. Der Fehlertext wird weiß (aliceblue), und der Tooltip erhält einen hellen Hintergrund.

2.10. Weitere Verbesserungen

1
/* Bottom error message margin */
2
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
3
    margin-top: -60px;
4
}
5
 
6
/* Centering text fields */
7
span.wpcf7-form-control-wrap input#Email,
8
span.wpcf7-form-control-wrap input#PhoneJA,
9
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
10
    text-align: center;
11
}
12
 
13
/* reCAPTCHA in popups — additional spacing */
14
div#recapcha-popups .wpcf7-form-control-wrap {
15
    padding-top: 25px;
16
    margin-left: -11px;
17
    padding-bottom: 38px;
18
}

Textfelder für E-Mail und Telefon werden zentriert, was aufgeräumter wirkt, wenn das Formular aus 3-4 Feldern besteht. Der Block div#recapcha-popups ist ein spezifischer Selektor für Fälle, in denen das Formular in ein Popup-Fenster eingebettet ist.

3. Konfiguration der E-Mail-Vorlage

Prüfen Sie nach dem Import von Formularen unbedingt den Tab E-Mail in jedem Formular-Editor. CF7 nutzt diese Einstellungen für den Versand von E-Mail-Benachrichtigungen:

• An: die Adresse, an die Einsendungen eingehen. Standardmäßig enthält sie einen Platzhalter aus dem Export; ersetzen Sie ihn durch Ihren;
• Von: der E-Mail-Header. Die Absenderadresse muss auf der Domain der Website liegen, andernfalls landen E-Mails im Spam oder werden gar nicht zugestellt;
• Betreff: Sie können den Standard beibehalten oder den Namen der Website ergänzen;
• Nachrichtentext: eine HTML-Vorlage mit dem Logo. Ersetzen Sie src="/Logo-150x150.png" durch die vollständige URL Ihres Logos.

Wenn Sie weitere Tags für die Vorlage benötigen, finden Sie die vollständige Liste in der offiziellen Dokumentation unter contactform7.com.

4. Optimierung des CF7-Skript-Ladens

Standardmäßig lädt Contact Form 7 CSS und JavaScript auf jeder Seite der Website, auch dort, wo kein Formular vorhanden ist. Das sind unnötige Anfragen, die die Ladezeit verlangsamen.

Ab Version 5.9 hat der Entwickler eine native Option zur Steuerung des Ladens hinzugefügt: In der wp-config.php können Sie die Konstanten WPCF7_LOAD_JS und WPCF7_LOAD_CSS auf false setzen, und Skripte werden nur auf Seiten mit einem Formular geladen. Weitere Details in der CF7-Dokumentation.

Für eine feinere Steuerung (nur bestimmte Seiten) nutzen Sie einen Snippet in der functions.php:

1
add_action('wp_enqueue_scripts', 'cf7_dequeue_scripts', 99);
2
function cf7_dequeue_scripts() {
3
    if (!is_page(array('contact', 'order'))) {
4
        wp_dequeue_script('contact-form-7');
5
        wp_dequeue_style('contact-form-7');
6
    }
7
}

Dieser Snippet entfernt CF7-Skripte von allen Seiten außer den im is_page()-Array angegebenen. Ersetzen Sie 'contact' und 'order' durch die Slugs Ihrer Seiten, die Formulare enthalten.

⁉️🤔 Häufig gestellte Fragen

Formulare versenden nach dem Import nichts. Was kann ich tun?

Prüfen Sie zunächst den Reiter „Mail": die Felder „An" und „Von". Die Exportdatei enthält dort Platzhalter. „An" muss eine tatsächliche E-Mail-Adresse enthalten und „Von" muss eine Adresse der Domain der Website sein. Stimmt die Domain nicht überein, weist der Mailserver des Empfängers die E-Mail als Spam zurück.

Wo platziert man CSS-Stile besser: im style.css des Themes oder im Zusätzlichen CSS?

Zusätzliches CSS ist vorzuziehen. Bei einem Theme-Update wird style.css überschrieben, das Zusätzliche CSS hingegen nicht. Der Nachteil: Stile im Zusätzlichen CSS werden inline im <head> geladen und nicht als externe Datei, aber bei 100-150 Zeilen CSS ist der Geschwindigkeitsunterschied vernachlässigbar.

Wie ändere ich die Button-Farben passend zur Marke des Kunden?

Suchen Sie in den Stilen die beiden Regeln für input.wpcf7-form-control.wpcf7-submit (Standard und Hover). Ersetzen Sie #5a8f2b durch die Akzentfarbe der Marke in der background-Eigenschaft der Hauptregel sowie in den Eigenschaften color und border der Hover-Regel. Mehr muss nicht geändert werden.

Warum verschiebt sich reCAPTCHA auf mobilen Geräten nach links?

Der .g-recaptcha-Block in unseren Stilen hat eine feste Standardbreite. Auf sehr schmalen Bildschirmen passt er möglicherweise nicht. Fügen Sie der Media Query eine Regel mit transform: scale() und transform-origin: left hinzu, dann skaliert reCAPTCHA proportional und passt auf jeden Bildschirm.

Stile werden nicht angewendet. Woran liegt das?

Drei häufige Ursachen: (1) Browser-Cache (öffnen Sie die Website im Inkognito-Modus); (2) Cache eines Performance-Plugins (WP Rocket, LiteSpeed), der geleert werden muss; (3) Ladereihenfolge, da CF7 sein CSS zuletzt lädt. Fügen Sie der betroffenen Regel !important hinzu oder erhöhen Sie die Selektorspezifität durch eine übergeordnete Klasse.

Wie überprüfe ich, ob das Formular nach der Konfiguration tatsächlich funktioniert?

Senden Sie eine Test-E-Mail über das Formular auf der Website selbst. Kommt die E-Mail nicht an, prüfen Sie Ihren Spam-Ordner. Ist sie auch dort nicht, richten Sie ein SMTP-Plugin ein (zum Beispiel FluentSMTP oder Post SMTP). Ohne SMTP versendet WordPress über wp_mail(), und viele Hoster blockieren solche E-Mails.

CF7 stylen: schnell, einmalig und für alle Projekte

Eine vorbereitete Exportdatei und ein ausgefeilter Stilsatz sparen bei jedem neuen Projekt 15 bis 30 Minuten. Statt margin-top: -14px mühsam durch Ausprobieren zu ermitteln, erhalten Sie ein Formular mit bereits arrangierten Feldern, Button und Validierung. Es bleibt nur noch, die E-Mail und das Logo einzufügen.

Passt die grüne Palette #5a8f2b nicht zum Design, ersetzen Sie die Akzentfarbe durch Ihre eigene. Ist das Formular in ein Popup eingebettet, fügen Sie einen Selektor mit der ID des Popups hinzu, wie in Abschnitt 2.10 gezeigt. Ist die Website mehrsprachig, nutzen Sie die Sprachduplikate aus dem Export (RU/UK/EN/DE).

Bei Projekten ohne Designer deckt dieser Stilsatz den Großteil der Anforderungen an ein ansehnliches Kontaktformular ab. Bei Projekten mit Designer dient er als Grundlage für eine feinere Anpassung.

Speichern Sie die Stile als Snippet, und Ihr nächstes CF7-Setup dauert exakt zwei Minuten.