Gestaltung von WPForms mit benutzerdefinierten CSS (Anleitung für Anfänger)

Möchten Sie Ihren Formularen individuelle Stile hinzufügen können? CSS ist ein leistungsstarkes Werkzeug, mit dem Sie Ihren Formularen einen einzigartigen, individuellen Stil verleihen können.

In diesem Tutorial erfahren Sie, wie Sie benutzerdefinierte CSS zur Gestaltung Ihrer Formulare erstellen können, mit vielen Beispielen.

---

Was ist CSS?

CSS steht für Cascading Style Sheets und ist der Code, der von Webbrowsern gelesen wird, um fast alles zu gestalten, was Sie im Internet sehen. Er steuert alles, von Schriftgröße und -stil bis hin zu Farben und Hover-Effekten. Ohne CSS würde das meiste im Internet wie eine langweilige Textdatei aussehen.

CSS lesen

Im Gegensatz zu vielen anderen Codearten ist CSS auch für absolut unerfahrene Programmierer relativ leicht zu erlernen. Der erste Schritt besteht lediglich darin, die drei Hauptkomponenten von CSS zu verstehen:

• Selektoren: das "Ziel", auf das Sie Stile anwenden möchten
• Eigenschaften: der spezifische Stil, den Sie ändern möchten, z. B. die Schriftgröße oder -farbe
• Werte: der spezifische Stileffekt, den Sie anwenden möchten

Sehen Sie sich zum Beispiel diesen CSS-Schnipsel an, der die Größe des Formulartitels festlegt:

.wpforms-form .wpforms-title {
    font-size: 26px !important;
}

Die Selektor ist in diesem Beispiel .wpforms-form .wpforms-title und es wird Ihr CSS auf den Titel aller WPForms auf Ihrer Website anwenden.

In den geschweiften Klammern befindet sich dann ein CSS Eigenschaft in diesem Beispiel: font-size. Diese Eigenschaft hat eine Wert von 26 Pixeln.

Wenn wir entscheiden, dass der Titeltext unseres Formulars größer sein soll (z. B. 35 Pixel), müssen wir nur diesen Wert im CSS ändern:

.wpforms-form .wpforms-title {
    font-size: 35px !important;
}

Auswählen eines CSS-Selektors

Der erste Schritt beim Schreiben von CSS besteht darin, den richtigen Selektor für einen bestimmten Teil des Formulars zu finden. Es gibt zwei Möglichkeiten, einen Selektor auszuwählen:

1) Kopieren eines Selektors aus unserer Liste

Wir haben eine umfassende Liste von Selektoren für jedes verfügbare Feld in unseren Formularen erstellt, so dass Sie einfach den Selektor für den Bereich auswählen können, auf den Sie CSS anwenden möchten.

2) Verwendung von Entwickler-Tools in Ihrem Browser

Dieser fortschrittlichere Ansatz ist zwar etwas gewöhnungsbedürftig, aber eine gute Option, wenn Sie eine Reihe von benutzerdefinierten CSS erstellen möchten.

Mit den Entwicklertools können Sie jeden beliebigen Teil der Webseite untersuchen, um zu sehen, welches CSS angewendet wird. Sie können auch CSS-Änderungen im laufenden Betrieb testen und sehen, wie sie direkt in Ihrem Browser angewendet werden. WPBeginner hat ein großartiges Tutorial zur Verwendung von Entwicklertools, das Ihnen den Einstieg erleichtern sollte, einschließlich eines Schritt-für-Schritt-Videos zur Verwendung der Entwicklertools von Chrome.

Verwendung von CSS-Eigenschaften und -Werten

Da Sie nun wissen, wie man einen CSS-Selektor auswählt, können wir nun besprechen, wie man bestimmte Stile mit CSS-Eigenschaften und -Werten ändert.

Im Folgenden finden Sie einige grundlegende CSS-Eigenschaften, die für Ihre Formulare nützlich sein können. Außerdem finden Sie Beispiele für Stiländerungen, die Sie durch die Kombination von Selektoren, Eigenschaften und Werten vornehmen können, um ein vollständiges CSS-Snippet zu erstellen.

Klicken Sie einfach auf den Link in dieser Liste, um zu dem Abschnitt zu gelangen, den Sie benötigen:

• font-family
• Farbe
• Schriftgröße
• Hintergrundfarbe
• Polsterung
• Grenze
• Rand-Radius

