Hinzufügen von Symbolen zu Ihren WordPress-Formularen

Möchten Sie Ihre Formulare mit Symbolen versehen? Symbole können eine gute Möglichkeit sein, den Zweck eines Feldes visuell zu unterstreichen und Ihre Formulare individueller aussehen zu lassen.

In diesem Tutorial erfahren Sie, wie Sie Icons von Font Awesome zu Ihren Formularen hinzufügen können.

---

Hinzufügen von Font Awesome zu Ihrer Website

Der erste Schritt besteht darin, die Symbolbibliothek von Font Awesome zu Ihrer Website hinzuzufügen. Font Awesome ist eine großartige Option für das Hinzufügen von Symbolen zu Ihren Formularen, da die Symbole als Schriftart fungieren und die gleiche Farbe und Größe wie die anderen Schriftarten auf Ihrer Website annehmen.

Es gibt viele Möglichkeiten, die Font Awesome Icon-Bibliothek 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 im WPBeginner-Leitfaden zum Hinzufügen von Icon-Schriften zu WordPress.

Um die Dinge einfach zu halten, werden wir das Plugin Better Font Awesome verwenden. Es ist ein kostenloses WordPress-Plugin, das die für die Verwendung von Font Awesome-Symbolen erforderlichen Ressourcen zu Ihrer Website hinzufügt.

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

Auswählen eines Symbols von Font Awesome

Sobald Sie die Möglichkeit haben, Font Awesome auf Ihrer Website zu verwenden, können Sie sich auf die Suche nach den Symbolen machen, die Sie in Ihren Formularen verwenden möchten.

Achten Sie auf der Seite des Symbols, das Sie verwenden möchten, auf den Unicode-Wert, der direkt unter dem Namen des Symbols angezeigt wird.

In der obigen Abbildung lautet der Unicode f1d8.

Notieren Sie sich den Unicode für jedes Symbol, das Sie in Ihren Formularen verwenden möchten, da Sie ihn später in Ihre benutzerdefinierten CSS-Snippets einfügen müssen.

Hinzufügen von Symbolen zu Ihren Formularen

Es gibt verschiedene Möglichkeiten, wie Sie Symbole in Ihre Formulare einbauen können. Nachfolgend finden Sie einige Beispiele, aber bevor Sie sich mit ihnen beschäftigen, sollten Sie einige Dinge beachten.

Zunächst müssen Sie für fast alle der unten aufgeführten Beispiele benutzerdefinierte CSS zu Ihrer WordPress-Website hinzufügen. Einzelheiten dazu finden Sie in der Schritt-für-Schritt-Anleitung von WPBeginner zum Hinzufügen von benutzerdefiniertem CSS zu Ihrer Website.

Außerdem 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.

Anzeige von Symbolen vor Formulartiteln

Um ein Symbol vor dem Titel Ihres Formulars einzufügen, müssen Sie ein benutzerdefiniertes CSS erstellen, das das Symbol für Sie einfügt. Dieses CSS wird etwas anders aussehen, je nachdem, ob Sie das Symbol vor den Titeln aller WPForms auf Ihrer Website oder nur vor einem bestimmten Formular einfügen möchten.

Hinzufügen eines Symbols zu allen Formulartiteln

Das CSS zur Anzeige eines Symbols vor allen Formulartiteln ist einfach, weil es allgemeiner ist. Hier ist das CSS-Snippet, das 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 */
}

Es gibt ein paar Zeilen in diesem Snippet, die Sie anpassen müssen. Beachten Sie zunächst, dass der Font Awesome-Unicode für das von uns gewählte Symbol nach content:.

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

Dieses CSS enthält auch einen rechten Rand von 10 Pixeln. Ohne diesen Abstand gäbe es keinen Platz zwischen dem Symbol und dem Titel des Formulars. Sie können diese Zahl auf die von Ihnen gewünschte Größe anpassen.

Auf dem Frontend sieht dieses Beispiel wie folgt aus:

Hinzufügen eines Symbols zum Titel eines bestimmten Formulars

Anstatt das gleiche Symbol zu den Titeln aller Formulare auf Ihrer Website hinzuzufügen, können Sie spezifischere CSS verwenden, um ein einzelnes Formular zu kennzeichnen.

Dazu müssen Sie die eindeutige ID-Nummer für das Formular finden, dessen Titel Sie ein Symbol hinzufügen möchten.

Die ID eines Formulars finden Sie in seinem Shortcode, den Sie unter WPForms " All Forms in der Spalte Shortcode einsehen können.

Wir werden die ID-Nummer 30 verwenden, um unser CSS spezifischer zu gestalten. Hier ist das CSS, das nur ein Symbol vor dem Titel des identifizierten Formulars hinzufügen wird:

#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 allen Formulartiteln auf Ihrer Website Icons hinzufügt. Der einzige Unterschied ist, dass wir Folgendes hinzugefügt haben #wpforms-form-30so dass dieser Stil nur noch für dieses eine Formular gilt.

Für Ihr eigenes Formular müssen Sie lediglich die Formular-ID-Nummer ändern und den Unicode für das gewünschte Symbol ersetzen, wie im obigen Abschnitt beschrieben.

Anzeigen von Symbolen vor Feldbezeichnungen

Sie können mithilfe eines anpassbaren CSS-Snippets ein Symbol vor jeder Feldbeschriftung in Ihren Formularen einfügen. Der Code, den Sie hinzufügen müssen, ändert sich geringfügig, je nachdem, ob Sie ein Symbol für alle Feldbeschriftungen auf Ihrer Website verwenden möchten oder ob Sie ein Symbol vor einer bestimmten Feldbeschriftung anzeigen möchten.

Hinzufügen eines Symbols zu allen Feldbeschriftungen

