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
7 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 Hamra
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 Hamra
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-
Please sign in to leave a comment.