font-family

• • Definition: Der Standard-Schriftstil
  • Beispiel: Um die Standardschriftart des Titels in den Formularen Ihrer Website in Arial zu ändern, würden Sie Folgendes verwenden:

.wpforms-form .wpforms-title {
    font-family: 'Arial', sans-serif !important;
}

color

• • Definition: Schriftfarbe
  • Beispiel: Um den Titel aller Formulare auf Ihrer Website blau zu machen, könnten Sie verwenden:

.wpforms-form .wpforms-title {
    color: #007acc !important;
}

font-size

• • Definition: Wie groß die Schrift sein wird (Einheiten können px, em oder rem sein)
  • Beispiel: Um den Titel auf allen Formularen Ihrer Website 35px zu machen, würden Sie verwenden:

.wpforms-form .wpforms-title {
    font-size: 35px !important;
}

background-color

• • Definition: Die Farbe, die den Hintergrund des Selektorbereichs füllt
  • Beispiel: Um den gesamten Hintergrund eines Formulars hellgrau zu gestalten, könnten Sie das folgende CSS verwenden:

.wpforms-form {
    background-color: #eee !important;
}

padding

• • Definition: Der Abstand zwischen dem Selektorelement und seinem Rand
  • Beispiel: Ist Ihnen aufgefallen, dass im obigen Beispiel kein Abstand zwischen dem Text und den Rändern des farbigen Kastens besteht? Zusätzlich zur Hintergrundfarbe fügen wir 20 Pixel Polsterung oben und unten im Formular sowie 15 Pixel Polsterung an der rechten und linken Seite hinzu. Dazu fügen wir Folgendes hinzu padding: 20px 15px; mit dem CSS aus dem vorherigen Beispiel:

.wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
}

border

• • Definition: Bestimmt den Stil und die Dicke des Randes eines Elements
  • Beispiel: Fügen wir zu unserem obigen Beispiel einen 3 Pixel dicken, durchgezogenen und dunkelgrauen Rahmen hinzu. Dazu fügen wir Folgendes hinzu border: 3px solid #666; zum bestehenden CSS für .wpforms-form:

.wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
}

border-radius

• • Definition: Wie gekrümmt die Ecken eines Elements sein werden (0px ist eine quadratische Kante, höhere Zahlen sind stärker gekrümmt)
  • Beispiel: Wir bauen auf dem obigen Beispiel auf und fügen einen Randradius von 20 Pixeln hinzu, um die Kanten unserer Formulare abzurunden. Wir können dies tun, indem wir Folgendes hinzufügen border-radius: 20px; zu dem bereits erstellten CSS:

.wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

Ein individuelles Formular gestalten

Mit den oben beschriebenen CSS-Selektoren können Sie ganz einfach die gleichen Stile auf alle WPForms auf Ihrer Website anwenden. Wenn Sie jedoch einige Stile nur auf ein einzelnes Formular anwenden möchten, müssen Sie die ID des Formulars zum Selektor hinzufügen.

Um die ID des Formulars zu finden, können Sie in seinem Shortcode nachsehen. Dieser kann im Seiten-/Beitragseditor angezeigt werden, oder Sie können zu WPForms " Alle Formulare gehen und in der Spalte Shortcode nachsehen.

In diesem Beispiel hat unser Formular eine ID von 4. Um unsere früheren Stile nur auf dieses eine Formular anzuwenden, müssen wir Folgendes hinzufügen #wpforms-4 an den Anfang des Selektors. Hier ist unser geändertes CSS:

#wpforms-4 .wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

Nachdem Sie Ihr CSS-Snippet erstellt haben, fügen Sie es im nächsten Schritt zu Ihrer Website hinzu. Wie das geht, erfahren Sie in der WPBeginner-Anleitung zum Hinzufügen von benutzerdefiniertem CSS zu WordPress.

Das war's! Sie können jetzt benutzerdefinierte CSS-Stile für Ihre Formulare erstellen. Weitere CSS-Beispiele für die Erstellung benutzerdefinierter Formulardesigns finden Sie in unserem Artikel über schöne Formulardesigns, die Sie klauen können.

Möchten Sie als Nächstes Ihren Formularen benutzerdefinierte Schaltflächenstile hinzufügen? In unserem Tutorial zum Anpassen der Übermittlungsschaltfläche finden Sie Details und Beispiele.