How to Customize the Submit Button

Markdown anzeigen

Möchten Sie die Sende-Schaltfläche anpassen, damit sie besser zum Design oder zur Persönlichkeit Ihrer Website passt? Die Sende-Schaltfläche Ihres Formulars kann eine wichtige Rolle für die Einreichungsraten spielen.

Diese Anleitung behandelt, wie Sie den Text und den Stil der Sende-Schaltfläche Ihres Formulars anpassen können.

Text der Sende-Schaltfläche ändern
Styling der Sende-Schaltfläche
Anpassen von Hover-Stilen
Fokus-Styles anpassen
Beispiel-CSS
Häufig gestellte Fragen

Text der Sende-Schaltfläche ändern

Um den Text „Senden“ der Schaltfläche Ihres Formulars zu ändern, öffnen Sie den Formular-Builder unter Einstellungen » Allgemein. Hier sehen Sie zwei Felder, um den Text in der Sende-Schaltfläche festzulegen:

Text der Sende-Schaltfläche: Der Text, der angezeigt wird, wenn diese Schaltfläche noch nicht angeklickt wurde
Text der Sende-Schaltfläche (Verarbeitung): Der Text, der angezeigt wird, nachdem der Benutzer auf diese Schaltfläche geklickt hat, aber bevor die Bestätigung dem Benutzer angezeigt wird

Sie können den Text der Sende-Schaltfläche nach Ihren Wünschen ändern. Sobald Sie mit den Änderungen zufrieden sind, speichern Sie das Formular.

Styling der Sende-Schaltfläche

CSS bietet unglaubliche Flexibilität, um die Sende-Schaltfläche sowie jeden anderen Aspekt Ihres Formulars anzupassen.

Wenn Sie neu in CSS sind oder eine Auffrischung wünschen, ist unser Einführungsleitfaden zu CSS der beste Ausgangspunkt.

Wenn Sie Ihr Formular lieber ohne Code gestalten möchten, lesen Sie unser Tutorial zum Formular-Styling, um zu lernen, wie Sie Ihr Formular im Block-Editor anpassen können.

Hier ist das Standard-CSS für eine WPForms-Sende-Schaltfläche sowie Kommentare, die erklären, was jede CSS-Zeile bewirkt:

.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
    background-color: #eee; /* Grey background */
    border: 1px solid #ddd; /* Dark grey border */
    color: #333; /* Black text color */
    font-size: 1em; /* Size of text */
    padding: 10px 15px; /* Distance between text and border */
}

Sie können jeden dieser Werte ändern, um die Schaltfläche anders zu gestalten. Als Beispiel beginnen wir damit, unserer Schaltfläche einen gelben Hintergrund zu geben.

Der erste Schritt ist, den Hex-Code für die gewünschte Farbe zu finden – htmlcolorcodes.com oder Adobe Color CC sind nützliche kostenlose Werkzeuge dafür.

Sobald wir den Hex-Code für den gewünschten Gelbton haben, können wir unser CSS erstellen:

.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
    background-color: #FAF243 !important; /* Yellow background */
}

Beim Hinzufügen von CSS zu Ihrer Website kann es notwendig sein, !important vor dem Semikolon einzufügen, um sicherzustellen, dass Ihre benutzerdefinierten Stile erfolgreich angewendet werden. Lesen Sie unsere Anleitung zur Fehlerbehebung bei CSS für weitere Details.

Als Nächstes müssen wir dieses CSS zu unserer Website hinzufügen. Der einfachste Weg, dies zu tun, ist die Verwendung des WordPress CSS-Editors. Um diesen zu öffnen, gehen Sie zu Design » Anpassen und wählen Sie Zusätzliches CSS.

Benutzerdefiniertes CSS zu WordPress hinzufügen

Sobald Sie den Abschnitt Zusätzliches CSS geöffnet haben, fügen Sie Ihr neues CSS ein. Klicken Sie dann auf die Schaltfläche Speichern & Veröffentlichen, und Sie sind fertig!

Unten sehen Sie, wie unsere Schaltfläche jetzt mit diesem CSS aussehen wird:

Ihr neues CSS wird nicht auf Ihrer Website angezeigt? Lesen Sie unser Tutorial zur Fehlerbehebung bei diesem Problem.

