Jetformbuilder est un outil puissant pour créer des formulaires en ligne interactifs.
Cependant, il ne propose pas par défaut la possibilité d’afficher le mot de passe saisi par l’utilisateur. Ce tutoriel vous guidera à travers l’ajout d’un bouton permettant de visualiser le mot de passe dans les champs de type “mot de passe” de Jetformbuilder.
Avantages d'afficher le mot de passe
- Amélioration de la convivialité : Permettre aux utilisateurs de voir leur mot de passe peut les aider à éviter les erreurs de saisie et à améliorer leur expérience utilisateur.
- Accessibilité accrue : Pour les utilisateurs ayant des difficultés de vision, la possibilité d’afficher le mot de passe peut être essentielle pour remplir correctement les formulaires.
- Renforcement de la sécurité : Afficher le mot de passe peut inciter les utilisateurs à choisir des mots de passe plus forts et plus complexes.
Mettre en place l'affichage du mot de passe
- Préparation de l’icône d’affichage de mot de Passe : Tout d’abord, assurez-vous d’avoir une icône pour afficher et masquer le mot de passe. Vous pouvez utiliser n’importe quelle ressource d’icône, mais pour cet exemple, nous utilisons /wp-content/uploads/2024/03/eye.svg pour l’icône visible et /wp-content/uploads/2024/03/hidden.svg pour l’icône masquée. Ces liens proviennent de votre bibliothèque médias de votre WordPress.
- Intégration du script JavaScript : Ajoutez le code JavaScript sur la page de votre formulaire, dans un fichier JS de votre plugin personnalisé ou en utilisant un module d’ajout de codes, à votre site.
Ce script s’attache aux champs de mot de passe et ajoute l’icône d’affichage/masquage du mot de passe. Lorsque l’icône est cliquée, elle bascule entre afficher et masquer le mot de passe.
document.addEventListener('DOMContentLoaded', function() {
// Fonction pour ajouter l'icône et gérer le clic
function ajouterIconeOeil(inputId) {
var passwordInput = document.getElementById(inputId);
if (passwordInput) {
var eyeIcon = document.createElement('img'); // Change 'i' to 'img'
eyeIcon.setAttribute('src', '/wp-content/uploads/2024/03/eye.svg'); // Set the src attribute for the SVG
eyeIcon.style.cssText = 'cursor: pointer; position: absolute; margin-left: -31px; margin-top: 16px;margin-right:9px';
passwordInput.parentNode.style.position = 'relative';
passwordInput.parentNode.insertBefore(eyeIcon, passwordInput.nextSibling);
eyeIcon.addEventListener('click', function() {
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
eyeIcon.setAttribute('src', '/wp-content/uploads/2024/03/hidden.svg'); // Change to the "eye-slash" icon
} else {
passwordInput.type = 'password';
eyeIcon.setAttribute('src', '/wp-content/uploads/2024/03/eye.svg'); // Revert back to the original "eye" icon
}
});
}
}
// Appliquer la fonction aux champs de mot de passe et de confirmation
ajouterIconeOeil('password');
ajouterIconeOeil('password_copy');
});
Ajoutez ce code css dans la personnalisation CSS de WordPress, pour ajuster la taille de l’icon (obligatoire pour Safari)
img[src$=".svg"] {
width: 22px;
height: 22px;
}
Explication du script:
- Le script utilise la fonction addEventListener pour écouter l’événement DOMContentLoaded.
- La fonction ajouterIconeOeil reçoit l’ID du champ de mot de passe en paramètre. (vous devez allez chercher l’id du champ concerné au préalable)
- Si le champ de mot de passe existe, le script crée une icône “oeil” et lui applique le style CSS nécessaire (vous pouvez modifier le CSS directement dans le script).
- L’icône est insérée dans le DOM avant le champ de mot de passe.
- Un écouteur d’événement click est ajouté à l’icône.
- Lorsque l’icône est cliquée, le type du champ de mot de passe est basculé entre “password” et “text”.
- L’icône “oeil” est remplacée par une icône “oeil barré” lorsque le mot de passe est visible.
Voila le résultat
En conclusion
En suivant les étapes détaillées de ce guide complet, vous serez en mesure d’implémenter avec succès la fonctionnalité d’affichage du mot de passe dans vos formulaires Jetformbuilder.