Aller au contenu

CRO / Conversion3 min lecture

Comment afficher/masquer le mot de passe dans un input Webflow ?

Apprenez à ajouter un bouton afficher/masquer le mot de passe sur un champ Webflow avec JavaScript.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter un bouton afficher/masquer sur un champ mot de passe dans Webflow.

Exemple

ÉlémentClasseRôle
Input passwordpassword-inputChamp de saisie (type=password)
Bouton togglepassword-toggleBouton œil à côté du champ
Icône visibleicon-showSVG ou texte 'Afficher'
Icône masquéicon-hideSVG ou texte 'Masquer'

1. Créez la structure dans Webflow

Créez un Div contenant un Input de type Password (classe password-input) et un bouton (classe password-toggle) côte à côte. Positionnez le bouton en absolute à droite de l'input si nécessaire.

2. Le script

document.querySelectorAll('.password-toggle').forEach(function(toggle) {
  var input = toggle.closest('div').querySelector('.password-input');
  if (!input) return;
  var show = toggle.querySelector('.icon-show');
  var hide = toggle.querySelector('.icon-hide');
  if (hide) hide.style.display = 'none';

  toggle.addEventListener('click', function() {
    var isPassword = input.type === 'password';
    input.type = isPassword ? 'text' : 'password';
    if (show) show.style.display = isPassword ? 'none' : 'block';
    if (hide) hide.style.display = isPassword ? 'block' : 'none';
  });
});

Variante simplifiée (texte seulement)

Si vous voulez juste un lien texte "Afficher / Masquer" sans icônes :

document.querySelectorAll('.password-toggle').forEach(function(toggle) {
  var input = toggle.closest('div').querySelector('.password-input');
  toggle.addEventListener('click', function() {
    var isPass = input.type === 'password';
    input.type = isPass ? 'text' : 'password';
    toggle.textContent = isPass ? 'Masquer' : 'Afficher';
  });
});

Conclusion

Le password toggle améliore l'UX sur tous les formulaires avec mot de passe. Essentiel sur mobile où la saisie est plus sujette aux erreurs.

Publié le 19 mai 2026

Sandro DA SILVA

Growth Marketer, expert Webflow et touche à tout. Sandro s'occupe des opérations commerciale, veille au bon déroulement des projets et s’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)

Ces tutoriels pourraient vous intéresser

Tutoriels similaires

Voir tout

Vous allez notre collaboration, c’est garanti

Prêt à faire décoller votre activité ?

demander un devis

Let’s f*****G GO !!