Actions Pack

Forget Password?

How to Create Elementor Reset Password Form?

 

wordpress default password reset page style
How to Create Elementor Reset Password Form? 7

Want to hide your WordPress default Reset Password page when users click on the “Lost Your Password” link on Elementor Login Wiget and redirect them to your custom “Password Reset” form? Then Actions Pack is the only solution available in the market that can solve your issue. Now you can easily create a Reset Password page or Popup purely using Elementor, right within your dashboard.

Assuming you have already activated Elementor Pro and Actions Pack, you can customize your password reset form following the steps below: –

1. Create Password Reset Page or Popup

form widget
How to Create Elementor Reset Password Form? 8

Create a WordPress page and edit it with Elementor or you may create a popup using Elementor’s theme builder. Then drag and drop the Elementor pro’s native form widget to your password reset page or popup.

2. Design the Form

create elementor form
How to Create Elementor Reset Password Form? 9

You need to add two form fields:

  1. Username or Email
  2. Password

Note: Password field will be automatically hidden on the frontend and only be visible when users click on the reset-password link sent to their email.

3. Select “Reset Password” Action

reset password action
How to Create Elementor Reset Password Form? 10

After you finish designing your Reset password form, scroll down and select the “Reset Password” action inside the “Actions After Submit” option.

4. Configure “Reset Password” Action

map form fields
How to Create Elementor Reset Password Form? 11

Now you need to map your form fields inside the “Reset Password” Action. Just select the appropriate form fields that you created earlier in step-2. By default, if you complete the mapping of Login ID and Password fields, you are good to go. Later on, we will discuss how to configure reset password through OTP (One Time Password).

From a Designing point of view, you may like to display a “Forgot password” instruction on your Login form. To do that simply drag and drop the heading widget under your login form and link the reset password page or popup.

5. Test your Form

Did you remember, you created a password reset page/popup in step-1, lets say its permalink is “yoursite.com/reset-pass“. Simply open that page in your incognito window and enter an existing user’s email id. Then check your Email, you must have received a password reset link with a message something like below.

image
How to Create Elementor Reset Password Form? 12

Once users click on the link, they will be redirected back to your reset password page. But this time they will not see the Email field. Rather they will see the password field where they can enter the new password and submit.

In the next article, we will see how we can change the default password reset message.

Frequently Asked Questions

Maybe you have removed the shortcode [ap-reset-pass] from your message template. Click on the “Email Settings” and insert the shortcode inside your message box.

Yes! Definitely.

In Actions Pack version 2.0.6, we  introduced two css classes "ap-userid" and "ap-password" that solves your issue. Simply go to the "Advanced Tab" of any widget you want to show or hide and assign either of the classes "ap-userid" or "ap-password".  

Note: You should assign the class "ap-userid" to the widgets that are going to be visible in Password Reset page. Assign the class "ap-password" to the widgets that are going to be visible on the page when user clicks on the reset password link sent to their Email.

E.g say you have two heading widgets  "widget-1" and "widget-2". You want to hide the second widget on your password reset page, So assign "ap-userid" to first widget and "ap-password" to second widget. 

Currently you can send below 3 user fields. Paste the following shortcodes inside your Email or SMS template.

  • [ap-username]
  • [ap-firstname]
  • [ap-lastname]
 

You can add a Redirect action to your Reset Password Form and redirect to wherever you wish?

Table of Contents

6 Responses

  1. i added that shortcode in Email but still cant see Reset Password function in Actions After Submit so cant create a Reset Password page(((

  2. It doesnt work.
    after being redirected back and typing in the password and hitting submit, it doesnt change the password.

  3. Thank you for these instructions. The new classes solves one of the issues I was having.

    1. Is there a way to set a password strength requirement? Currently a user can enter a single letter as their new password.

    2. Is there a way to have a password confirmation field when resetting the password?

    3. When a user resets their password, the confirmation message is identical to when they submit the form to have the reset link sent. Instead of saying “The form was sent successfully” something like “Your password has been reset”. I see where I can customize this message but there’s only the single success message.

  4. Hi
    how can i connect my "wordpress lost password" page to my design page with action pack?
    Actually i design it but in my lost password page i still see wp form.
    you explained:
    "From a Designing point of view, you may like to display a “Forgot password” instruction on your Login form. To do that simply drag and drop the heading widget under your login form and link the reset password page or popup."
    But it not work for me. can you explain more about it?

Leave a Reply

Your email address will not be published.

Kudos!!! You are in the top 100 visitors of the day.

🔥 FLAT 19% DISCOUNT FOR YOU 🔥

00
Hours
00
Minutes
00
Seconds