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ément | Classe | Rôle |
|---|---|---|
| Input password | password-input | Champ de saisie (type=password) |
| Bouton toggle | password-toggle | Bouton œil à côté du champ |
| Icône visible | icon-show | SVG ou texte 'Afficher' |
| Icône masqué | icon-hide | SVG 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.


