← Toutes les caractéristiques
Modale de réinitialisation du mot de passe
Modale de réinitialisation du mot de passe
![Modale de réinitialisation du mot de passe](https://cdn.prod.website-files.com/5c2a9a234fdbba7439c48fa4/64fb83b6195ab1cd380979b3_Screen%20Shot%202023-09-08%20at%202.27.11%20PM.webp)
Copier-coller de composants Webflow
Primary Benefits
Better User Experience
Allow your members to easily recover their account access without needing to contact customer support or create a new account.
Minimise Manual Customer Support
Reduces the need for manual user support in password recovery cases.
How to Create a Password Reset Modal
Follow the instructions to create 3 fully customizable pages in Webflow or clone a project which already has password reset functionality. Check out this tutorial to customize the actual reset email.
You can also manually reset a member's password in the dashboard.
![password-reset.gif](https://cdn.prod.website-files.com/5c2a9a234fdbba7439c48fa4/64662f7c4aeb86bf8d78d2da_password-reset.gif)
Page 1 - Forgot Password
1. Create a new page called Forgot Password.
![forgotpasswordpage.jpg](https://cdn.prod.website-files.com/5c2a9a234fdbba7439c48fa4/64662f7c041260ac141489b5_forgotpasswordpage.webp)
2. Add a form element and assign it a data attribute of data-ms-form="forgot-password".
![forgot_password_attributes.jpg](https://cdn.prod.website-files.com/5c2a9a234fdbba7439c48fa4/64662f7c8e7b3894aba46e61_forgot_password_attributes.webp)
3. Add an email field with the attribute data-ms-member="email"
![Screen_Shot_2022-08-02_at_12.13.46_PM.jpg](https://cdn.prod.website-files.com/5c2a9a234fdbba7439c48fa4/64662f7c7c85ade0c059a6be_Screen_Shot_2022-08-02_at_12.13.46_PM.webp)
4. Next, set the form redirect to something like /password/reset or /reset-password.
5. Duplicate your Forgot Password page and make sure the slug matches the redirect you set in the previous step.
![Screen_Shot_2022-08-02_at_12.15.31_PM.jpg](https://cdn.prod.website-files.com/5c2a9a234fdbba7439c48fa4/64662f7c8e7b3894aba46e3d_Screen_Shot_2022-08-02_at_12.15.31_PM.webp)
6. This form with trigger an email with a 6-digit code. Check out this other guide to customize the reset email.
Page 2 - Reset Password
1. On your new page, give the form an attribute of data-ms-form="reset-password".
![Screen_Shot_2022-08-02_at_12.17.30_PM.jpg](https://cdn.prod.website-files.com/5c2a9a234fdbba7439c48fa4/64662f7c36bd92da4d8830a8_Screen_Shot_2022-08-02_at_12.17.30_PM.webp)
2. Add a text input labeled “Reset code” and give it a data attribute of data-ms-member="token" .
![Screen_Shot_2022-08-02_at_12.18.30_PM.jpg](https://cdn.prod.website-files.com/5c2a9a234fdbba7439c48fa4/64662f7ded874f3217579373_Screen_Shot_2022-08-02_at_12.18.30_PM.webp)
3. Add a type password input with a data attribute of data-ms-member="password".
![Screen_Shot_2022-08-02_at_12.26.20_PM.jpg](https://cdn.prod.website-files.com/5c2a9a234fdbba7439c48fa4/64662f7d89b1e1b97d489606_Screen_Shot_2022-08-02_at_12.26.20_PM.webp)
4. Set the form redirect to something like /password/success or /password-set.
Page 3 - Success
- Create new page with the same name/slug you used in the previous step.
- Add some page content to let the member know their password was reset successfully.
- Add a button that links back to your login page.
⚠️ Once a member creates a new password they will still need to log in.
![Screen_Shot_2022-08-02_at_12.38.15_PM.jpg](https://cdn.prod.website-files.com/5c2a9a234fdbba7439c48fa4/64662f7d5f84185ec7b72f19_Screen_Shot_2022-08-02_at_12.38.15_PM.webp)
Caractéristiques similaires
Contenu hébergé
Hébergez du contenu HTML et des liens directement dans Memberstack, en veillant à ce que votre contenu "hébergé" ne soit accessible qu'aux membres disposant des plans ou autorisations appropriés.
En savoir plusMessages d'erreur et de réussite personnalisés
Vous avez la possibilité de tout concevoir. Y compris les messages d'erreur et de succès que Memberstack affiche lorsqu'un "Email est déjà pris" ou qu'un "Profil a été mis à jour".
En savoir plusPerspectives d'annulation
Collecte des motifs d'annulation auprès des clients via l'interface utilisateur prédéfinie de Stripe.
En savoir plusBibliothèque de composants Webflow
Bibliothèque en constante évolution de plus de 200 composants Webflow personnalisés.
En savoir plusTraduction
Créez votre propre interface utilisateur et définissez le texte dans la langue de votre choix. Traduisez également les pages hébergées, les messages d'erreur et les messages de réussite.
En savoir plusFormulaires personnalisés
Build any form UI in your front-end and connect it to Memberstack attributes for logging in, signing up, profile settings, forgotten passwords and more.
En savoir plus