Create a Forgot Password Form (for logged out users)

Article author
Duncan Hamra
  • Updated

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.

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

Keywords

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

 

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.