How to Customize the WordPress Lost Password Page

In case you’re still using the default WordPress lost password page to let your users reset their password, this is your cue to customize it and take your brand identity another step further (like literally and metaphorically!).

Customizing your lost password page and form is really easy with Fluent Forms, a lot easier than you might think. And in this tutorial, we’ll learn how to do it in 3 simple steps.

Let’s proceed without any delay.

Why customize the WordPress lost password page

This is the WordPress default Lost Password page. Unless you have a custom lost password page, this is where you have to direct your users if they forget their password or want to reset it.

The default lost password page gets the job done. However, a custom lost password page can be really beneficial to your business. 

For one, you can add your brand logo, visual elements relevant to your business, or even just make it creative in general to provide your users with a more personalized experience. 

It also allows you to customize the success/error message and the submit button text. Moreover, you can redirect users to a page of your choosing upon submission.

Now let’s see how to customize the lost password page for your WordPress website.

How to customize the WordPress lost password page

You can direct your users to the lost password page from the default login page or your custom login page. 

In this tutorial, we’ll be using this simple custom login page with 3 components: a custom login form, a link to a custom signup form, and a link to the custom lost password page. I’ve used buttons to insert the links; you can simply add the links to the texts if you prefer.

Now let’s customize the lost password page step-by-step.

1. Create a lost password form

Navigate to Fluent Forms > Add New Form from your dashboard. Select New Blank Form from the options that appear in the pop-up. Add an email field, and make sure the label of the email field is Email.

We’ve also used the custom HTML field to display some text, but this is optional. Lastly, click the Submit button to edit the button text.

Your lost password form is now complete. Click Save Form and note the form’s shortcode.

2. Make a custom landing page

After you save the form, click Settings & Integrations. Navigate to the Landing Page and turn on Enable Form Landing Page Mode. In this step, we’ll design and customize our lost password page visually.

Here you can choose the landing page styles and layout. You can also customize the background color, shadow, etc., and upload a background image, a feature image, and a logo. Moreover, you can add headings and paragraph texts from here if you like. 

Once you’re done customizing your lost password, save the settings and open the share window. Copy the URL.

Now, go back to your login page and paste this URL inside the button or the relevant anchor text.

3. Edit your theme’s functions.php file

Go to Appearance > Themes > Theme File Editor/Editor from your dashboard. From the Theme Files, select the functions.php file. Scroll to the end, add some space, and paste the code to make the lost password page functional.

Take care of the following:

• Replace the form ID in this code with the ID of the lost password form you created in step 1.
• If you want to redirect users somewhere other than your homepage, replace home_url with that page’s URL.
• Your form’s email field label and name attribute must be email to match the email configuration in this code.
• You can also customize the success/error messages and the email body from the code. 

Finally, click Update File, and you’re done. Once users click forgot/lost password from the login page, they’ll land on this custom lost password page.

Once a user enters the email they used to create the account, they’ll receive an email containing the link to a page where they can reset/update their password, like the following.

If the user enters an email that’s already logged in, they’ll be redirected to the home page. If someone enters an email that they didn’t use to create an account/sign up, they’ll receive an error message.

Here’s a link to test the complete process hosted in a sandbox environment.

A lost password page that reflects your brand

Who knew it was this easy to customize the lost password page? Well, now that you do, what are you waiting for? Design your lost password pages effortlessly with Fluent Forms, and show us the amazing ideas you come up with.

If you have any questions, don’t hesitate to knock on our door!

• Facebook
• Instagram
• WordPress
• Twitter
• YouTube