How to Change the Submit Button Color with WPForms

Markdown anzeigen

Möchten Sie die Farbe des Absende-Buttons Ihres Formulars an das Branding Ihrer Website anpassen? Während WPForms 1.8.1+ die integrierte Farbanpassung über den Block-Editor bietet, können Sie dies auch mit benutzerdefiniertem CSS für eine präzisere Steuerung erreichen.

Diese Anleitung zeigt Ihnen, wie Sie die Farbe Ihres Absende-Buttons mit CSS ändern.

Standard-Styling für die Sende-Schaltfläche wird angewendet

Mit der Veröffentlichung von WPForms 1.8.1 können Sie jetzt ganz einfach die Farbe des Absende-Buttons ändern, ohne CSS zu verwenden, indem Sie das Formular einfach mit einem Block-Editor zu Ihrer Seite hinzufügen. Mit dieser Formular-Styling-Funktion können Sie Ihre Formulare gestalten, ohne CSS zu schreiben. Um mehr darüber zu erfahren, lesen Sie bitte diese hilfreiche Dokumentation.

Sie können jedoch auch benutzerdefiniertes CSS verwenden, um dies zu erreichen, und für dieses Tutorial werden wir diese Methode verwenden, um die Farbe des Absende-Buttons zu ändern.

Einrichtung des Formulars

Öffnen Sie zunächst den Formular-Builder, indem Sie ein neues Formular erstellen oder ein vorhandenes bearbeiten. Fügen Sie Ihre gewünschten Formularfelder nach Bedarf hinzu.

Für Unterstützung bei der Erstellung eines Formulars lesen Sie bitte unsere vollständige Anleitung zum Erstellen Ihres ersten Formulars.

Hinzufügen des CSS-Codes

Der folgende CSS-Schnipsel ändert die Farbe Ihres Absende-Buttons:

Wenn Sie Hilfe benötigen, wie und wo Sie CSS zu Ihrer Website hinzufügen können, lesen Sie unser Tutorial zum Hinzufügen von benutzerdefinierten CSS-Stilen.

Das obige CSS ändert den Hintergrund des Absende-Buttons zu Blau (#066AAB) mit weißem Text auf allen WPForms Absende-Buttons auf Ihrer Website.

Die Farben in diesem CSS werden mit Hex-Codes definiert, über die Sie mehr in dieser Dokumentation erfahren können.

So haben wir die Farbe der Sende-Schaltfläche geändert

Hinweis: Für zusätzliche Stiländerungen am Absende-Button, wie z. B. Hover-Effekte, lesen Sie bitte unser Tutorial zur Gestaltung von Absende-Buttons.

Anpassen des Codes

Um andere Farben zu verwenden, ersetzen Sie die Hex-Codes im Code:

Ersetzen Sie in Zeile 7 #066AAB durch die gewünschte Button-Farbe.

Ersetzen Sie in Zeile 8 #066AAB durch dieselbe Farbe, um den Rand anzupassen.

Ersetzen Sie in Zeile 14 #04446E durch die gewünschte Hover-Farbe (typischerweise ein dunklerer Farbton Ihrer Button-Farbe).

Um beispielsweise einen roten Button zu erstellen, könnten Sie verwenden:

background-color: #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, leeren Sie zuerst den Cache Ihres Browsers. Wenn es immer noch nicht funktioniert, überschreibt Ihr Theme möglicherweise die Stile. Versuchen Sie, !important zu Ihren CSS-Regeln hinzuzufügen, wie in unserem Beispiel gezeigt. Für weitere Hilfe siehe unseren Leitfaden zur Fehlerbehebung bei CSS.

F: Funktioniert dies auch für die Schaltflächen „Weiter“ und „Zurück“?

A: Wenn Sie ein Seitenumbruch-Feld in Ihrem Formular verwenden und Weiter- und Zurück-Schaltflächen zur Navigation verwenden, verwenden wir etwas CSS, das all diese Schaltflächen mit exakt demselben Styling versieht. Kopieren Sie einfach dieses CSS 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 nur eines meiner Formulare ansprechen?

A: Wenn Sie nur ein Formular ändern möchten, wählen Sie einfach die Formular-ID in Ihrem CSS aus. In diesem Beispiel zielen wir auf die Formular-ID 999 für die Schaltfläche Senden sowie für die Schaltflächen Weiter und Zurück aus dem Feld Seitenumbruch.

Sie müssen die 999 aktualisieren, damit sie mit Ihrer eigenen Formular-ID übereinstimmt.

Wenn Sie nicht sicher sind, wo Sie Ihre Formular-ID finden, lesen Sie unseren Leitfaden zum Auffinden von Feld- und Formular-IDs.

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 ist alles! Sie haben jetzt die Farbe Ihrer Sende-Schaltfläche geändert. Möchten Sie als Nächstes CSS verwenden, um die Senden-Schaltfläche auf andere Weise anzupassen? Sehen Sie sich unser Tutorial CSS zur Personalisierung der Sende-Schaltfläche verwenden an.

So ändern Sie die Farbe des Sende-Buttons

KI-Zusammenfassung