Einführung
Möchten Sie Ihren WPForms eine einzigartige Note verleihen, indem Sie die Schaltflächen für den Seitenwechsel anpassen? Dann suchen Sie nicht weiter! In diesem Tutorial führen wir Sie durch den Prozess der Verwendung von CSS, um das Aussehen Ihrer Schaltflächen zu personalisieren. Mit einer Reihe von CSS-Snippets können Sie ganz einfach das gewünschte Aussehen für ein maßgeschneidertes und optisch ansprechendes Formular erreichen.
Erstellen Sie Ihr mehrseitiges Formular
Beginnen wir damit, ein mehrseitiges Formular zu erstellen. Wenn Sie sich unsicher sind und eine Anleitung benötigen, können Sie diese praktische Dokumentation zur Erstellung mehrseitiger Formulare zu Rate ziehen.
Im heutigen Tutorial konzentrieren wir uns auf die Erstellung eines Formulars, mit dem Ideen für Blogposts gesammelt werden können.
Vorherige Anzeige aktivieren
Vergessen Sie nicht, nach dem Einfügen der Schaltflächen für den Seitenwechsel die Option Vorherige anzeigen für jeden dieser Wechsel zu aktivieren. Dadurch wird sichergestellt, dass Ihre Besucher zurück navigieren können, um das Formular zu überprüfen und zu bearbeiten, bevor sie es abschließen.
Beachten Sie, dass diese Option im Feld für den ersten Seitenumbruch nicht angezeigt wird. Sie ist jedoch für jeden weiteren Seitenumbruch verfügbar, auch für den letzten.
Wenn Sie die Schaltflächen " Weiter" und " Zurück" für Ihr Formular verwenden, werden diese Schaltflächen standardmäßig bereits in derselben Zeile angezeigt.
Was aber, wenn wir sie zentrieren oder größer machen wollen? An dieser Stelle kommt CSS ins Spiel!
Zentrierung der Tasten
Fügen wir nun etwas CSS hinzu, um die Schaltflächen "Next" und " Previous" in unserem Formular zu zentrieren.
Wenn Sie sich nicht sicher sind, wo oder wie Sie CSS zu Ihrer Website hinzufügen können, lesen Sie bitte dieses Tutorial.
form#wpforms-form-605 .wpforms-pagebreak-left {
text-align: center;
}
Dieses CSS wird nur auf die Formular-ID 605 angewendet. Sie müssen diese Formular-ID aktualisieren, damit sie mit Ihrer eigenen ID übereinstimmt. Wenn Sie nicht sicher sind, wo Sie Ihre Formular-ID finden, lesen Sie bitte diesen Leitfaden.
Wenn Sie ein CSS wie dieses für alle Formulare verwenden möchten, würden Sie stattdessen dieses CSS verwenden.
.wpforms-pagebreak-left {
text-align: center !important;
}
Erstellen größerer Schaltflächen
In diesem Abschnitt werden wir unsere Schaltflächen größer machen und gleichzeitig das obige CSS verwenden, um die Schaltflächen zentriert zu halten.
form#wpforms-form-605 .wpforms-pagebreak-left {
text-align: center;
}
form#wpforms-form-605 .wpforms-page-next {
width: 48% ;
float: right ;
margin: 0px ;
}
form#wpforms-form-605 .wpforms-page-prev {
margin-right: 0px ;
width: 48% ;
float: left ;
margin: 0 ;
padding: 0 ;
}
Um diese Änderung für alle Formulare vorzunehmen, verwenden Sie stattdessen dieses CSS.
.wpforms-pagebreak-left {
text-align: center !important;
}
.wpforms-page-next {
width: 48% !important;
float: right !important;
margin: 0px !important;
}
.wpforms-page-prev {
margin-right: 0px !important;
width: 48% !important;
float: left !important;
margin: 0 !important;
padding: 0 !important;
}
Ausrichten der letzten Tasten
Bei einem mehrseitigen Formular und der Verwendung der Schaltflächen "Zurück" wird auf der letzten Seite des Formulars die letzte Schaltfläche " Zurück" über der Schaltfläche "Senden" angezeigt. Für unser Lernprogramm möchten wir diese Schaltflächen in derselben Zeile anordnen.
Verwenden wir also alle CSS, die wir bisher verwendet haben, und fügen wir das alles zusammen.
form#wpforms-form-605 .wpforms-page-next {
width: 48% ;
float: right ;
margin: 0px ;
}
form#wpforms-form-605 .wpforms-page-prev {
margin-right: 0px ;
width: 48% ;
float: left ;
margin: 0 ;
padding: 0 ;
}
form#wpforms-form-605 .wpforms-submit-container {
float: right ;
width: 48% ;
margin: 0 ;
padding: 0 ;
clear: none ;
}
form#wpforms-form-605 .wpforms-submit-container button {
width: 100%;
}
form#wpforms-form-605 .wpforms-page.last .wpforms-field-pagebreak {
float: left;
display: block;
width: 48%;
padding: 0;
}
form#wpforms-form-605 .wpforms-page.last .wpforms-pagebreak-left {
width: 100%;
}
form#wpforms-form-605 .wpforms-page.last .wpforms-page-prev {
width: 100%;
}
Und wie bei dem anderen CSS oben, wenn Sie dies für alle Formulare wollen, würden Sie dieses CSS verwenden.
.wpforms-page-next {
width: 48% !important;
float: right !important;
margin: 0px !important;
}
.wpforms-page-prev {
margin-right: 0px !important;
width: 48% !important;
float: left !important;
margin: 0 !important;
padding: 0 !important;
}
.wpforms-submit-container {
float: right !important;
width: 48% !important;
margin: 0 !important;
padding: 0 !important;
clear: none !important;
}
.wpforms-submit-container button {
width: 100% !important;
}
.wpforms-page.last .wpforms-field-pagebreak {
float: left !important;
display: block !important;
width: 48% !important;
padding: 0 !important;
}
.wpforms-page.last .wpforms-pagebreak-left {
width: 100% !important;
}
.wpforms-page.last .wpforms-page-prev {
width: 100% !important;
}
Das ist alles, was Sie brauchen, um das Aussehen und die Bedienung der mehrseitigen Schaltflächen anzupassen. Möchten Sie auch automatisch auf die nächste Seite wechseln, wenn Sie eine Frage für Ihr Formular eingeben? Werfen Sie einen Blick auf unser Tutorial über den automatischen Wechsel zur nächsten Seite.