Möchten Sie die Bestätigungsnachricht Ihres Formulars an das Erscheinungsbild Ihrer Marke anpassen? Standardmäßig zeigt WPForms erfolgreiche Eingaben in einer grünen Box an, aber Sie können dieses Styling leicht ändern oder es mit einfachem CSS-Code komplett entfernen.
In diesem Leitfaden erfahren Sie, wie Sie die Gestaltung Ihrer Bestätigungsnachricht anpassen können, um ein kohärenteres Formular zu erhalten.
Verstehen der Standardstilisierung
WPForms wickelt automatisch erfolgreiche Formularübermittlung Nachrichten in einem grünen Kasten mit bestimmten Polsterung und Grenzen. Während dies für viele Websites gut funktioniert, möchten Sie vielleicht:
- Entfernen Sie das Styling vollständig für ein saubereres Aussehen
- Ändern Sie die Farben entsprechend Ihrer Marke
- Bestimmte Elemente wie Füllungen oder Ränder ändern
- Benutzerdefiniertes Styling nur auf bestimmte Formulare anwenden
Anpassen der Bestätigungsnachricht
Sehen wir uns verschiedene Möglichkeiten an, wie Sie das Styling Ihrer Bestätigungsnachricht ändern können. 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.
Entfernen des Hintergrundstylings für alle Formulare
Um das standardmäßige grüne Styling aus allen Formularbestätigungsmeldungen 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 Rahmen aus der Bestätigungsmeldung entfernt.
Customizing für bestimmte Formulare
Um die Bestätigungsmeldung eines einzelnen Formulars zu ändern, verwenden Sie dieses CSS (ersetzen Sie 1000 mit der 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 bei der Suche nach der ID Ihres Formulars benötigen, sehen Sie sich bitte unser Tutorial zur Suche nach Formular-IDs an.
Ändern der Hintergrundfarben
So ändern Sie die Hintergrundfarbe der Bestätigungsmeldung für alle Formulare:
div.wpforms-confirmation-container-full {
background: #333333 !important;
color: #ffffff !important;
border: none !important;
}
In diesem Beispiel wird ein dunkler Hintergrund mit weißem Text erstellt. Passen Sie die Farbcodes (#333333 und #ffffff) an die von Ihnen gewünschten Farben an.
Jetzt haben Sie das Styling der Bestätigungsnachricht erfolgreich angepasst! Möchten Sie als Nächstes erfahren, wie Sie andere Formularelemente anpassen können? Schauen Sie sich unseren Leitfaden zur Erstellung benutzerdefinierter Smart Tags an, um dynamische Inhalte zu Ihren Formularen hinzuzufügen.