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 à être plus personnalisés.

Ce tutoriel explique 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 adoptent la même couleur et la même taille que les autres polices de votre site.

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

Pour simplifier les choses, nous utiliserons le plugin Better Font Awesome. Il s'agit d'un plugin WordPress gratuit qui ajoute à votre site les ressources nécessaires à l'utilisation des icônes Font Awesome.

Lorsque vous êtes prêt, installez le plugin. Vous pourrez passer à l'étape suivante du tutoriel dès qu'il sera 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 à chercher la ou les icônes que vous souhaitez utiliser dans votre ou 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 le suivant f1d8.

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

Ajouter des icônes à vos formulaires

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

Tout d'abord, presque tous les exemples ci-dessous nécessitent l'ajout de CSS personnalisés à votre site WordPress. Pour plus de détails sur la façon de le faire, veuillez consulter le guide étape par étape de WPBeginner sur l'ajout de CSS personnalisés à votre site.

En outre, la famille de polices que vous devez utiliser dans vos extraits CSS dépend de l'utilisation d'une icône gratuite ou payante de Font Awesome.

Affichage d'icônes devant les titres des formulaires

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 voulez que l'icône apparaisse devant les titres de tous les WPForms de votre site, ou seulement d'un formulaire spécifique.

Ajout d'une icône à tous les titres de formulaires

Le CSS permettant d'afficher une icône devant tous les titres de formulaires est simple parce qu'il est plus général. Voici l'extrait de 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 ce snippet que vous devrez personnaliser. Tout d'abord, notez que l'unicode Font Awesome pour l'icône que nous avons choisi est inclus après content:.

Vous pouvez remplacer cette valeur par l'unicode de n'importe quelle autre icône de la bibliothèque de Font Awesome.

Ce CSS inclut également une marge droite de 10 pixels. Sans cette marge, il n'y aurait pas d'espace entre l'icône et le titre du formulaire. Vous pouvez adapter cette marge à 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 des feuilles de style CSS plus spécifiques pour cibler un seul formulaire.

Pour ce faire, vous devez trouver le numéro d'identification unique du formulaire auquel vous souhaitez ajouter une icône.

Vous pouvez trouver l'ID d'un formulaire dans son shortcode, que vous pouvez voir en allant dans WPForms " All Forms et en regardant dans la colonne Shortcode.

Nous utiliserons le numéro d'identification 30 pour rendre notre CSS plus spécifique. Voici le CSS qui ajoutera uniquement une icône 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 formulaires sur votre site. La seule différence est que nous avons ajouté #wpforms-form-30Ainsi, ce style ne s'appliquera plus qu'à ce seul formulaire.

Pour votre propre formulaire, il vous suffit de modifier le numéro d'identification du formulaire et de remplacer l'unicode de l'icône que vous souhaitez utiliser, comme décrit dans la section ci-dessus.

Affichage d'icônes devant les étiquettes de champ

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

Ajout d'une icône à toutes les étiquettes de champ

L'affichage d'une icône devant toutes les étiquettes de champ de 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 */
}

Veillez à 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 en fonction de vos préférences.

Sur la page d'accueil, les icônes des étiquettes de champ doivent ressembler à ceci :

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

Il se peut que vous ne souhaitiez 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'identifiant unique du champ dont vous voulez ajouter une icône à l'étiquette.

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

Pour trouver l'ID du champ que vous devez utiliser dans le snippet, ouvrez votre formulaire sur le frontend, soit sur une page publiée, soit en utilisant l'aperçu du formulaire. Cliquez ensuite avec le bouton droit de la souris 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'ensemble du champ que vous souhaitez cibler est mis en évidence (y compris l'étiquette et la boîte de saisie), puis recherchez l'ID.

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

Voici l'extrait CSS permettant d'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 ce snippet CSS, vous remarquerez que nous avons ajouté un élément #suivi de l'ID que nous venons de trouver. Désormais, notre icône ne sera ajoutée qu'à ce seul champ, sans modifier les libellés des autres champs (dans ce formulaire ou dans tout autre formulaire).

Affichage 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 pour ce faire est assez différent des autres extraits de ce tutoriel, mais il utilise un grand nombre d'éléments identiques :

#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 ce snippet que vous devrez personnaliser sont les suivantes :

• Modifier le numéro dans #wpforms-form-9 à l'ID du formulaire auquel vous souhaitez ajouter vos icônes. Vous trouverez cet identifiant dans le shortcode de votre formulaire, comme suit plus haut dans ce tutoriel.
• Remplacer wpforms-9-field_0-container et les autres ID de champ dans l'extrait ci-dessus avec les ID de champ de votre propre formulaire. Vous devez utiliser l'identifiant complet du champ tel que décrit dans la section section précédente de cet article.
• Remplacer les unicodes dans l'extrait ci-dessus (f007, f0e0et f086) pour les unicodes des icônes Font Awesome que vous souhaitez utiliser.

Notre 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 suivante #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 l'identifiant du champ de l'exemple par le vôtre.

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 ; 
haut : 32px ; 
z-index : 99999 ; 
couleur : #757575 ; 
font-size : 17px ; 
opacité : 0.3 ;

Sur le frontend, notre exemple ressemble à ceci :

Affichage d'icônes dans les champs HTML

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

Il vous suffit d'ajouter un simple shortcode dans le champ HTML. A titre d'exemple, voici le shortcode dont nous aurions besoin pour l'icône de l'avion en papier que nous avons utilisé pour plusieurs de nos exemples ci-dessus :

[icon name="paper-plane"]

Pour l'adapter à une autre icône, il suffit de copier le nom de la page de l'icône en question dans Font Awesome. Le nom de l'icône apparaîtra en gros caractères en haut de la page.

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

Sur le frontend, une icône dans un champ HTML peut ressembler à ceci :

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

Ajout d'icônes aux boutons de soumission

Le dernier exemple que nous partagerons dans ce tutoriel est celui de l'ajout d'une icône au bouton Soumettre de vos formulaires.

Voici l'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, veillez à remplacer l'unicode par l'icône de votre choix et à modifier la marge si vous le souhaitez.

Sur la page d'accueil, l'icône du bouton de soumission ressemblera à celle-ci :

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 plutôt que sur le côté gauche, vous pouvez utiliser l'option :after à la place de :before. Par exemple, pour placer l'icône de l'avion en papier à droite du bouton de soumission, vous pouvez utiliser l'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 */
}

L'extrait ci-dessus placera l'icône à droite de votre bouton d'envoi :

Voilà, c'est fait ! Vous pouvez maintenant ajouter des icônes à divers éléments de vos formulaires.

Vous souhaitez personnaliser l'apparence de vos formulaires en utilisant une image d'arrière-plan ? Consultez notre tutoriel sur l'ajout d'images d'arrière-plan à vos formulaires à l'aide de CSS.