KI-Zusammenfassung
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 Stil der Schaltfläche zum Absenden Ihres Formulars sowohl im Formular-Generator als auch mit Ihrem eigenen CSS anpassen können.
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 Schaltfläche zum Absenden im Formular-Generator
Der schnellste Weg, Ihre Schaltfläche zum Absenden neu zu gestalten, ist im Formular-Generator, wo Sie Ihre Änderungen sehen können, während Sie sie vornehmen. Kein CSS erforderlich.
Öffnen Sie den Formular-Generator und gehen Sie zu Einstellungen » Themes.
Suchen Sie dann im linken Bereich nach der Sektion Schaltflächenstile.
- Größe: Legt fest, wie groß Ihre Schaltfläche ist. Optionen sind Klein, Mittel und Groß.
- Rand: Umrandet Ihre Schaltfläche mit einem durchgezogenen, gestrichelten oder gepunkteten Rand.
- Randgröße: Legt fest, wie dick der Rand ist. Die Standardeinheit ist Pixel (px), aber Sie können eine andere Einheit wählen.
- Radius des Randes: Rundet die Ecken Ihrer Schaltfläche für ein weicheres oder schärferes Aussehen ab. Pixel (px) ist auch hier die Standardeinheit.
Darunter finden Sie drei Farboptionen für Ihre Schaltfläche. Um eine Farbe zu ändern, klicken Sie auf die Farbprobe, um den Farbwähler zu öffnen. Sie können entweder visuell eine Farbe auswählen oder einen Hex-Code für präzise Kontrolle eingeben.
- Hintergrund: Legt die Farbe hinter dem Text Ihrer Schaltfläche fest.
- Rand: Legt die Farbe des Randes Ihrer Schaltfläche fest. Dies gilt nur, wenn Sie oben einen Randstil gewählt haben.
- Text: Legt die Farbe des Textes Ihrer Schaltfläche fest.
Sie können auch ein fertiges Farbthema aus der Einstellung Themes auswählen, das Ihre Schaltfläche zusammen mit dem Rest Ihres Formulars aktualisiert. Weitere Informationen finden Sie in unserem Tutorial zur Verwendung von Formular-Themes.
Wenn Sie mit Ihren Änderungen zufrieden sind, klicken Sie auf Speichern und verwenden Sie dann die Schaltfläche Vorschau, um Ihr Formular mit den angewendeten Stilen anzuzeigen.
Der Formular-Generator deckt die Änderungen ab, die die meisten Websites benötigen. Für feinere Kontrolle, wie z. B. genaue Abstände, Ausrichtung der Schaltfläche, Schaltflächen in voller Breite oder eine bestimmte Schriftart, benötigen Sie eine kleine Menge CSS. Das gehen wir als Nächstes durch.
Styling der Schaltfläche zum Absenden mit CSS
CSS gibt Ihnen die vollständige Kontrolle über die Schaltfläche zum Absenden sowie über jeden anderen Aspekt Ihres Formulars. Es ist das richtige Werkzeug, wenn Sie etwas benötigen, das der Formular-Generator noch nicht bietet.
Wenn Sie neu in CSS sind oder eine Auffrischung wünschen, ist unser Einführungsleitfaden zu CSS der beste Ausgangspunkt.
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 und Adobe Color CC sind praktische 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 */
color:#000 !important;
}
Als Nächstes müssen Sie dieses CSS zu Ihrer Website hinzufügen. WordPress speichert das Feld Zusätzliches CSS an einem von zwei Orten, abhängig von der Art des von Ihnen verwendeten Themes:
- Klassische Themes: Gehen Sie zu Design » Anpassen und wählen Sie Zusätzliches CSS.
- Block-Themes: WordPress blendet den Customizer aus, wenn ein Block-Theme aktiv ist. Sie fügen Ihr CSS daher stattdessen im Website-Editor hinzu. Gehen Sie zu Design » Editor und öffnen Sie Stile, um die Option Zusätzliches CSS zu finden.
Hier ist der Bereich Zusätzliches CSS im Customizer, den Sie bei einem klassischen Theme sehen werden.
Und hier ist er im Website-Editor, den Sie bei einem Block-Theme sehen werden.
Sobald Sie den Abschnitt Zusätzliches CSS geöffnet haben, fügen Sie Ihr neues CSS ein und speichern Sie Ihre Änderungen.
Unten sehen Sie, wie unsere Schaltfläche jetzt mit diesem CSS aussehen wird:
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:
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.
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 Größe und den Abstand der Submit-Schaltfläche ändern?
Teilweise. Im Formular-Builder gehen Sie zu Einstellungen » Themes » Schaltflächenstile und verwenden Sie die Einstellung Größe, um zwischen Klein, Mittel und Groß zu wechseln. Das reicht für die meisten Websites aus und funktioniert auch in WPForms Lite.
Wenn Sie eine exakte Textgröße oder spezifische Abstandsangaben benötigen, müssen Sie einen CSS-Snippet hinzufügen. Hier ist ein Beispiel.
div.wpforms-container-full .wpforms-form button[type=submit] {
font-size: 18px !important; /* Text size */
padding: 14px 40px !important; /* Space inside the button */
}
Kann ich die Position der Schaltfläche ändern, sodass sie in der Mitte angezeigt wird?
Die Ausrichtung der Schaltfläche ist im Formular-Builder noch nicht verfügbar, daher benötigen Sie dafür einen kleinen CSS-Snippet. Standardmäßig sind die Submit-Schaltflächen von WPForms linksbündig ausgerichtet. Um die Schaltfläche zu zentrieren, fügen Sie den folgenden Code-Snippet 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;
}
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.
Kann ich die Submit-Schaltfläche in Divi gestalten?
Ja, obwohl Sie sie im WPForms-Formular-Builder gestalten, anstatt innerhalb von Divi. Das WPForms-Modul enthält keine Steuerelemente für die Formulargestaltung, daher decken seine Einstellungen nur die eigenen Optionen von Divi ab, wie z. B. Größe und Abstände.
Legen Sie Ihre Schaltflächenstile unter Einstellungen » Themes im Formular-Builder fest, und sie werden auf Ihr Formular auf der Divi-Seite übertragen. Dies funktioniert, egal ob Sie Ihr Formular mit dem WPForms-Modul oder dem Shortcode einbetten. Weitere Details finden Sie in unserer Anleitung zum Hinzufügen von WPForms zu einer Divi-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 war's! Sie können jetzt die Submit-Schaltfläche Ihres Formulars anpassen, entweder im Formular-Builder oder mit Ihrem eigenen CSS.
Möchten Sie als Nächstes den Rest Ihres Formulars entsprechend gestalten? Schauen Sie sich unsere vollständige Anleitung zum Gestalten Ihrer Formulare an, um alle im Formular-Builder verfügbaren Optionen zu sehen.