Résumé IA
Souhaitez-vous ajouter des images avant ou après les étiquettes de votre formulaire ? L'ajout d'images aux étiquettes peut faire ressortir ces éléments avec une touche d'originalité sur votre formulaire, et cela peut être facilement réalisé avec un peu de CSS.
Dans ce tutoriel, nous vous expliquerons comment ajouter des images avant et après les étiquettes de champ dans WPForms.
Création de votre formulaire
Pour commencer, créez un nouveau formulaire ou modifiez-en un existant pour accéder au générateur de formulaires. Pour notre formulaire, nous avons ajouté des champs de formulaire Nom, E-mail, Téléphone, URL, Téléchargement de fichier et Paragraphe.
Ajout de vos images d'arrière-plan avant les étiquettes de formulaire
Pour ce tutoriel, nous avons déjà créé des images pour chacune de ces étiquettes et les avons téléchargées dans la médiathèque WordPress.
Si vous souhaitez de l'aide pour télécharger une image SVG dans WordPress, veuillez consulter ce tutoriel.
Ajout du CSS
Il est maintenant temps d'ajouter le CSS qui rassemblera tout cela. Si vous avez besoin d'aide pour ajouter du CSS à votre site, veuillez consulter ce tutoriel.
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);
}
Dans l'extrait ci-dessus, nous ciblons le formulaire avec l'ID 1723. Vous devrez mettre à jour cet ID pour qu'il corresponde au formulaire auquel vous souhaitez ajouter les images. Nous utilisons l'élément CSS ::before pour cibler la zone avant l'étiquette de chaque champ.
Le sélecteur field_1 cible l'ID du champ. Vous devrez donc mettre à jour ces valeurs pour qu'elles correspondent aux ID de champ que vous souhaitez cibler.
Remarque : Chaque étiquette de formulaire ci-dessus dans le CSS cible les ID de champ. Si vous avez besoin d'aide pour trouver les ID de vos formulaires ou champs, veuillez consulter ce tutoriel.
Remplacez les URL background-image par le lien vers les images que vous avez téléchargées sur votre site WordPress. Une fois le CSS ajouté, vous pouvez maintenant voir ces images sur votre formulaire.
Utilisation d'une image basée sur une police
Télécharger des images sur votre site n'est pas la seule façon d'afficher des images avant ou après les étiquettes de champ. Vous pouvez facilement ajouter une icône basée sur une police à ces étiquettes.
Pour ce tutoriel, nous avons déjà configuré la famille de polices que nous voulons utiliser pour ces icônes.
Si vous souhaitez de l'aide pour cette étape, veuillez consulter ce tutoriel.
Dans ce tutoriel, nous avons utilisé le plugin WordPress pour le plugin Font Awesome.
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";
}
Ajout des images après l'étiquette
Si vous souhaitez que les icônes apparaissent après l'étiquette, le CSS serait légèrement différent.
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";
}
La seule différence avec ce CSS est que vous utilisez ::after au lieu de ::before et nous avons ajouté une marge à gauche de l'étiquette pour un peu d'espacement.
C'est tout ! Vous avez maintenant appris comment placer des images avant ou après les étiquettes de vos formulaires.
Ensuite, souhaitez-vous ajouter une table des matières à vos longs formulaires ? Jetez un œil au tutoriel sur Comment ajouter une table des matières pour les longs formulaires.