Anpassen von WPForms-Abschnittstrennern mit CSS

Übersicht

Möchten Sie das WPForms Abschnittstrenner-Formularfeld anpassen? Mit etwas CSS können Sie den Stil nicht nur des Trenners selbst, sondern auch des Textes ändern, der mit dem Trenner verwendet wird. In diesem Artikel führen wir Sie durch die Schritte zur Anpassung des Stils des Abschnittstrenner-Formularfelds.

Erstellung des Formulars

Zuerst erstellen wir ein Formular, fügen unsere Felder hinzu und unterteilen diese Felder dann mit dem Abschnittstrenner.

Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, sehen Sie bitte diese Dokumentation an.

Für diese Dokumentation erstellen wir ein Formular, das persönliche Informationen, Krankengeschichte und primäre Versicherungsinformationen erfasst. Da das Formular sehr lang sein wird, möchten wir es in Abschnitte unterteilen, die klar definieren, was jeder Abschnitt ist, und dazu werden wir Abschnittstrenner verwenden, um das Formular zu unterteilen.

Hinzufügen des CSS

Jetzt ist es an der Zeit, das CSS hinzuzufügen, das den Stil des Abschnittstrenners anpasst.

Hilfe beim Hinzufügen von CSS zu Ihrer Website finden Sie in diesem Tutorial.

form#wpforms-form-220 .wpforms-field-divider h3 {
    color: #ffffff;
    text-align: center;
    font-size: 30px;
    text-transform: uppercase;
}

form#wpforms-form-220 .wpforms-field-divider {
    padding: 20px;
    background-color: #e27730;
    border-radius: 3px;
}

Wir zielen auf die Formular-ID 220 ab. Sie müssen diese ID aktualisieren, um Ihre eigene Formular-ID anzugeben. Hilfe beim Auffinden dieser ID finden Sie in diesem Tutorial.

Jetzt, mit dem hinzugefügten CSS, hat unser Abschnittstrenner ein völlig anderes Aussehen und Gefühl.

Und das ist alles, was Sie brauchen, um den Abschnittstrenner anzupassen. Möchten Sie auch den Stil von Kontrollkästchen-Elementen anpassen? Werfen Sie einen Blick auf unseren Artikel So passen Sie Kontrollkästchen- und Radio-Felder an, damit sie wie Schaltflächen aussehen.

FAQ

F: Was ist, wenn ich diese Änderung für alle meine Formulare vornehmen möchte?

A: Um dieses CSS für alle WPForms zu verwenden, fügen Sie Ihr CSS einfach zu Ihrer Website hinzu und entfernen Sie die vorausgestellte Formular-ID.

.wpforms-field-divider h3 {
    color: #ffffff !important;
    text-align: center !important;
    font-size: 30px !important;
    text-transform: uppercase !important;
}

.wpforms-field-divider {
    padding: 20px !important;
    background-color: #e27730 !important;
    border-radius: 3px !important;
}