Anpassen der Schaltflächen "Zurück" und "Weiter" in mehrseitigen Formularen mit CSS

Möchten Sie die Schaltflächen "Zurück" und "Weiter" in Ihren mehrseitigen Formularen anpassen? Die Anpassung der Schaltflächen Ihrer Formulare kann eine gute Möglichkeit sein, Ihrer Website Persönlichkeit und Stil zu verleihen.

In diesem Tutorial erfahren Sie, wie Sie den Stil der Schaltflächen "Zurück" und "Weiter" Ihres mehrseitigen Formulars anpassen können.

Bevor Sie beginnen, stellen Sie sicher, dass WPForms auf Ihrer Website installiert und aktiviert ist und dass Sie Ihre Lizenz überprüft haben. Erstellen Sie dann ein mehrseitiges Formular, um die Schaltflächen "Zurück" und "Weiter" hinzuzufügen.

Gestalten der Schaltflächen "Zurück" und "Weiter

CSS bietet unglaubliche Flexibilität, um die vorherigen und nächsten Schaltflächen in WPForms und jeden anderen Aspekt Ihres Formulars anzupassen.

Wenn Sie neu in CSS sind oder Ihre Kenntnisse auffrischen möchten, beginnen Sie am besten mit unserem Einführungshandbuch zu CSS.

Hier ist die Standard-CSS für WPForms "vorherige und nächste Tasten, sowie Kommentare zu beachten, was jede Zeile von CSS tut:

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.

Zunächst müssen wir die Hex-Codes für die gewünschten Farben herausfinden. htmlcolorcodes.com und Adobe Color CC sind hilfreiche kostenlose Tools, die Ihnen bei der Auswahl Ihrer Farben 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. Am einfachsten geht das mit dem WordPress-CSS-Editor. Gehen Sie dazu zu Darstellung " 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 schon sind Sie fertig!

So sehen unsere Schaltflächen jetzt aus, wenn wir unser Beispiel-CSS anwenden:

Anpassen von Hover-Stilen

Mit CSS können Sie auch völlig andere Stile anwenden, wenn Benutzer mit dem Mauszeiger über eine Schaltfläche fahren. Diese Änderung trägt zur Verbesserung der Benutzerfreundlichkeit bei, da sie den Benutzern zeigt, dass die Schaltfläche anklickbar ist.

Unten ist die Standard-CSS für WPForms Schaltfläche Hover Stile. Wie in den Kommentaren erwähnt, wird die Hintergrundfarbe ein wenig dunkler und die Rahmenfarbe ein wenig 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 Sie für die Schaltfläche gesehen haben, wenn Sie den Mauszeiger nicht darüber halten. Das liegt daran, dass CSS alle früheren Stile auf die Schaltfläche mit dem Mauszeiger anwendet, sofern nicht anders angegeben.

Wenn Sie z. B. die Standardstile beibehalten, bleibt die Textfarbe schwarz, wenn der Benutzer den Mauszeiger über die Schaltfläche bewegt. Das liegt daran, dass die Textfarbe der Schaltfläche normalerweise schwarz ist und wir ihr nicht gesagt haben, dass sie sich beim Überfahren ändern soll.

Wie beim vorherigen Beispiel für benutzerdefiniertes CSS können Sie jeden dieser Werte ändern, um die Schwebestile der Schaltfläche zu ändern. In unserem Beispiel geben wir der Schaltfläche einen dunkleren orangefarbenen Hintergrund, wenn der Mauszeiger über sie bewegt wird.

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 aus, wenn das CSS angewendet wird:

Beispiel CSS

Nachdem wir nun die Grundlagen behandelt haben, wollen wir ein komplettes Beispiel für benutzerdefiniertes CSS für die Schaltflächen Vorherige und Nächste durchgehen.

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

/* 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 */
}

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

Und so sehen unsere Schaltflächen aus, wenn man mit dem Mauszeiger darüber fährt. Denken Sie daran, die einzigen Änderungen sind die Hintergrund- und Rahmenfarben:

Das war's! Jetzt können Sie die Schaltflächen "Zurück" und "Weiter" mit benutzerdefiniertem CSS anpassen.

Möchten Sie Ihren Formularen noch mehr individuelle Stile hinzufügen? In unserem Tutorial erfahren Sie, wie Sie einzelne Formularfelder anpassen können.