WPForms mit benutzerdefiniertem CSS gestalten (Anfängerleitfaden)

Möchten Sie benutzerdefinierte Stile zu Ihren Formularen hinzufügen können? CSS ist ein mächtiges Werkzeug, mit dem Sie Ihren Formularen einen einzigartigen, individuellen Stil verleihen können.

Dieses Tutorial führt Sie durch die Erstellung von benutzerdefiniertem CSS zur Gestaltung Ihrer Formulare, mit vielen Beispielen.

---

Was ist CSS?

CSS steht für Cascading Style Sheets und ist der Code, den Webbrowser lesen, um fast alles zu gestalten, was Sie im Internet sehen. Es steuert alles, von Schriftgröße und -stil bis hin zu Farben und Hover-Effekten. Ohne ihn würde der größte Teil des Webs wie eine sehr langweilige Textdatei aussehen.

CSS lesen

Im Gegensatz zu vielen anderen Arten von Code ist CSS relativ einfach zu erlernen, selbst ohne jegliche Programmiererfahrung. Der erste Schritt besteht 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. Schriftgröße oder Farbe
• Werte: der spezifische Stileffekt, den Sie anwenden möchten

Als Beispiel sehen Sie hier einen CSS-Schnipsel, der die Größe Ihres Formulartitels festlegt:

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

Der Selektor in diesem Beispiel ist .wpforms-form .wpforms-title und er wendet Ihr CSS auf den Titel aller WPForms auf Ihrer Website an.

Dann gibt es in den geschweiften Klammern eine CSS-Eigenschaft in diesem Beispiel: font-size. Diese Eigenschaft hat einen Wert von 26 Pixeln.

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

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

Einen CSS-Selektor auswählen

Der erste Schritt beim Schreiben von CSS ist die Identifizierung des richtigen Selektors, um einen bestimmten Teil Ihres Formulars anzusprechen. Es gibt zwei Möglichkeiten, einen Selektor auszuwählen:

1) Einen Selektor aus unserer Liste kopieren

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

2) Entwicklertools in Ihrem Browser verwenden

Dieser fortgeschrittenere Ansatz mag eine gewisse Lernkurve haben, ist aber eine großartige Option, wenn Sie viele benutzerdefinierte CSS erstellen möchten.

Entwicklertools ermöglichen es Ihnen, jeden Teil der Webseite zu inspizieren, um zu sehen, welches CSS angewendet wird. Sie können auch Änderungen an CSS 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.

CSS-Eigenschaften und -Werte verwenden

Nachdem Sie nun wissen, wie Sie einen CSS-Selektor auswählen, können wir besprechen, wie Sie mit CSS-Eigenschaften und -Werten bestimmte Stile ändern.

Nachfolgend finden Sie einige grundlegende CSS-Eigenschaften, die für Ihre Formulare nützlich sein können. Zusätzlich finden Sie Beispiele für Stiländerungen, die Sie durch die Kombination von Selektoren, Eigenschaften und Werten vornehmen können, um einen vollständigen CSS-Schnipsel zu erstellen.

Klicken Sie einfach auf den Link in dieser Liste, um zum benötigten Abschnitt zu springen:

• Schriftfamilie
• Farbe
• Schriftgröße
• Hintergrundfarbe
• Abstand
• Rand
• Abgerundete Ecken

Schriftfamilie

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

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

Farbe

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

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

Schriftgröße

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

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

Hintergrundfarbe

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

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

Abstand

• • Definition: Der Abstand zwischen dem Selektorelement und seinem Rand
  • Beispiel: Haben Sie bemerkt, dass im obigen Beispiel kein Abstand zwischen dem Text und den Rändern der farbigen Box ist? Zusätzlich zur Hintergrundfarbe fügen wir 20 Pixel Abstand oben und unten des Formulars sowie 15 Pixel Abstand links und rechts hinzu. Dies tun wir, indem wir padding: 20px 15px; zum CSS aus dem vorherigen Beispiel hinzufügen:

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

Rand

• • Definition: Bestimmt den Stil und die Dicke des Randes eines Elements
  • Beispiel: Fügen wir dem obigen Beispiel einen 3 Pixel dicken, durchgezogenen und dunkelgrauen Rand hinzu. Dies tun wir, indem wir border: 3px solid #666; zum vorhandenen CSS für .wpforms-form hinzufügen:

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

Abgerundete Ecken

• • Definition: Wie stark die Ecken eines Elements abgerundet werden (0px ist eine eckige Kante, höhere Zahlen sind stärker abgerundet)
  • Beispiel: Wir werden das obige Beispiel weiter ausbauen und eine abgerundete Ecke von 20 Pixeln hinzufügen, um die Ränder unserer Formulare abzurunden. Dies können wir tun, indem wir border-radius: 20px; zu dem bereits erstellten CSS hinzufügen:

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

Ein einzelnes Formular gestalten

Durch die Verwendung der oben beschriebenen CSS-Selektoren können Sie problemlos dieselben Stile auf alle WPForms auf Ihrer Website anwenden. Wenn Sie einige Stile nur auf ein einzelnes Formular anwenden möchten, müssen Sie die ID des Formulars zum Selektor hinzufügen.

Um die ID eines Formulars leicht zu finden, können Sie in seinem Shortcode nachsehen. Dies 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 die ID 4. Um unsere früheren Stile nur auf dieses einzelne Formular anzuwenden, müssten wir #wpforms-4 am Anfang des Selektors hinzufügen. 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;
}

Sobald Sie Ihren CSS-Snippet erstellt haben, besteht der nächste Schritt darin, ihn zu Ihrer Website hinzuzufügen. Sie können lernen, wie Sie dies tun, indem Sie dem Leitfaden von WPBeginner zum Hinzufügen von benutzerdefiniertem CSS zu WordPress folgen.

Das ist alles! Sie können jetzt benutzerdefinierte CSS-Stile für Ihre Formulare erstellen. Weitere CSS-Beispiele zum Erstellen benutzerdefinierter Formular-Designs finden Sie in unserem Artikel über schöne Formular-Designs, die Sie kopieren können.

Möchten Sie als Nächstes benutzerdefinierte Stile für die Submit-Schaltfläche zu Ihren Formularen hinzufügen? Schauen Sie sich unser Tutorial zur Anpassung der Submit-Schaltfläche für Details und Beispiele an.