Styling der Bestätigungsnachrichtenbox

Möchten Sie, dass die Bestätigungsnachricht Ihres Formulars dem Erscheinungsbild Ihrer Marke entspricht? Standardmäßig zeigt WPForms erfolgreiche Übermittlungen in einem grünen Feld an, aber Sie können diese Formatierung einfach ändern oder sie mit etwas einfachem CSS-Code vollständig entfernen.

Diese Anleitung zeigt Ihnen, wie Sie die Formatierung Ihrer Bestätigungsnachricht anpassen, um ein kohärenteres Formularerlebnis zu schaffen.

Standardformatierung verstehen

WPForms umschließt erfolgreiche Formularübermittlungsnachrichten automatisch in einem grünen Feld mit spezifischem Abstand und Rändern. Während dies für viele Websites gut funktioniert, möchten Sie vielleicht:

• Die Formatierung für ein saubereres Erscheinungsbild vollständig entfernen
• Die Farben ändern, um sie an Ihre Marke anzupassen
• Bestimmte Elemente wie Abstände oder Ränder ändern
• Benutzerdefinierte Formatierung nur auf bestimmte Formulare anwenden

Die Bestätigungsnachricht anpassen

Lassen Sie uns verschiedene Möglichkeiten untersuchen, die Formatierung Ihrer Bestätigungsnachricht zu ändern. Wenn Sie Hilfe beim Hinzufügen von benutzerdefiniertem CSS zu Ihrer Website benötigen, lesen Sie bitte unsere Anleitung zum Hinzufügen von benutzerdefiniertem Code zu WordPress.

Hintergrundformatierung für alle Formulare entfernen

Um die standardmäßige grüne Formatierung von allen Bestätigungsnachrichten von Formularen vollständig zu entfernen, fügen Sie dieses CSS hinzu:

.wpforms-confirmation-container-full {
    color: inherit !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

Mit dem oben gezeigten CSS werden die Hintergrundfarbe und der Rand der Bestätigungsnachricht entfernt.

Anpassung für bestimmte Formulare

Um die Bestätigungsnachricht eines einzelnen Formulars zu ändern, verwenden Sie dieses CSS (ersetzen Sie 1000 durch die ID Ihres Formulars):

div#wpforms-confirmation-1000 {
    color: inherit !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

Wenn Sie Hilfe beim Finden der ID Ihres Formulars benötigen, lesen Sie bitte unser Tutorial So finden Sie Formular-IDs.

Hintergrundfarben ändern

Um die Hintergrundfarbe der Bestätigungsnachricht für alle Formulare zu ändern:

div.wpforms-confirmation-container-full {
    background: #333333 !important;
    color: #ffffff !important;
    border: none !important;
}

Dieses Beispiel erstellt einen dunklen Hintergrund mit weißer Schrift. Passen Sie die Farbcodes (#333333 und #ffffff) an Ihre gewünschten Farben an.

Und jetzt haben Sie die Formatierung der Bestätigungsnachricht erfolgreich angepasst! Möchten Sie als Nächstes lernen, wie Sie andere Formularelemente anpassen können? Sehen Sie sich unsere Anleitung zu benutzerdefinierten Smart Tags erstellen an, um dynamische Inhalte zu Ihren Formularen hinzuzufügen.