Back to contents

JetBlocks: How to Create a Reset Password Form

This tutorial will show how to create and style up a WordPress reset password form with the help of the JetBlocks plugin and Elementor page builder.

From this tutorial, you will learn the easiest way of adding a reset password form to any page.

Tutorial requirements:

  • JetBlocks — contains a set of highly functional widgets and navigation elements for better usability;
  • Elementor free — create the necessary sections using the editor, finalize the customization, style it up, and publish it right away.

Add a Reset Password Form to the Page

1 Step — First of all, navigate to the Dashboard > Crocoblock > JetPlugins Settings. Unfold the JetBlocks tab and click on the Widgets & Extensions section.

Make sure that the Reset Password switcher is toggled on.

enabling reset password widget

2 Step — Open the page in the Elementor editor and drag and drop a Reset Password Form widget to a certain section.

reset password form widget

3 Step — Unfold the Forms section in the Content block and input data to the fields. You may provide a custom text or keep the default one.

form settings

4 Step — In the Forms section, you will be able to customize the reset password form text and set the minimum password length.

text redirect

5 Step — A bit below, you will find a Redirect After Password Reset drop-down list where you can choose the needed action. It is possible to redirect a user to the “Home page,” “Static page,” or “Stay on the current page.”

redirect after password reset

Once the last option is selected, there will be a new field bar where you can enter the name of the needed page.

redirect set to a static page

6 Step — Add a login link to your reset password form by enabling the Login link feature. The link will appear after a successful password reset.

The Login page URL field allows selecting a default login page or a static one.

login link

7 Step — Proceed to the Email settings section in the Content tab.

Type a custom Password Form text or keep the default one. You can use the following codes to show the relevant info in the email: Username: {username}, Reset URL: {reset link}.

Below you will find a field for customizing the email subject.

email settings

The email with the reset password link is sent from the default email address. When enabled, the Custom mail sender feature allows you to customize the email address and the sender name.

custom mail sender feature

8 Step — The last section in the Content block is Buttons settings.

Here you can change the Reset button text and Login button text according to your needs.

buttons settings

Style a Reset Password Form

9 Step — Proceed to the Style tab.

Here you will find options for customizing every element of the reset password form. 

Demo messages such as “Your password has been reset” or “That username is not recognized” won’t be visible on the front end until certain conditions are met, e.g., reset successfully or username entered incorrectly.

reset password form styling

Reset Password on the Front End

10 Step — Once you have styled the form, publish it and quit the editor. Open the page you added the form to on the front end.

Please remember that it has to be a real email address for the form to work correctly.

When the user enters the email address or username and hits the “Reset Password” button, a link to create a new password will be sent to the provided email.

reset password form on the front end

That is all for the Reset Password Form creation. You now know how to do it with the help of the JetBlocks WordPress plugin.