← All Features

Password Reset Modal

Password Reset Modal

Password Reset Modal
Who uses Memberstack?

Used by 50,000 Teams & Agencies

Memberstack is used by millions of people every single day.

Components

Start with a free component

Trying out Memberstack features is as easy as copying and pasting one of our 600+ free Webflow components!

View all components

Primary Benefits

Better User Experience

Allow your members to easily recover their account access without needing to contact customer support or create a new account.

Minimise Manual Customer Support

Reduces the need for manual user support in password recovery cases.

How to Create a Password Reset Modal

View Docs

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.

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
Showcase

Explore real businesses who've succeeded with Memberstack

Don't just take our word for it - check out businesses of all sizes who rely on Memberstack for their authentication and payments.

View all success stories
Even Webflow uses Memberstack!
Slack

Want to learn more about Memberstack? Join our 5,500+ member Slack community!

Join the Memberstack community Slack and ask away! Expect a prompt reply from a team member, a Memberstack expert, or a fellow community member.

Join our Slack

View All Features →

Start building

Start building your dreams

Memberstack is 100% free until you're ready to launch - so, what are you waiting for? Create your first app and start building today.