Anpassen von Hover-Stilen

CSS ermöglicht es Ihnen, völlig unterschiedliche Stile anzuwenden, wenn ein Cursor über eine Schaltfläche fährt. Diese Stiländerung verbessert die Benutzererfahrung, da sie dem Benutzer anzeigt, dass dieses Objekt anklickbar ist.

Unten sehen Sie das Standard-CSS in WPForms, wenn über eine Schaltfläche gefahren wird. Wie in den Kommentaren vermerkt, wird die Hintergrundfarbe etwas dunkler und die Rahmenfarbe etwas heller:

.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
    background-color: #ddd; /* Darker grey background */
    border: 1px solid #ccc; /* Lighter grey border */
}

Sie werden vielleicht feststellen, dass dies viel weniger CSS ist, als wir für die Schaltfläche gesehen haben, wenn sie nicht mit der Maus darüber fahren. Das liegt daran, dass CSS all das frühere CSS auf Ihre Schaltfläche mit Mauszeiger anwendet, sofern nicht anders angegeben.

Wenn Sie die Standardstile beibehalten, bleibt die Textfarbe beispielsweise schwarz, wenn mit der Maus über die Schaltfläche gefahren wird. Das liegt daran, dass die Textfarbe der Schaltfläche normalerweise schwarz wäre und wir ihr nicht gesagt haben, dass sie sich beim Überfahren ändern soll.

Wie beim vorherigen benutzerdefinierten CSS-Beispiel können Sie jeden dieser Werte ändern, um die Hover-Stile der Schaltfläche anders zu gestalten. In unserem Beispiel geben wir der Schaltfläche einen dunkleren gelben Hintergrund, wenn mit der Maus darüber gefahren wird.

.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
    background-color: #e5da00 !important; /* Darker yellow background */
}

So sieht die Schaltfläche mit angewendetem CSS aus:

Fokus-Styles anpassen

So wie Sie einen Hover-Stil für Ihre Schaltfläche mit CSS festlegen können, können Sie auch einen Fokus-Stil festlegen. Der Fokus-Stil wird angewendet, wenn die Schaltfläche der Mittelpunkt von Seitenereignissen ist. Zum Beispiel, wenn Sie die Tabulatortaste verwenden, um durch die Seite zu navigieren.

Die Verwendung eines Fokus-Stils verbessert die Benutzererfahrung, insbesondere für Benutzer, die auf Tastaturnavigation angewiesen sind, um im Web zu surfen.

Hier ist das Standard-CSS in WPForms, wenn sich eine Schaltfläche im Fokus befindet:

.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
    background-color: #ddd;
    border: 1px solid #ccc;
    cursor: pointer;
}

In diesem Fall ist die Hintergrundfarbe ein etwas dunklerer Farbton als der Standard, und der Rand ist ebenfalls subtil geändert. Dies lässt den Benutzer wissen, dass die Schaltfläche jetzt im Fokus ist und alle relevanten Tastendrücke empfängt.

Für dieses Beispiel verwenden wir eine andere Farbe als Gelb, um den Fokus-Stil vom Hover-Stil zu unterscheiden.

.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
    background-color: #80ccf6 !important;
}

Mit diesem benutzerdefinierten CSS sieht die Schaltfläche im Fokus so aus:

Weitere fortgeschrittene Anpassungsoptionen für Ihre Submit-Schaltfläche mit CSS, einschließlich Vollbild-Stilen, gedrückten Effekten und Animationen beim Überfahren, finden Sie in unserer Entwicklerdokumentation mit einer Vielzahl von Beispielen und Anleitungen.

Beispiel-CSS

Nachdem wir nun die Grundlagen behandelt haben, gehen wir ein vollständiges Beispiel für benutzerdefiniertes CSS für eine Submit-Schaltfläche durch.

Der folgende Code ändert die Submit-Schaltfläche für alle auf Ihrer Website mit WPForms erstellten Formulare. Wenn Sie die Submit-Schaltfläche nur für ein einzelnes Formular gestalten möchten, müssen Sie die eindeutige ID für dieses Formular finden. Weitere Details finden Sie in unserem vollständigen Leitfaden zum Gestalten von Kontaktformularen mit CSS.

