Anpassen von Vor- und Zurück-Buttons in mehrseitigen Formularen mit CSS

Möchten Sie die Schaltflächen „Zurück“ und „Weiter“ in Ihren mehrseitigen Formularen anpassen? Das Anpassen der Schaltflächen Ihrer Formulare kann eine großartige Möglichkeit sein, Ihrem Website Persönlichkeit und Stil zu verleihen.

Dieses Tutorial erklärt, wie Sie den Stil der Schaltflächen „Zurück“ und „Weiter“ Ihres mehrseitigen Formulars anpassen.

Stellen Sie vor Beginn sicher, dass WPForms auf Ihrer Website installiert und aktiviert ist und Sie Ihre Lizenz verifiziert haben. Erstellen Sie dann ein mehrseitiges Formular, um Schaltflächen „Zurück“ und „Weiter“ hinzuzufügen.

Styling der Schaltflächen „Zurück“ und „Weiter“

CSS bietet unglaubliche Flexibilität, um die Schaltflächen „Zurück“ und „Weiter“ in WPForms und 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.

Hier ist das Standard-CSS für die Schaltflächen „Zurück“ und „Weiter“ von WPForms sowie Kommentare, die erklären, was jede CSS-Zeile bewirkt:

div.wpforms-container-full .wpforms-form .wpforms-page-button {
    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 Ihre Schaltflächen auf unterschiedliche Weise zu gestalten. Als Beispiel beginnen wir damit, die Hintergrundfarbe unserer Schaltflächen auf Orange und den Text auf Weiß zu ändern.

Zuerst müssen wir die Hex-Codes für die Farben finden, die wir verwenden möchten. htmlcolorcodes.com und Adobe Color CC sind hilfreiche kostenlose Tools, die Ihnen bei der Farbauswahl helfen können.

Sobald wir die Hex-Codes für die gewünschten Farben haben, können wir sie zu unserem CSS hinzufügen:

div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #e27730 !important; /* Orange background */
    color: #fff !important; /* White text */
}

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. Gehen Sie dazu zu Design » Anpassen und wählen Sie Zusätzliches CSS.

Sobald Sie den Abschnitt „Zusätzliches CSS“ geöffnet haben, können Sie Ihr neues CSS hinzufügen. Klicken Sie dann auf die Schaltfläche Veröffentlichen, und Sie sind fertig!

So sehen unsere Schaltflächen jetzt aus, nachdem unser Beispiel-CSS angewendet wurde:

Anpassen von Hover-Stilen

CSS ermöglicht es Ihnen auch, völlig andere Stile anzuwenden, wenn Benutzer ihre Maus über eine Schaltfläche bewegen. Diese Änderung verbessert die Benutzererfahrung, da sie den Benutzern anzeigt, dass die Schaltfläche klickbar ist.

Unten sehen Sie die Standard-CSS für die Hover-Effekte der WPForms-Schaltflächen. Wie in den Kommentaren erwähnt, wird die Hintergrundfarbe etwas dunkler und die Rahmenfarbe etwas heller:

div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #ddd; /* Darker grey background */
    border: 1px solid #ccc; /* Lighter grey border */
}

Sie werden feststellen, dass dies viel weniger CSS ist als das, was Sie für die Schaltfläche gesehen haben, wenn sie nicht im Hover-Zustand ist. Das liegt daran, dass CSS alle vorherigen Stile auf Ihre gehoverte Schaltfläche anwendet, es sei denn, es wird etwas anderes angegeben.

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

Wie beim vorherigen Beispiel für benutzerdefiniertes CSS können Sie jeden dieser Werte ändern, um die Hover-Stile der Schaltfläche zu ändern. In unserem Beispiel geben wir der Schaltfläche einen dunkleren orangefarbenen Hintergrund, wenn sie im Hover-Zustand ist.

div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #cd631d !important; /* Darker orange background */
}

So sehen die Schaltflächen mit angewendetem CSS aus:

Beispiel-CSS

Nachdem wir nun die Grundlagen behandelt haben, gehen wir ein vollständiges Beispiel für benutzerdefiniertes CSS für die vorherigen und nächsten Schaltflächen durch.

Hier ist das CSS, das wir für dieses Beispiel hinzufügen werden, einschließlich Stiländerungen beim Hovern:

/* New button styles */
div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #003B6D !important; /* Dark blue background */
    border: 2px solid #BDBDBD !important; /* Gray border */
    color: #fff !important; /* White text */
    font-size: 1em !important; /* Increase text size */
    font-weight: bold !important; /* Bold text */
    padding: 16px !important; /* Increase distance between text and border */
    width: 25% !important; /* Make the button quarter-width */
}

/* New button hover styles */
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #BDBDBD !important; /* Gray background */
    border: 2px solid #003B6D !important; /* Dark blue border */
}

Unten sehen Sie, wie unsere angepassten Schaltflächen mit diesem CSS aussehen werden:

Und hier sehen Sie, wie unsere Schaltflächen beim Hovern aussehen werden. Denken Sie daran, dass die einzigen Änderungen die Hintergrund- und Rahmenfarben sind:

Das ist alles! Sie können jetzt Ihre vorherigen und nächsten Schaltflächen mit benutzerdefiniertem CSS anpassen.

Möchten Sie Ihren Formularen noch mehr benutzerdefinierte Stile hinzufügen? Sehen Sie sich unser Tutorial an, wie Sie einzelne Formularfelder anpassen.