Part 2: How to create a Reset Password form with Gravity Forms

We had to create a part 2 to this tutorial “How to create a Forgot/Reset Password form with Gravity Forms”. Please read the first article in order to understand how this process works from start-to-finish.

It is a frequent issue among website users to forget their passwords. As a website owner, it is crucial to incorporate a functionality for password recovery/reset to ensure that users can regain entry to their accounts. Gravity Forms, a well-known WordPress plugin, offers the capability to create personalized forms, including a form specifically designed for Forgot/Reset Password purposes. Utilizing this approach enables users to maintain their frontend forms while aligning them with their unique branding.

In this article, we will guide you through the process of creating the final part of the Forgot/Reset Password form with Gravity Forms by setting up the form to change the password and enable this functionality for the individual user account under-the-hood.

Step 1: read “How to create a Forgot/Reset Password form with Gravity Forms”

The first step is to read part 1 How to create a Forgot/Reset Password form with Gravity Forms.

Step 2: Create the Reset Password form

To make it easier for you, you can download the JSON form and then import it into Gravity Forms. Take note of the new Form ID as we’ll need this later. For your reference, the JSON code is below:

{"0":{"fields":[{"type":"password","id":1,"formId":15,"label":"Password","adminLabel":"","isRequired":true,"size":"large","errorMessage":"","visibility":"visible","inputs":[{"id":"1","label":"Enter Password","name":""},{"id":"1.2","label":"Confirm Password","name":""}],"displayOnly":true,"description":"Hint: The password should be at least twelve characters long. To make it stronger, use upper and lower case letters, numbers, and symbols like ! \" ? $ % ^ & ).","allowsPrepopulate":false,"inputMask":false,"inputMaskValue":"","inputMaskIsCustom":false,"maxLength":"","inputType":"","labelPlacement":"","descriptionPlacement":"above","subLabelPlacement":"","placeholder":"","cssClass":"","inputName":"","noDuplicates":false,"defaultValue":"","enableAutocomplete":false,"autocompleteAttribute":"","choices":"","conditionalLogic":"","productField":"","layoutGridColumnSpan":"","passwordStrengthEnabled":true,"passwordVisibilityEnabled":true,"enableEnhancedUI":0,"layoutGroupId":"9f99f61f","multipleFiles":false,"maxFiles":"","calculationFormula":"","calculationRounding":"","enableCalculation":"","disableQuantity":false,"displayAllCategories":false,"useRichTextEditor":false,"fields":"","checkboxLabel":""}],"button":{"type":"text","text":"","imageUrl":"","width":"auto","location":"bottom","layoutGridColumnSpan":12},"title":"Forgot Password - Reset","description":"","version":"2.7.8","id":15,"markupVersion":2,"nextFieldId":2,"useCurrentUserAsAuthor":true,"postContentTemplateEnabled":false,"postTitleTemplateEnabled":false,"postTitleTemplate":"","postContentTemplate":"","lastPageButton":null,"pagination":null,"firstPageCssClass":null,"labelPlacement":"top_label","descriptionPlacement":"below","subLabelPlacement":"below","requiredIndicator":"text","customRequiredIndicator":"(Required)","cssClass":"","saveButtonText":"Save & Continue","limitEntries":false,"limitEntriesCount":"","limitEntriesPeriod":"","limitEntriesMessage":"","scheduleForm":false,"scheduleStart":"","scheduleEnd":"","schedulePendingMessage":"","scheduleMessage":"","requireLogin":false,"requireLoginMessage":"","enableHoneypot":true,"honeypotAction":"spam","enableAnimation":true,"validationSummary":false,"deprecated":"","saveEnabled":"","save":{"enabled":false,"button":{"type":"link","text":"Save & Continue"}},"scheduleStartHour":"","scheduleStartMinute":"","scheduleStartAmpm":"","scheduleEndHour":"","scheduleEndMinute":"","scheduleEndAmpm":"","notifications":[],"confirmations":[{"id":"64824fa5e79c9","name":"Default Confirmation","isDefault":true,"type":"message","message":"Success! Your password has been reset. You may proceed to login.","url":"","pageId":"","queryString":"","event":"","disableAutoformat":false,"page":"","conditionalLogic":[]}]},"version":"2.7.8"}

