In this tutorial, we will create a forgotten password flow in Webflow. You can also manually reset a member's password in the dashboard.
A) Forgot Password Modal
You can use a pre-build Memberstack modal to allow members to reset forgotten passwords. This option has less design flexibility, but is very easy to add. All you need to do is add a button or link to your project and then apply the data-ms-modal="forgot-password" attribute. That's it!
B) Custom UI
Follow the instructions to create 3 fully customizable pages in Webflow, or clone a project which already has password reset functionality.
Page 1 - Forgot Password
-
Create a new page called Forgot Password.
-
Add a form element and assign it a data attribute of
data-ms-form="forgot-password". -
Add an email field with the attribute
data-ms-member="email" -
Next, set the form redirect to something like
/password/resetor/reset-password. -
Duplicate your Forgot Password page and make sure the slug matches the redirect you set in the previous step.
- 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
-
On your new page, give the form an attribute of
data-ms-form="reset-password". -
Add a text input labeled “Reset code” and give it a data attribute of
data-ms-member="token". -
Add a type password input with a data attribute of
data-ms-member="password". - Set the form redirect to something like
/password/successor/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.
Forgot Password Emails
Check out this tutorial to customize the password reset email.
Keywords
Forgot password, change password, reset password, new password, etc.
Comments
15 comments
Hi,
Can logged in users change their password without entering their current password? I would like to have only 2 inputs: "new password" and "confirm new password".
In my case, I omitted the password reset module because the user who forgot the password can log in "passwordless". Therefore, I would like to enable him to change the password in the customer panel to a new one. Currently, the "current password" field prevents me from doing this because such a user doesn't know their password.
Duncan from Memberstack
Hi Duncan from Memberstack , i don't know if it's my error but i don't think, i just restyled the forgot password pages and after i put the token and the new password it brings me to a null page 404.
Hi Duncan from Memberstack
In several hours trying I found a small error on my part, problem solved
there's no way to do it within the same page? I mean, instead of moving around to other pages? I've created my own javascript to show/hide the forms, but when the second form arrives (the one of the email to send the code) it automatically jumps to another page (404) that doesn't exist since I haven't placed a success page at that form. I wanted to do it within the same page :( Duncan Hamra
Eugenio Keller I'll work on a MemberScript + component to make this possible. It shouldn't be too hard, but I'll need to wait until next week to get started.
Are you trying to merge all three pages into one?
Eugenio Keller I finished the tutorial + article here. https://docs.memberstack.com/hc/en-us/articles/17980501395483
Hi Paweł Mróz, yes indeed! Here's the type of form you're looking for (Scroll down to Update Password forms).
https://docs.memberstack.com/hc/en-us/articles/7785751124379-Create-Profile-Forms-in-Webflow
Duncan from Memberstack
Yes, I saw this article, but in the case I described, I do not know/remember the current password, so I am not able to change the password. The current password field is redundant for me in this case, but at the same time it makes it impossible to change the password. I guess that the logic for changing the password was created long before you introduced passwordless login :)
Ooooo I see! Thanks for explaining. In that case you can use the forgot password form 👍 This only requires that you have access to the email address.
https://docs.memberstack.com/hc/en-us/articles/7787009388315-Create-a-Forgot-Password-Form-for-logged-out-users-
Hi Denis 👋
Can you share a link to your forgot password pages? I can help test. My guess is that the redirect on one of your forms got changed or removed. But hard to say without further testing.
Hello! Just to check, with this method it means that anyone with the /password/success URL, can access to that page without having to go through the password process, is that right?
I did all like on that page and not working
after when i click reset password is show me pages 404 and when i entry manual to page with code is show me this errror
"We found a data-ms-form data attribute but it is not on a <form> element. Please click "documentation" to see how to debug. "
Kamila Kucharska can you share a few links to your site? I can help you debug once I have access to your login page and forgot password page.
Ok problem resolved for other peoples change Slug in settings pages to direst for next pages. One problem gone .
But on my another pages i give link below have this problem It work fine all the time but now its not work properly but now show me this error
https://www.say-cheese.org/przejdz-do-panelu
Your signup form is missing one of the following attributes:
data-ms-member="password"
data-ms-member="email"
Hi Kamila 👋 Quick video for you. Please change the <form> element into a <div> so that the data-ms-form="signup" attribute goes away. https://www.loom.com/share/626afc2d5e784559a95c1b1c4b022138
Please sign in to leave a comment.