Die Anzeige eines Symbols vor allen Feldbezeichnungen auf Ihrer Website erfordert ein ähnliches CSS-Snippet wie das oben beschriebene für Formulartitel:

.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 den Unicode im obigen Ausschnitt durch den des gewünschten Symbols ersetzen. Sie können auch die Größe des Randes an Ihre Vorlieben anpassen.

Am Frontend sollten Ihre Feldbeschriftungssymbole etwa so aussehen:

Hinzufügen eines Symbols zur Beschriftung eines bestimmten Feldes

Es kann sein, dass Sie nicht wollen, dass das gleiche Symbol neben jedem Feld erscheint. Um nur ein einzelnes Feld zu markieren, muss der CSS-Schnipsel spezifischer gestaltet werden, indem die eindeutige ID des Feldes angegeben wird, dessen Beschriftung Sie ein Symbol hinzufügen möchten.

Dieser Ansatz ähnelt sehr der oben beschriebenen Ausrichtung auf den Titel eines einzelnen Formulars.

Um die Feld-ID zu finden, die Sie im Snippet 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 gewünschte Feld und wählen Sie "Prüfen".

Ihr Bildschirm sollte sich teilen, um den Quellcode der Seite anzuzeigen. Vergewissern Sie sich, dass das gesamte Feld, auf das Sie abzielen wollen, hervorgehoben ist (einschließlich der Beschriftung und des Eingabefeldes), und suchen Sie dann die ID.

Für das Feld in der obigen Abbildung lautet die ID wpforms-9-field_0-container.

Hier ist das CSS-Snippet für das Hinzufügen eines Symbols zum Label 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 #gefolgt von der ID, die wir gerade gefunden haben. Jetzt wird unser Symbol nur diesem einen Feld hinzugefügt, ohne dass andere Feldbezeichnungen (in diesem oder einem anderen Formular) geändert werden.

Anzeigen von Symbolen in Eingabefeldern

Anstatt ein Symbol zur Beschriftung eines Feldes hinzuzufügen, können Sie es im Feld selbst anzeigen. Das Code-Snippet, das Sie dafür verwenden müssen, unterscheidet sich ein wenig von den anderen in diesem Lernprogramm, 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 Snippets, die Sie anpassen müssen, sind wie folgt:

• Ändern Sie die Nummer in #wpforms-form-9 auf die ID des Formulars, dem Sie Ihr(e) Symbol(e) hinzufügen möchten. Sie finden diese ID im Shortcode Ihres Formulars, wie beschrieben zu einem früheren Zeitpunkt in diesem Lernprogramm.
• Ersetzen Sie wpforms-9-field_0-container und die anderen Feld-IDs im obigen Ausschnitt mit den Feld-IDs aus Ihrem eigenen Formular. Sie müssen die vollständige Feld-ID verwenden, wie sie im Abschnitt vorheriger Abschnitt dieses Artikels.
• Ersetzen Sie die Unicodes in dem obigen Ausschnitt (f007, f0e0und f086) für die Unicodes der Font Awesome-Symbole, die Sie verwenden möchten.

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

Wiederholen Sie dann die letzte Zeile des Schnipsels, wobei Sie die Feld-ID aus dem Beispiel durch Ihre eigene ersetzen.

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

Wenn Sie schließlich das Aussehen Ihrer Symbole ändern möchten, können Sie deren Position, Farbe, Größe und Deckkraft anpassen, indem Sie die Werte in den folgenden Zeilen ändern:

Position: absolut; 
links: 10px; 
top: 32px; 
z-index: 99999; 
color: #757575; 
Schriftgröße: 17px; 
Deckkraft: 0,3;

Am Frontend sieht unser Beispiel wie folgt aus:

Anzeige von Symbolen in HTML-Feldern

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

Sie müssen lediglich einen einfachen Shortcode in das HTML-Feld einfügen. Hier ist zum Beispiel der Shortcode, den wir für das Papierflugzeug-Symbol benötigen, das wir für mehrere unserer Beispiele oben verwendet haben:

[icon name="paper-plane"]

Um dies für ein anderes Symbol anzupassen, müssen Sie nur den Namen von der Seite des jeweiligen Symbols in Font Awesome kopieren. Der Name des Symbols wird in großem Text am oberen Rand der Seite angezeigt.

Dann ersetzen Sie paper-plane im obigen Shortcode mit dem Namen des Symbols, das Sie verwenden möchten.

Auf dem Frontend könnte ein Symbol in einem HTML-Feld etwa so aussehen:

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

Hinzufügen von Symbolen zu Übermittlungsschaltflächen

Das letzte Beispiel, das wir in diesem Tutorial zeigen, ist das Hinzufügen eines Symbols zur Schaltfläche "Senden" in Ihren Formularen.

Hier ist das benötigte Snippet:

.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 sollten Sie darauf achten, den Unicode durch das gewünschte Symbol zu ersetzen und den Rand zu ändern, falls Sie dies wünschen.

Auf dem Frontend wird das Symbol für die Schaltfläche "Senden" ähnlich aussehen wie dieses:

Platzieren von Symbolen auf der rechten Seite

Wenn Sie die Symbole nicht auf der linken, sondern auf der rechten Seite eines Objekts platzieren möchten, können Sie mit :after anstelle von :before. Um zum Beispiel das Papierflugzeug-Symbol auf der rechten Seite der Schaltfläche "Senden" zu platzieren, können Sie den folgenden Codeausschnitt 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 Symbol rechts neben der Schaltfläche "Senden":

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

Möchten Sie das Aussehen Ihrer Formulare mit einem Hintergrundbild anpassen? In unserem Tutorial erfahren Sie, wie Sie mit CSS Hintergrundbilder zu Ihren Formularen hinzufügen können.