Create a Forgot Password Form (for logged out users)

Article author
Duncan Hamra

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.

password-reset.gif

Page 1 - Forgot Password

  1. Create a new page called Forgot Password.
    forgotpasswordpage.jpg

  2. Add a form element and assign it a data attribute of data-ms-form="forgot-password".

    forgot_password_attributes.jpg

  3. Add an email field with the attribute data-ms-member="email"Screen_Shot_2022-08-02_at_12.13.46_PM.jpg

  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
  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

  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

  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

  4. Set the form redirect to something like /password/success or /password-set.

Page 3 - Success

  1. Create new page with the same name/slug you used in the previous step.

  2. Add some page content to let the member know their password was reset successfully.

  3. 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

Forgot Password Emails

Check out this tutorial to customize the password reset email.

Keywords

Forgot password, change password, reset password, new password, etc.

 

Was this article helpful?

Comments

15 comments

  • Comment author
    Eugenio Keller

    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

    0
  • Comment author
    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?

    0
  • Comment author
    Duncan Hamra

    Eugenio Keller I finished the tutorial + article here. https://docs.memberstack.com/hc/en-us/articles/17980501395483

    0
  • Comment author
    Paweł Mróz

    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

    1
  • Comment author
    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

    0
  • Comment author
    Paweł Mróz

    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 :)

    0
  • Comment author
    Duncan Hamra

    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-

    0
  • Comment author
    Denis

    Hi Duncan-Hamra , 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.

    1
  • Comment author
    Duncan Hamra

    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. 

    0
  • Comment author
    Denis

    Hi Duncan-Hamra

    In several hours trying I found a small error on my part, problem solved

    1
  • Comment author
    Juanca López

    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?

    0
  • Comment author
    Kamila Kucharska
    • Edited

    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.  "

    0
  • Comment author
    Duncan Hamra

    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.

    0
  • Comment author
    Kamila Kucharska

    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"

    0
  • Comment author
    Duncan Hamra

    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

    0

Please sign in to leave a comment.