Ajouter des icônes à vos formulaires WordPress

Souhaitez-vous ajouter des icônes à vos formulaires ? Les icônes peuvent être un excellent moyen de renforcer visuellement l'objectif d'un champ et peuvent aider vos formulaires à paraître plus personnalisés.

Ce tutoriel expliquera comment ajouter des icônes de Font Awesome à vos formulaires.

---

Ajouter Font Awesome à votre site

La première étape consiste à ajouter la bibliothèque d'icônes de Font Awesome à votre site. Font Awesome est une excellente option pour ajouter des icônes à vos formulaires car ses icônes agissent comme une police et adopteront la même couleur et la même taille que les autres polices de votre site.

Il existe de nombreuses façons d'ajouter la bibliothèque d'icônes Font Awesome à votre site, de l'ajout de code à l'en-tête de votre site à l'installation d'un plugin. Pour plus de détails sur chaque option, consultez le guide de WPBeginner sur l'ajout de polices d'icônes à WordPress.

Pour simplifier, nous utiliserons le plugin Better Font Awesome. C'est un plugin WordPress gratuit qui ajoute les ressources nécessaires à l'utilisation des icônes Font Awesome sur votre site.

Lorsque vous êtes prêt, allez-y et installez le plugin. Vous pouvez passer à l'étape suivante du tutoriel dès qu'il est activé.

Choisir une icône de Font Awesome

Une fois que vous avez la possibilité d'utiliser Font Awesome sur votre site, vous pouvez commencer à rechercher les icônes que vous souhaitez utiliser dans vos formulaires.

Sur la page de l'icône que vous souhaitez utiliser, recherchez la valeur unicode affichée juste en dessous du nom de l'icône.

Dans l'image ci-dessus, l'unicode est f1d8.

Notez l'unicode de chaque icône que vous souhaitez utiliser dans vos formulaires, car vous devrez l'inclure dans vos extraits CSS personnalisés plus loin dans ce tutoriel.

Ajouter des icônes à vos formulaires

Il existe plusieurs façons d'intégrer des icônes dans vos formulaires. Nous avons couvert plusieurs exemples ci-dessous, mais il y a quelques points à noter avant de vous y plonger.

Premièrement, presque tous les exemples ci-dessous nécessitent que vous ajoutiez du CSS personnalisé à votre site WordPress. Pour plus de détails sur la façon de procéder, veuillez consulter le guide étape par étape de WPBeginner sur l'ajout de CSS personnalisé à votre site.

De plus, la famille de polices que vous devez utiliser dans vos extraits CSS dépend si vous utilisez une icône gratuite ou payante de Font Awesome.

Afficher des icônes devant les titres de formulaire

Pour ajouter une icône devant le titre de votre formulaire, vous devez créer un CSS personnalisé qui insérera l’icône pour vous. Ce CSS sera légèrement différent selon que vous souhaitiez que l’icône apparaisse devant les titres de tous les formulaires WPForms de votre site, ou d’un seul formulaire spécifique.

Ajouter une icône à tous les titres de formulaire

Le CSS pour afficher une icône devant tous les titres de formulaire est simple car il est plus général. Voici l’extrait CSS dont vous aurez besoin :

.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 */
}

Il y a quelques lignes dans cet extrait que vous devrez personnaliser. Tout d’abord, notez que l’unicode Font Awesome pour l’icône que nous avons choisie est inclus après content:.

Vous pouvez remplacer cette valeur par l’unicode de toute autre icône de la bibliothèque Font Awesome.

Ce CSS inclut également une marge droite de 10 pixels. Sans cela, il n’y aurait pas d’espace entre l’icône et le titre du formulaire. Vous pouvez personnaliser ce nombre à la taille que vous souhaitez.

Sur le frontend, cet exemple ressemble à ceci :

Ajouter une icône au titre d’un formulaire spécifique

Au lieu d’ajouter la même icône aux titres de tous les formulaires de votre site, vous pouvez utiliser un CSS plus spécifique pour cibler un seul formulaire.

Pour ce faire, vous devrez trouver l’identifiant unique du formulaire dont vous souhaitez ajouter une icône au titre.

Vous pouvez trouver un ID de formulaire dans son shortcode, que vous pouvez afficher en allant dans WPForms » Tous les formulaires et en regardant dans la colonne Shortcode.

Nous utiliserons l’ID numéro 30 pour rendre notre CSS plus spécifique. Voici le CSS qui ajoutera une icône uniquement devant le titre du formulaire identifié :

#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 */
}

Ce CSS est presque exactement le même que l’extrait qui ajoutera des icônes à tous les titres de formulaire de votre site. La seule différence est que nous avons ajouté #wpforms-form-30, donc ce style ne s’appliquera qu’à ce formulaire.

Pour votre propre formulaire, vous devrez simplement changer le numéro d’ID du formulaire et remplacer l’unicode de l’icône que vous souhaitez mettre en avant, comme décrit dans la section ci-dessus.

Afficher des icônes devant les étiquettes de champ

Vous pouvez ajouter une icône devant chacune des étiquettes de champ de vos formulaires à l’aide d’un extrait CSS personnalisable. Le code que vous devez ajouter changera légèrement selon que vous souhaitiez utiliser une icône pour toutes les étiquettes de champ de votre site, ou si vous souhaitez afficher une icône devant une étiquette de champ spécifique.

Ajouter une icône à toutes les étiquettes de champ

Afficher une icône devant toutes les étiquettes de champ sur votre site nécessite un extrait CSS très similaire à celui décrit ci-dessus pour les titres de formulaire :

.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 */
}

Assurez-vous de remplacer l'unicode dans l'extrait ci-dessus par celui de l'icône que vous souhaitez utiliser. Vous pouvez également ajuster la taille de la marge selon vos préférences.