Hier ist das CSS, das wir für dieses Beispiel hinzufügen werden, das Stiländerungen sowohl für das Überfahren als auch für den Fokus beinhaltet:

/* New button styles */
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
    padding: 15px !important; /* Increase distance between text and border */
    width: 100% !important; /* Make the button full-width */
    font-size: 1.5em !important; /* Increase text size */
    background-color: #af0000 !important; /* Red background */
    color: #fff !important; /* White text */
    border: 8px double #860b0b !important; /* Dark red, double-line border */
}

/* New button hover styles */
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
    background-color: #860b0b !important; /* Dark red background */
    border: 8px double #af0000 !important; /* Red, double-line border */
}

/* New button focus styles */
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
    background-color: red !important; /* Dark red background */
    border: 8px double #860b0b !important; /* Red, double-line border */
}

Unten sehen Sie, wie unsere Schaltfläche jetzt mit diesem CSS aussehen wird:

Beim Überfahren:

Und im Fokus. Denken Sie daran, die einzigen Änderungen sind die Hintergrund- und Randfarben:

Häufig gestellte Fragen

Dies sind Antworten auf einige Top-Fragen zur Anpassung der Submit-Schaltfläche in WPForms.

Kann ich die Position der Schaltfläche ändern, sodass sie in der Mitte angezeigt wird?

Standardmäßig sind die Submit-Schaltflächen von WPForms linksbündig auf der Seite ausgerichtet. Sie können jedoch benutzerdefiniertes CSS verwenden, um die Schaltfläche mittig auszurichten. Fügen Sie dazu den folgenden Code-Schnipsel zu Ihrer Website hinzu.

div.wpforms-container-full .wpforms-form button[type=submit] {
    margin: 0 auto !important;
    display: block !important;
}

Der obige CSS-Code wendet den Stil auf alle Formulare auf Ihrer Website an. Wenn Sie den Stil auf ein bestimmtes Formular anwenden möchten, müssen Sie den CSS-Selektor #wpforms-submit-FORM-ID verwenden. Hier ist ein Beispiel-Snippet.

#wpforms-submit-FORM-ID {
     margin: 0 auto !important;
     display: block !important;
}

Stellen Sie sicher, dass Sie FORM-ID im obigen Snippet durch die ID des Formulars ersetzen, das Sie gestalten möchten.

So wird der Button im Frontend aussehen.

Wenn Sie möchten, dass der Button in voller Breite angezeigt wird, verwenden Sie die CSS-Eigenschaft width: 100%. Hier ist eine aktualisierte Version des obigen Snippets.

div.wpforms-container-full .wpforms-form button[type=submit] {
     margin: 0 auto !important;
     display: block !important;
     width: 100% !important;
}

Button-Anzeige in voller Breite.

Kann ich den WPForms-Sende-Button im Elementor Builder anpassen?

Ja. WPForms integriert sich mit Elementor, um die Formulargestaltung direkt im Elementor Builder zu ermöglichen. Sie können Ihre Formularfelder, Beschriftungen, Farben und den Sende-Button anpassen.

Um mehr über die Anpassung Ihres Formulars in Elementor zu erfahren, lesen Sie unsere Anleitung zum Hinzufügen von WPForms zu einer Elementor-Seite.

Wie kann ich den Sende-Button meines Formulars ausblenden?

Das Ausblenden des Sende-Buttons ist besonders hilfreich, wenn Sie das Calculations Addon verwenden, um Rechner auf Ihrer Website zu erstellen. Um den Sende-Button Ihres Formulars auszublenden, müssen Sie einen benutzerdefinierten CSS-Snippet zu Ihrer Website hinzufügen. Der Code-Snippet ist in der WPForms Code Snippets-Bibliothek verfügbar.

Details zum Importieren dieses Snippets auf Ihre Website finden Sie in unserer Anleitung zum Ausblenden des Sende-Buttons.

Das ist alles! Sie können Ihren Sende-Button jetzt mit benutzerdefiniertem CSS anpassen.

Möchten Sie weitere Beispiele? Sehen Sie sich unser Tutorial mit noch mehr Sende-Button-CSS an, das Sie direkt auf Ihre Website kopieren und einfügen können.

Anpassen des Senden-Buttons

KI-Zusammenfassung