KI-Zusammenfassung
Einleitung
Möchten Sie Ihren WPForms einen einzigartigen Touch verleihen, indem Sie die Schaltflächen für den Seitenumbruch anpassen? Suchen Sie nicht weiter! In diesem Tutorial führen wir Sie durch den Prozess der Verwendung von CSS, um das Erscheinungsbild Ihrer Schaltflächen zu personalisieren. Mit einer Reihe von CSS-Snippets können Sie ganz einfach das gewünschte Aussehen erzielen, um ein maßgeschneidertes und optisch ansprechendes Formular zu erhalten.
Erstellen Ihres mehrseitigen Formulars
Beginnen wir mit der Erstellung eines mehrseitigen Formulars. Wenn Sie sich bei diesem Prozess unsicher sind und etwas Anleitung benötigen, können Sie sich gerne auf diese praktische Dokumentation zum Thema Erstellen von mehrseitigen Formularen beziehen.
Im heutigen Tutorial konzentrieren wir uns auf die Erstellung eines Formulars zur Erfassung von Blogbeitrags-Ideen.
Anzeigen von „Zurück“ aktivieren
Nachdem Sie Ihre Seitenumbruch-Schaltflächen eingefügt haben, vergessen Sie nicht, für jeden dieser Umbrüche die Option Zurück anzeigen zu aktivieren. Dadurch wird sichergestellt, dass Ihre Besucher zurücknavigieren können, um das Formular zu überprüfen und zu bearbeiten, bevor sie es abschließen.
Beachten Sie, dass das erste Seitenumbruch-Feld diese Option nicht anzeigt. Sie ist jedoch für jeden nachfolgenden Seitenumbruch verfügbar, einschließlich des letzten.
Wenn Sie die Schaltflächen Weiter und Zurück für Ihr Formular verwenden, erscheinen diese Schaltflächen standardmäßig bereits auf derselben Zeile.
Aber was, wenn wir sie zentrieren oder größere Schaltflächen daraus machen wollten? Hier kommt CSS ins Spiel!
Zentrieren der Schaltflächen
Fügen wir nun etwas CSS hinzu, um die Schaltflächen Weiter und Zurück in unserem Formular zu zentrieren.
Wenn Sie 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, um Ihre eigene ID anzugeben. Wenn Sie nicht sicher sind, wo Sie Ihre Formular-ID finden, lesen Sie bitte diese Anleitung.
Wenn Sie CSS wie dieses für alle Formulare verwenden möchten, würden Sie stattdessen dieses CSS verwenden.
.wpforms-pagebreak-left {
text-align: center !important;
}
Größere Schaltflächen erstellen
Für diesen 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 Schaltflächen
Bei mehrseitigen Formularen und der Verwendung der Zurück-Schaltflächen wird auf der letzten Seite des Formulars die letzte Zurück-Schaltfläche über der Senden-Schaltfläche angezeigt. Für unser Tutorial möchten wir diese Schaltflächen auf derselben Zeile ausrichten.
Ziehen wir also mit all dem bisher verwendeten CSS 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 den anderen obigen CSS-Codes gilt: Wenn Sie dies für alle Formulare wünschen, 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;
}
Und das ist alles, was Sie brauchen, um das Aussehen der mehrseitigen Schaltflächen anzupassen. Möchten Sie auch automatisch zur nächsten Seite wechseln, basierend auf einer Frage für Ihr Formular? Schauen Sie sich unser Tutorial an So wechseln Sie automatisch zur nächsten Seite.