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

11 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

Please sign in to leave a comment.