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.
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/reset
or/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/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.
Keywords
Forgot password, change password, reset password, new password, etc.
Comments
0 comments
Please sign in to leave a comment.