00 Days
00 Hrs
00 Mins
00 Secs
Expired
Get a flat 19% discount today. Use Coupon Code
OFFEREND19

How to Create Elementor Reset Password Form?

 

wordpress default password reset page style

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

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

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

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

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

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]
 

Table of Contents

Leave a Reply

Your email address will not be published. Required fields are marked *