Create a Forgot and Reset Password FormPRO

This knowledge base article relates to the WS Form User Management add-on. Included with the Agency edition or buy separately for other editions.

The WS Form PRO User Management Add-On allows you to create a custom forgot password page which in turn sends an email to the user and leads them to a reset password page. The user can then enter their new password.

WS Form PRO - Forgot and Reset Password Form - Templates

There are three steps to the forgot password process.

  1. The forgot password form is presented to the user. They enter their username or email address into the form and then click the submit button. A confirmation message is shown indicating that an email has been sent to them.
  2. An email is sent to the email address associated with the user identified by the username or email that was entered. The email contains a clickable link to a page containing the reset password form. The link contains a unique key which identifies the user and validates the reset password request. This is done by using a ‘Send Email‘ action on the forgot password form.
  3. The reset password form is presented to the user. They enter a new password twice for confirmation and then click the submit button. WordPress then resets their password and a confirmation message is shown.

This tutorial describes how to build these steps.

Prerequisites

In order to build a custom forgot password process, you will require:

The user management provides the interface between your forms and the WordPress user management functionality.

Creating Forms

You need to create two forms for this process. WS Form PRO has two ready made form templates you can use. To do this:

  1. Click on ‘WS Form’ in the WordPress administration menu.
  2. Click ‘Add New’.WS Form - Add New Form
  3. Click on the ‘User Management’ tab.
  4. Click on the ‘Forgot Password’ template.
  5. In the layout editor, click the ‘Publish‘ button to publish the form so that it is ready for adding to a page.WS Form PRO - Forgot and Reset Password Form - Publish
  6. Repeat this process and create a ‘Reset Password’ form.

Creating Pages

You need to create two pages on your website:

  • Forgot Password
  • Reset Password

To do this:

  1. Click on ‘Pages’ in the WordPress administration menu.
  2. Click ‘Add New’.
  3. Add a title to the page: ‘Forgot Password’.
  4. Use your preferred page builder (e.g. Gutenberg) to add the corresponding form you created to the page. Learn more.
  5. Publish the page.
  6. Repeat this process for the ‘Reset Password’ page.
  7. Copy the permalink (URL) of the ‘Reset Password’ page to your clipboard.

Configuring the Email Link

When the forgot password email link is clicked, we want to ensure the user is linked to the ‘Reset Password’ page that you created above.

To do this:

  1. Click on ‘WS Form’ in the WordPress administration menu.
  2. Edit your ‘Forgot Password’ form.
  3. Click the ‘Actions’ icon at the top of the page. The ‘Actions’ sidebar will open on the side of the page.
  4. Click the ‘Settings’ icon next to the ‘Send Email’ action.WS Form PRO - Forgot and Reset Password Form - Send Email Action Settings
  5. In the settings for the email, scroll down to the ‘Message’ setting.
  6. Change: #user_lost_password_url to #user_lost_password_url("/reset-password-path/"). Replace /reset-password-path/ with  the reset password permalink you copied earlier. You do not need to enter the hostname, WS Form PRO will automatically add that for you.WS Form PRO - Forgotten and Reset Password Form - Send Email Action Settings - Message
  7. Click ‘Save & Close’.
  8. Click ‘Publish’

Your ‘Forgot Password’ form will now send an email containing a link to the ‘Reset Password’ page you created earlier.