Step 3: Add the Reset Password functionality to functions.php

There are three parts to this code.

1. First we need to add a new filter for Gravity Forms to pre-render the form. This will do the initial checking to make sure the reset key is valid.
2. Then we need to add another filter for Gravity Forms to validate the input field before submission. Again, this will check the reset key is valid. We do this because if the user is sitting idle on the page for 5 hours and then finally submits the form, without checking it would allow them to change the password. This step is vital to protect the account.
3. And finally, we need to actually change the password after the form has been submitted.

You can copy/paste the code below into your functions.php or a custom plugin file.

In the code example below, your new form ID is 100 and the password field ID is 1. If you import the form using the JSON file above, you’ll only need to change the Form ID.

// Forgot Password - The password reset form, check for a valid key!
add_filter('gform_pre_render_100', function($form) {
	
	$key = sanitize_text_field($_GET['key']);
	$login = sanitize_text_field($_GET['login']);
	$validation = check_password_reset_key($key, $login);
	$form['limitEntriesMessage'] = 'The link you followed either expired or is invalid.';
	
	if(is_wp_error($validation)) {
		
		$form['limitEntries'] = true;
		
	}
	
	return $form;
	
});

// Let's do some validation of field 1 (the password field) prior to resetting the password
add_filter('gform_field_validation_100_1', function($result, $value, $form, $field) {

	$key = sanitize_text_field($_GET['key']);
	$login = sanitize_text_field($_GET['login']);
	$validation = check_password_reset_key($key, $login);

	if(is_wp_error($validation)) {

        $result['is_valid'] = false;
        $result['message'] = 'The link you followed either expired or is invalid. Please refresh.';
		
	}

	return $result;

}, 10, 5);

// Validation success, let's change the password
add_action('gform_after_submission_100', function($entry, $form) {
	
	$login = sanitize_text_field($_GET['login']);
	$user = get_user_by('login', $login);
		
	if($user) {
	
		wp_set_password(rgar($entry, '1'), $user->ID);
		
	}
	
}, 10, 2);

Step 4: Create a new page and embed the new Gravity Form to this page

In order for users to reset their password, they’ll need public access to this new form you’ve imported (or setup). To do so, simply create a new page and then embed the gravity form to the page. You’ll need to note down the page ID as we’ll use it in the next step for a flawless integration.

Step 5: Change the initial redirect in Part 1

In part one, you added a filter to your functions.php file to the first form after submission. That filter was gform_notification_99 and one line contained part of the code site_url('wp-login.php'). You’ll need to change this part of the code to redirect to your new password reset form by replacing it with get_the_permalink(PAGE_ID) (the page ID you saved in Step 4), once you do that filter may look something like this:

// After forgot password submission
add_filter('gform_notification_99', function($notification, $form, $entry) {

    // Send the forgot password email
    $user = get_user_by('email', rgar($entry, '1'));
    
    if($user->ID)
    {
        $displayName = $user->display_name;
        $reset_link = add_query_arg([
            'key' => get_password_reset_key($user),
            'login' => $user->user_login
        ], get_the_permalink(123456789));

        $notification['message'] = str_replace('{full_name}', $displayName, $notification['message']);
        $notification['message'] = str_replace('{password_link}', $reset_link, $notification['message']);
    }

    return $notification;

}, 10, 3);

Once you’ve changed this filter to redirect to your new password reset form page, the user who receives an email notification about the password reset will be sent to the new form you’ve created and then may proceed to change their password.

Step 5: Test!

The next step is to test the form! This is the most important step. You should get all the way to the confirmation message and the password of the user account will have been reset. Once you do, you know it’s working 100%!