KI-Zusammenfassung
Möchten Sie Bilder vor oder nach Ihren Formularbeschriftungen hinzufügen? Das Hinzufügen von Bildern zu den Beschriftungen kann diese Elemente auf Ihrem Formular hervorheben und mit ein wenig CSS leicht erreicht werden.
In diesem Tutorial führen wir Sie durch die Schritte zum Hinzufügen von Bildern vor und nach Feldbezeichnungen in WPForms.
Erstellen Ihres Formulars
Erstellen Sie zunächst ein neues Formular oder bearbeiten Sie ein vorhandenes, um auf den Formular-Generator zuzugreifen. Für unser Formular haben wir die Formularfelder Name, E-Mail, Telefon, URL, Datei-Upload und Absatz hinzugefügt.
Hintergrundbilder vor den Formularbeschriftungen hinzufügen
Für dieses Tutorial haben wir bereits Bilder für jede dieser Beschriftungen erstellt und sie in die WordPress-Mediathek hochgeladen.
Wenn Sie Hilfe beim Hochladen von SVG-Bildern in WordPress benötigen, lesen Sie bitte dieses Tutorial.
Hinzufügen des CSS
Nun ist es an der Zeit, das CSS hinzuzufügen, das alles zusammenbringt. Wenn Sie Hilfe beim Hinzufügen von CSS zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.
label[for="wpforms-1723-field_1"]::before,
label[for="wpforms-1723-field_2"]::before,
label[for="wpforms-1723-field_3"]::before,
label[for="wpforms-1723-field_4"]::before,
label[for="wpforms-1723-field_6"]::before,
label[for="wpforms-1723-field_5"]::before{
background-repeat: no-repeat;
background-size: 100%;
width: 18px;
height: 20px;
content: " ";
display: inline-block;
background-position: 0px 2px;
margin-right: 10px;
}
label[for="wpforms-1723-field_1"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/avatar.svg);
}
label[for="wpforms-1723-field_2"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/envelope.svg);
}
label[for="wpforms-1723-field_3"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/phone-call.svg);
}
label[for="wpforms-1723-field_4"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/link.svg);
}
label[for="wpforms-1723-field_6"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/upload.svg);
}
label[for="wpforms-1723-field_5"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/chat.svg);
}
Im obigen Ausschnitt zielen wir auf das Formular mit der ID 1723 ab. Sie müssen diese ID aktualisieren, um dem Formular zu entsprechen, dem Sie die Bilder hinzufügen möchten. Wir verwenden das CSS-Element ::before, um den Bereich vor der Beschriftung jedes Feldes anzusprechen.
Der Selektor field_1 zielt auf die Feld-ID ab. Sie müssen diese Werte also aktualisieren, um den Feld-IDs zu entsprechen, die Sie ansprechen möchten.
Hinweis: Jede Formularbeschriftung oben im CSS zielt auf die Feld-IDs ab. Wenn Sie Hilfe beim Auffinden Ihrer Formular- oder Feld-IDs benötigen, sehen Sie bitte dieses Tutorial.
Ersetzen Sie die background-image-URLs durch den Link zu den Bildern, die Sie auf Ihre WordPress-Website hochgeladen haben. Sobald das CSS hinzugefügt wurde, können Sie diese Bilder nun auf Ihrem Formular sehen.
Verwendung eines schriftenbasierten Bildes
Das Hochladen von Bildern auf Ihre Website ist nicht die einzige Möglichkeit, Bilder vor oder nach Feldbezeichnungen anzuzeigen. Sie können diesen Beschriftungen auch ganz einfach ein schriftenbasiertes Symbol hinzufügen.
Für dieses Tutorial haben wir bereits die Schriftfamilie eingerichtet, die wir für diese Symbole verwenden möchten.
Wenn Sie Hilfe bei der Einrichtung dieses Schritts benötigen, sehen Sie bitte dieses Tutorial.
In diesem Tutorial haben wir das WordPress-Plugin für das Font Awesome Plugin verwendet.
label[for="wpforms-1723-field_1"]::before, label[for="wpforms-1723-field_2"]::before, label[for="wpforms-1723-field_3"]::before, label[for="wpforms-1723-field_4"]::before, label[for="wpforms-1723-field_6"]::before,
label[for="wpforms-1723-field_5"]::before{
background-repeat: no-repeat;
background-size: 100%;
width: 18px;
height: 20px;
display: inline-block;
background-position: 0px 2px;
margin-right: 10px;
font-family:"Font Awesome 5 Free";
}
label[for="wpforms-1723-field_1"]::before {
content: "\f007";
}
label[for="wpforms-1723-field_2"]::before {
content: "\f199";
}
label[for="wpforms-1723-field_3"]::before {
content: "\f095";
}
label[for="wpforms-1723-field_4"]::before {
content: "\f35d";
}
label[for="wpforms-1723-field_6"]::before {
content: "\f382";
}
label[for="wpforms-1723-field_5"]::before {
content: "\f086";
}
Bilder nach der Beschriftung hinzufügen
Wenn Sie möchten, dass die Symbole nach der Beschriftung erscheinen, wäre das CSS leicht anders.
label[for="wpforms-1723-field_1"]::after, label[for="wpforms-1723-field_2"]::after, label[for="wpforms-1723-field_3"]::after, label[for="wpforms-1723-field_4"]::after, label[for="wpforms-1723-field_6"]::after,
label[for="wpforms-1723-field_5"]::after{
background-repeat: no-repeat;
background-size: 100%;
width: 18px;
height: 20px;
display: inline-block;
background-position: 0px 2px;
margin-right: 10px;
font-family:"Font Awesome 5 Free";
margin: 0 0 0 5px;
}
label[for="wpforms-1723-field_1"]::after {
content: "\f007";
}
label[for="wpforms-1723-field_2"]::after {
content: "\f199";
}
label[for="wpforms-1723-field_3"]::after {
content: "\f095";
}
label[for="wpforms-1723-field_4"]::after {
content: "\f35d";
}
label[for="wpforms-1723-field_6"]::after {
content: "\f382";
}
label[for="wpforms-1723-field_5"]::after {
content: "\f086";
}
Der einzige Unterschied zu diesem CSS besteht darin, dass Sie ::after anstelle von ::before verwenden und wir dem linken Rand der Beschriftung etwas Abstand hinzugefügt haben.
Das ist alles! Sie haben jetzt gelernt, wie Sie Bilder vor oder nach Ihren Formularbeschriftungen platzieren.
Möchten Sie als Nächstes eine Inhaltsübersicht zu Ihren langen Formularen hinzufügen? Sehen Sie sich das Tutorial So fügen Sie eine Inhaltsübersicht für lange Formulare hinzu an.