In this tutorial, we will create a forgotten password flow in Webflow.
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.
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.
Keywords
Forgot password, change password, reset password, new password, etc.
Comments
11 comments
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,
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 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 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 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.
Hi Duncan from Memberstack
In several hours trying I found a small error on my part, problem solved
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?
Please sign in to leave a comment.