Hinzufügen von Symbolen zu deinen WordPress-Formularen

Möchten Sie Ihren Formularen Symbole hinzufügen? Symbole können eine großartige Möglichkeit sein, den Zweck eines Feldes visuell zu verstärken und Ihren Formularen ein individuelleres Aussehen zu verleihen.

Dieses Tutorial behandelt, wie Sie Symbole von Font Awesome zu Ihren Formularen hinzufügen.

---

Font Awesome zu Ihrer Website hinzufügen

Der erste Schritt ist, die Symbolbibliothek von Font Awesome zu Ihrer Website hinzuzufügen. Font Awesome ist eine großartige Option, um Symbole zu Ihren Formularen hinzuzufügen, da seine Symbole als Schriftart fungieren und die gleiche Farbe und Größe wie andere Schriftarten auf Ihrer Website annehmen.

Es gibt viele Möglichkeiten, die Font Awesome-Symbolbibliothek zu Ihrer Website hinzuzufügen, vom Hinzufügen von Code zum Header Ihrer Website bis zur Installation eines Plugins. Details zu jeder Option finden Sie in WPBeginners Anleitung zum Hinzufügen von Symbolschriften zu WordPress.

Um es einfach zu halten, verwenden wir das Plugin Better Font Awesome. Es ist ein kostenloses WordPress-Plugin, das die Ressourcen hinzufügt, die zum Verwenden von Font Awesome-Symbolen auf Ihrer Website benötigt werden.

Wenn Sie bereit sind, fahren Sie fort und installieren Sie das Plugin. Sobald es aktiviert ist, können Sie mit dem nächsten Schritt des Tutorials fortfahren.

Ein Symbol von Font Awesome auswählen

Sobald Sie Font Awesome auf Ihrer Website verwenden können, können Sie mit der Suche nach den Symbolen beginnen, die Sie in Ihrem/Ihren Formular/Formularen verwenden möchten.

Suchen Sie auf der Seite des Symbols, das Sie verwenden möchten, nach dem Unicode-Wert, der direkt unter dem Symbolnamen angezeigt wird.

In der obigen Abbildung ist der Unicode f1d8.

Machen Sie sich den Unicode für jedes Symbol, das Sie in Ihren Formularen verwenden möchten, zunutze, da Sie ihn später in diesem Tutorial in Ihre benutzerdefinierten CSS-Snippets aufnehmen müssen.

Symbole zu Ihren Formularen hinzufügen

Es gibt verschiedene Möglichkeiten, Symbole in Ihre Formulare zu integrieren. Wir haben unten einige Beispiele behandelt, aber es gibt ein paar Dinge zu beachten, bevor Sie sich damit befassen.

Erstens erfordern fast alle unten aufgeführten Beispiele, dass Sie benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzufügen. Details dazu finden Sie in WPBeginners Schritt-für-Schritt-Anleitung zum Hinzufügen von benutzerdefiniertem CSS zu Ihrer Website.

Zusätzlich hängt die Schriftfamilie, die Sie in Ihren CSS-Snippets verwenden müssen, davon ab, ob Sie ein kostenloses oder kostenpflichtiges Symbol von Font Awesome verwenden.

Icons vor Formular-Titeln anzeigen

Um ein Icon vor dem Titel Ihres Formulars hinzuzufügen, müssen Sie benutzerdefiniertes CSS erstellen, das das Icon für Sie einfügt. Dieses CSS unterscheidet sich geringfügig, je nachdem, ob das Icon vor den Titeln aller WPForms auf Ihrer Website oder nur vor einem bestimmten Formular erscheinen soll.

Icon zu allen Formular-Titeln hinzufügen

Das CSS, um ein Icon vor allen Formular-Titeln anzuzeigen, ist einfach, da es allgemeiner ist. Hier ist der CSS-Schnipsel, den Sie benötigen:

.wpforms-form .wpforms-title:before {
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and backslash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and title */
}

In diesem Snippet gibt es ein paar Zeilen, die Sie anpassen müssen. Beachten Sie zunächst, dass die Font Awesome Unicode für das von uns gewählte Icon nach content: enthalten ist.

Sie können diesen Wert durch die Unicode eines beliebigen anderen Icons aus der Font Awesome-Bibliothek ersetzen.

Dieses CSS enthält auch einen rechten Rand von 10 Pixeln. Ohne diesen gäbe es keinen Abstand zwischen dem Icon und dem Titel des Formulars. Sie können diese Zahl nach Belieben anpassen.

Auf der Frontend-Seite sieht dieses Beispiel so aus:

Icon zu einem bestimmten Formular-Titel hinzufügen

Anstatt jedem Formular auf Ihrer Website das gleiche Icon hinzuzufügen, können Sie spezifischeres CSS verwenden, um ein einzelnes Formular anzusprechen.

Dazu müssen Sie die eindeutige ID-Nummer für das Formular finden, dessen Titel Sie mit einem Icon versehen möchten.

Sie finden eine Formular-ID in seinem Shortcode, den Sie einsehen können, indem Sie zu WPForms » Alle Formulare gehen und in der Spalte Shortcode nachsehen.