Sur le frontend, vos icônes d'étiquettes de champ devraient ressembler à ceci :

Ajouter une icône à l'étiquette d'un champ spécifique

Vous ne voudrez peut-être pas que la même icône apparaisse à côté de chaque champ. Pour cibler un seul champ, l'extrait CSS doit être rendu plus spécifique en incluant l'ID unique du champ dont vous souhaitez ajouter une icône à l'étiquette.

Cette approche est très similaire au ciblage du titre d'un seul formulaire, comme décrit ci-dessus.

Pour trouver l'ID du champ que vous devez utiliser dans l'extrait, ouvrez votre formulaire sur le frontend, soit sur une page publiée, soit en utilisant la prévisualisation du formulaire. Ensuite, faites un clic droit sur le champ que vous souhaitez cibler et choisissez Inspecter.

Votre écran devrait se diviser pour afficher le code source de la page. Assurez-vous que l'intégralité du champ que vous souhaitez cibler est mise en surbrillance (y compris l'étiquette et le champ de saisie), puis recherchez l'ID.

Pour le champ de l'image ci-dessus, l'ID est wpforms-9-field_0-container.

Voici l'extrait CSS pour ajouter une icône à l'étiquette d'un champ spécifique :

.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 */
}

Si vous regardez la première ligne de cet extrait CSS, vous remarquerez que nous avons ajouté un #, suivi de l'ID que nous venons de trouver. Maintenant, notre icône sera ajoutée uniquement à ce champ unique, sans modifier les autres étiquettes de champ (dans ce formulaire ou dans tout autre formulaire).

Afficher des icônes dans les champs de saisie

Plutôt que d'ajouter une icône à l'étiquette d'un champ, vous pouvez l'afficher dans le champ lui-même. L'extrait de code que vous devrez utiliser à cette fin est assez différent des autres dans ce tutoriel, mais il utilise plusieurs des mêmes éléments :

#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';
}

Les parties de cet extrait que vous devrez personnaliser sont les suivantes :

• Changez le nombre dans #wpforms-form-9 pour l'ID du formulaire auquel vous souhaitez ajouter votre/vos icône(s). Vous pouvez trouver cet ID dans le shortcode de votre formulaire, comme décrit plus tôt dans ce tutoriel.
• Remplacez wpforms-9-field_0-container et les autres IDs de champ dans l'extrait ci-dessus par les IDs de champ de votre propre formulaire. Vous devez utiliser l'ID complet du champ tel que décrit dans la section précédente de cet article.
• Remplacez les unicodes dans l'extrait ci-dessus (f007, f0e0 et f086) par les unicodes des icônes Font Awesome que vous souhaitez utiliser.

Notre extrait d'exemple ajoute des icônes à trois champs de notre formulaire. Vous pouvez ajouter des icônes à d'autres champs en répétant la ligne qui dit #wpforms-9-field_0-container .wpforms-field-label:before, et en ajoutant vos propres identifiants de formulaire et de champ.

Répétez ensuite la dernière ligne de l'extrait, en remplaçant votre propre identifiant de champ par celui de l'exemple.

Vous pouvez également supprimer ces lignes pour ajouter des icônes à moins de champs dans votre formulaire.

Enfin, si vous souhaitez modifier l'apparence de vos icônes, vous pouvez ajuster leur positionnement, leur couleur, leur taille et leur opacité en modifiant les valeurs des lignes suivantes :

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

Sur le front-end, notre exemple ressemble à ceci :

Afficher des icônes dans les champs HTML

L'ajout d'icônes aux champs HTML est l'option la plus simple et ne nécessite aucun CSS personnalisé.

Tout ce dont vous aurez besoin est d'ajouter un simple shortcode dans le champ HTML. Par exemple, voici le shortcode dont nous aurions besoin pour l'icône d'avion en papier que nous avons utilisée dans plusieurs de nos exemples ci-dessus :

[icon name="paper-plane"]

Pour ajuster cela pour une icône différente, il vous suffirait de copier le nom de la page de l'icône spécifique dans Font Awesome. Le nom de l'icône sera en gros caractères près du haut de la page.

Remplacez ensuite paper-plane dans le shortcode ci-dessus par le nom de l'icône que vous souhaitez utiliser.

Sur le front-end, une icône dans un champ HTML pourrait ressembler à ceci :

Dans un champ HTML, vous pouvez également ajouter du texte ou du HTML supplémentaire autour du shortcode de l'icône si vous le souhaitez. Pour plus de détails, consultez notre tutoriel complet sur le champ HTML.

Ajouter des icônes aux boutons de soumission

Le dernier exemple que nous partagerons dans ce tutoriel est la façon d'ajouter une icône au bouton de soumission de vos formulaires.

Voici le extrait dont vous aurez besoin :

.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 */
}

Comme pour les autres exemples de cet article, assurez-vous de substituer l'unicode de votre icône souhaitée et de modifier la marge si vous le souhaitez.

Sur le front-end, l'icône de votre bouton de soumission ressemblera à ceci :

Placer les icônes sur le côté droit

Si vous souhaitez placer des icônes sur le côté droit d'un élément au lieu du côté gauche, vous pouvez utiliser :after à la place de :before. Par exemple, pour placer l'icône d'avion en papier sur le côté droit du bouton de soumission, vous pouvez utiliser le extrait de code suivant :

.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 */
}

Le extrait ci-dessus placera l'icône à droite de votre bouton de soumission :

Et voilà ! Vous pouvez maintenant ajouter des icônes à divers éléments de vos formulaires.

Souhaitez-vous personnaliser l'apparence de vos formulaires en utilisant une image d'arrière-plan ? Consultez notre tutoriel sur la façon d'ajouter des images d'arrière-plan à vos formulaires avec CSS.