[Code] Create a Single Forgot Password Page

The most simple process for adding a forgot password UI to your site is to place each forgot password form on its own page. If that more simple solution will not work for you, then read on! 

In this article I'll guide you through the process of creating a single forgot password page with all the necessary forms.

We will be using MemberScript 74 to show and hide the forms based on the step we're on. 

Here's a link to clone the project in the video →

1. How this Work

MemberScript 74 works by using a link parameter to target a class name and apply some styling. To use it, you need to wrap each of your forms in a div element with a unique class. I suggest using simple class names like "step1", "step2", and "step3" to keep things straightforward.

2. Linking the Forms

Next, link each of your forms together by entering the current page slug to refresh the page. Update the link parameter so that it targets the next step, for example, "ms-code-target=step-2", and apply the "display:block" styling. Repeat this process for all steps.

3. Adding the Code

To set up the script, go to Member Script #74, copy the code to your clipboard, and paste it in the "Forgot Password" page before the closing body tag. You don't need to make any updates to this code. Next, grab the provided styling (or write your own) and set all your different steps to "display: none" by default. This means they will be hidden by default. The script will then show the form that we need based on the link parameter.

Conclusion

If you have any questions about how this works, feel free to leave a comment. Thanks for reading!