Wir verwenden die ID-Nummer 30 , um unser CSS spezifischer zu machen. Hier ist das CSS, das nur ein Icon vor dem Titel des identifizierten Formulars hinzufügt:

#wpforms-30 .wpforms-form .wpforms-title:before {
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and title */
}

Dieses CSS ist fast genau dasselbe wie das Snippet, das Icons zu allen Formular-Titeln auf Ihrer Website hinzufügt. Der einzige Unterschied ist, dass wir #wpforms-form-30 hinzugefügt haben, sodass dieser Stil jetzt nur noch auf dieses eine Formular angewendet wird.

Für Ihr eigenes Formular müssen Sie nur die Formular-ID ändern und die Unicode für das Icon, das Sie verwenden möchten, ersetzen, wie im obigen Abschnitt beschrieben.

Icons vor Feld-Labels anzeigen

Sie können ein Icon vor jedem Feld-Label in Ihren Formularen mit einem anpassbaren CSS-Schnipsel hinzufügen. Der Code, den Sie hinzufügen müssen, ändert sich geringfügig, je nachdem, ob Sie ein Icon für alle Feld-Labels auf Ihrer Website verwenden möchten oder ob Sie ein Icon vor einem bestimmten Feld-Label anzeigen möchten.

Hinzufügen eines Icons zu allen Feldbezeichnungen

Das Anzeigen eines Icons vor allen Feldbezeichnungen auf Ihrer Website erfordert einen sehr ähnlichen CSS-Schnipsel wie der oben für Formularüberschriften beschriebene:

.wpforms-form .wpforms-field-label:before { 
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and label */
}

Stellen Sie sicher, dass Sie die Unicode-Zeichen im obigen Schnipsel durch die Zeichen für das gewünschte Icon ersetzen. Sie können auch die Rändergröße nach Ihren Wünschen anpassen.

Auf dem Frontend sollten Ihre Feldbezeichnungs-Icons ungefähr so aussehen:

Hinzufügen eines Icons zu einer bestimmten Feldbezeichnung

Möglicherweise möchten Sie nicht, dass dasselbe Icon neben jedem Feld angezeigt wird. Um nur ein einzelnes Feld anzusprechen, muss der CSS-Schnipsel spezifischer gemacht werden, indem die eindeutige ID des Feldes, dessen Bezeichnung Sie mit einem Icon versehen möchten, einbezogen wird.

Dieser Ansatz ist dem Ansprechen einer einzelnen Formularüberschrift, wie oben beschrieben, sehr ähnlich.

Um die Feld-ID zu finden, die Sie im Schnipsel verwenden müssen, öffnen Sie Ihr Formular im Frontend entweder auf einer veröffentlichten Seite oder über die Formularvorschau. Klicken Sie dann mit der rechten Maustaste auf das Feld, das Sie ansprechen möchten, und wählen Sie Untersuchen.

Ihr Bildschirm sollte sich teilen, um den Quellcode der Seite anzuzeigen. Stellen Sie sicher, dass das gesamte Feld, das Sie ansprechen möchten, hervorgehoben ist (einschließlich der Bezeichnung und des Eingabefeldes), und suchen Sie dann nach der ID.

Für das Feld im obigen Bild ist die ID wpforms-9-field_0-container.

Hier ist der CSS-Schnipsel zum Hinzufügen eines Icons zur Bezeichnung eines bestimmten Feldes:

.wpforms-form #wpforms-9-field_0-container .wpforms-field-label:before { 
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and label */
}

Wenn Sie sich die erste Zeile dieses CSS-Schnipsels ansehen, werden Sie feststellen, dass wir ein # hinzugefügt haben, gefolgt von der gerade gefundenen ID. Nun wird unser Icon nur zu diesem einzelnen Feld hinzugefügt, ohne andere Feldbezeichnungen (in diesem oder einem anderen Formular) zu verändern.

Symbole in Eingabefeldern anzeigen

Anstatt ein Icon zu einer Feldbezeichnung hinzuzufügen, können Sie es innerhalb des Feldes selbst anzeigen. Der Code-Schnipsel, den Sie dazu verwenden müssen, unterscheidet sich ziemlich von den anderen in diesem Tutorial, verwendet aber viele der gleichen Elemente:

#wpforms-form-9 .wpforms-field,
#wpforms-form-9 .wpforms-field .wpforms-field-row-block {
	position: relative;
}

#wpforms-form-9 input[type="text"],
#wpforms-form-9 input[type="email"],
#wpforms-form-9 textarea {
	padding-left: 35px !important;
}

#wpforms-form-9 .wpforms-field .wpforms-field-label {
	position: relative;
}

#wpforms-form-9 .wpforms-field .wpforms-field-label:before,
#wpforms-form-9 .wpforms-field .wpforms-field-row-block:before {
	position: absolute;
	left: 10px;
	top: 32px;
	z-index: 99999;
	color: #757575;
	font-size: 17px;
	opacity: 0.3;
}

