Afficher le mot de passe de votre champ “password” dans Jetformbuilder

Afficher le mot de passe de votre champ "password" dans votre formulaire Jetformbuilder : Guide complet 

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

  1. 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.
  2. 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');
});
				
			

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.

Vous avez un nouveau projet web à me proposer ?

Dire merci, c'est bien aussi.

Partagez cet article

0
Nous aimerions avoir votre avis, veuillez laisser un commentaire.x

Vous avez une question ?

Vous avez une question sur un article ?
Découvert un bug inexpliqué ? 😱
Ou vous avez des articles à me soumettre ? 🤔
N’hésitez pas à me contacter, je serais ravi de vous aider.

Parce que chaque projet est unique !

Pour une meilleure compréhension, merci de décrire au maximum votre projet, vos besoins, vos attentes…
Vous préférez en parler au téléphone, n’hésitez pas, je suis à votre écoute : 06 35 31 45 64

Tes modifications ont bien été sauvegardées

Bravo !

Vous êtes maintenant inscrit.

Votre réponse a bien été publiée

Votre demande a bien été envoyé, merci.

Le délai de réponse peut varier de 24h à 48h.
Merci de votre compréhension

J'ai besoin d'aide pour mon projet !

Sujet :
Afficher le mot de passe de votre champ “password” dans Jetformbuilder