Möchten Sie die Farbe der Submit-Schaltfläche Ihres Formulars an das Branding Ihrer Website anpassen? Während WPForms 1.8.1+ integrierte Farbanpassung durch den Block-Editor bietet, können Sie dies auch mit benutzerdefinierten CSS für eine genauere Kontrolle erreichen.
In dieser Anleitung erfahren Sie, wie Sie die Farbe Ihres Submit-Buttons mit CSS ändern können.
Mit der Veröffentlichung von WPForms 1.8.1 können Sie jetzt einfach die Farbe des Submit-Buttons ändern, ohne CSS zu verwenden, indem Sie das Formular mit einem Block-Editor zu Ihrer Seite hinzufügen. Mit dieser Funktion zur Gestaltung von Formularen können Sie Ihre Formulare gestalten, ohne ein CSS zu schreiben. Um mehr darüber zu erfahren, lesen Sie bitte diese hilfreiche Dokumentation.
Sie können jedoch auch benutzerdefinierte CSS verwenden, um dies zu erreichen, und in diesem Tutorial werden wir diese Methode verwenden, um das Styling der Farbe der Schaltfläche " Senden" zu ändern.
Einrichten des Formulars
Öffnen Sie zunächst den Formularersteller, indem Sie ein neues Formular erstellen oder Ihr bestehendes bearbeiten. Fügen Sie die gewünschten Formularfelder nach Bedarf hinzu.
Hinzufügen des CSS-Codes
Mit dem folgenden CSS-Snippet können Sie die Farbe der Schaltfläche "Senden" ändern:
Die oben genannten CSS wird die Submit-Button Farbe Hintergrund zu blau(# 066AAB) mit weißem Text auf allen WPForms Submit-Buttons auf Ihrer Website zu ändern.
Anpassen des Codes
Um andere Farben zu verwenden, ersetzen Sie die Hex-Codes im Code:
Auf Zeile 7ersetzen #066AAB mit der von Ihnen gewünschten Tastenfarbe.
Auf Zeile 8ersetzen # in der gleichen Farbe wie der Rand.066AAB
Auf Zeile 14ersetzen #04446E mit der gewünschten Schwebefarbe (in der Regel ein dunklerer Farbton der Schaltflächenfarbe).
Um zum Beispiel einen roten Knopf zu erstellen, könnten Sie Folgendes verwenden:
Hintergrund-Farbe: #ff0000 !important;
border-color: #ff0000 !important;
Häufig gestellte Fragen
F: Warum funktioniert dieses CSS bei mir nicht?
A: Wenn Sie Ihre Änderungen nicht sehen, löschen Sie zunächst den Cache Ihres Browsers. Wenn das immer noch nicht funktioniert, überschreibt Ihr Thema möglicherweise die Stile. Versuchen Sie, Folgendes hinzuzufügen !important zu Ihren CSS-Regeln hinzufügen, wie in unserem Beispiel gezeigt. Weitere Hilfe finden Sie in unserem CSS-Leitfaden zur Fehlerbehebung.
F: Funktioniert dies auch für die Schaltflächen "Weiter" und "Zurück"?
A: Wenn Sie ein Seitenumbruch-Feld in Ihrem Formular verwenden und die Schaltflächen "Weiter" und " Zurück" für die Navigation nutzen, verwenden wir ein CSS, das alle diese Schaltflächen mit genau demselben Styling versieht. Kopieren Sie dieses CSS einfach auf Ihre Website.
.wpforms-form button[type=submit], button.wpforms-page-button {
background-color: #024488 !important;
border-color: #024488 !important;
color: #fff !important;
transition: background 0.3s ease-in-out;
}
.wpforms-form button[type=submit]:hover, button.wpforms-page-button:hover {
background-color: #022B57 !important;
}
F: Kann ich auch nur eines meiner Formulare verwenden?
A: Wenn Sie nur ein einziges Formular ändern wollten, würden Sie einfach die Formular-ID in Ihrem CSS festlegen. In diesem Beispiel werden wir die Formular-ID 999 für die Schaltfläche " Submit" sowie die Schaltflächen " Next" und " Previous" aus dem Feld " Page Break" verwenden.
Sie müssen die 999 aktualisieren, damit sie mit Ihrer eigenen Formular-ID übereinstimmt.
button#wpforms-submit-999, form#wpforms-form-999 button.wpforms-page-button {
background-color: #024488;
border-color: #024488;
color: #fff;
transition: background 0.3s ease-in-out;
}
button#wpforms-submit-999:hover, form#wpforms-form-999 button.wpforms-page-button:hover {
background-color: #022B57;
}
Und das war's! Sie haben nun die Farbe der Schaltfläche "Senden" geändert. Möchten Sie nun CSS verwenden, um die Schaltfläche " Senden" auf andere Weise anzupassen? Schauen Sie sich unser Tutorial über die Verwendung von CSS an, um den Submit-Button zu personalisieren.