#wpforms-9-field_0-container .wpforms-field-label:before,
#wpforms-9-field_1-container .wpforms-field-label:before,
#wpforms-9-field_2-container .wpforms-field-label:before {
	font-family: "Font Awesome 5 Free";
}

#wpforms-9-field_0-container .wpforms-field-label:before {
	content: '\f007';
}

#wpforms-9-field_1-container .wpforms-field-label:before {
	content: '\f0e0';
}

#wpforms-9-field_2-container .wpforms-field-label:before {
	content: '\f086';
}

Die Teile dieses Schnipsels, die Sie anpassen müssen, sind wie folgt:

• Ändern Sie die Nummer in #wpforms-form-9 in die ID des Formulars, zu dem Sie Ihre Icons hinzufügen möchten. Sie finden diese ID in der Kurzcode Ihres Formulars, wie früher in diesem Tutorial beschrieben.
• Ersetzen Sie wpforms-9-field_0-container und die anderen Feld-IDs im obigen Schnipsel durch die Feld-IDs Ihres eigenen Formulars. Sie müssen die vollständige Feld-ID verwenden, wie im vorherigen Abschnitt dieses Artikels beschrieben.
• Ersetzen Sie die Unicodes im obigen Schnipsel (f007, f0e0 und f086) durch die Unicodes der Font Awesome Icons, die Sie verwenden möchten.

Unser Beispiel-Snippet fügt Icons zu drei Feldern in unserem Formular hinzu. Sie können Icons zu weiteren Feldern hinzufügen, indem Sie die Zeile #wpforms-9-field_0-container .wpforms-field-label:before, wiederholen und Ihre eigenen Formular- und Feld-IDs hinzufügen.

Wiederholen Sie dann die letzte Zeile des Snippets und ersetzen Sie die dortige Feld-ID durch Ihre eigene.

Sie können diese Zeilen auch entfernen, um Icons zu weniger Feldern in Ihrem Formular hinzuzufügen.

Schließlich können Sie, wenn Sie das Aussehen Ihrer Icons ändern möchten, deren Positionierung, Farbe, Größe und Deckkraft anpassen, indem Sie die Werte in den folgenden Zeilen ändern:

position: absolute; 
left: 10px; 
top: 32px; 
z-index: 99999; 
color: #757575; 
font-size: 17px; 
opacity: 0.3;

Auf der Frontend-Seite sieht unser Beispiel so aus:

Icons in HTML-Feldern anzeigen

Das Hinzufügen von Icons zu HTML-Feldern ist die einfachste Option und erfordert kein benutzerdefiniertes CSS.

Alles, was Sie brauchen, ist ein einfaches Shortcode innerhalb des HTML-Feldes. Als Beispiel hier der Shortcode, den wir für das Papierflieger-Icon benötigen, das wir für mehrere unserer obigen Beispiele verwendet haben:

[icon name="paper-plane"]

Um dies für ein anderes Icon anzupassen, müssen Sie nur den Namen von der spezifischen Icon-Seite in Font Awesome kopieren. Der Icon-Name steht in großer Schrift oben auf der Seite.

Ersetzen Sie dann paper-plane im obigen Shortcode durch den Namen des Icons, das Sie verwenden möchten.

Auf der Frontend-Seite könnte ein Icon in einem HTML-Feld etwa so aussehen:

In einem HTML-Feld können Sie auch zusätzlichen Text oder HTML um den Icon-Shortcode herum hinzufügen, wenn Sie möchten. Weitere Details finden Sie in unserem vollständigen Tutorial zum HTML-Feld.

Icons zu Submit-Buttons hinzufügen

Das letzte Beispiel, das wir in diesem Tutorial teilen, ist, wie man ein Icon zum Submit-Button Ihrer Formulare hinzufügt.

Hier ist das Snippet, das Sie benötigen:

.wpforms-form button[type=submit]:before {
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and button text */
}

Wie bei den anderen Beispielen in diesem Artikel stellen Sie sicher, dass Sie die Unicode-Zeichen für Ihr gewünschtes Icon ersetzen und den Rand ändern, wenn Sie möchten.

Auf der Frontend-Seite wird Ihr Submit-Button-Icon diesem hier ähneln:

Symbole auf der rechten Seite platzieren

Wenn Sie Icons auf der rechten Seite eines Elements platzieren möchten, anstatt auf der linken, können Sie :after anstelle von :before verwenden. Um beispielsweise das Papierflieger-Icon auf der rechten Seite des Submit-Buttons zu platzieren, können Sie den folgenden Code-Snippet verwenden:

.wpforms-form button[type=submit]:after {
content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
font-family: "Font Awesome 5 Free";
margin-right: 10px !important; /* Distance between icon and button text */
}

Das obige Snippet platziert das Icon rechts neben Ihrem Submit-Button:

Das war's! Sie können nun Icons zu verschiedenen Elementen in Ihren Formularen hinzufügen.

Möchten Sie das Aussehen Ihrer Formulare durch ein Hintergrundbild anpassen? Sehen Sie sich unser Tutorial an, wie Sie Hintergrundbilder mit CSS zu Ihren Formularen hinzufügen.