Tutorial: How to add an update password form with Bricks

How To
,
1

Hello, the last day, I needed to set up a simple way for users to update their password directly from the website. I figured it might help someone else, so I’m sharing the solution here, it’s fairly straightforward.

Step 1: Create the Bricks form

Start by creating a Bricks form using the “custom” action. Add two fields of type password: one for the new password, and one to confirm it.

Step 2: Identify form and field IDs

To apply the validation, you’ll need the form ID and field names.

  • Open your browser’s developer tools (F12)
  • Inspect the form in the DOM
  • You’ll find the form ID and field names under the name attributes

Step 3: Add this code to your functions.php

This snippet adds validation to the form. Feel free to update the IDs and logic as needed:

add_filter("bricks/form/validate", function ($errors, $form) {
    $form_settings = $form->get_settings();
    $form_fields = $form->get_fields();
    $form_id = $form_fields["formId"];

    if ($form_id != 'vtiwwt') {
        return $errors;
    }

    $new_password = $form->get_field_value('qqxsvs');
    $repeat_password = $form->get_field_value('nvkufi');

    // OWASP-recommended password validation
    if ($new_password !== $repeat_password) {
        $errors[] = 'Passwords do not match.';
    }

    if (strlen($new_password) < 8) {
        $errors[] = 'The password must be at least 8 characters long.';
    }
    if (!preg_match('/[A-Z]/', $new_password)) {
        $errors[] = 'The password must contain at least one uppercase letter.';
    }
    if (!preg_match('/[a-z]/', $new_password)) {
        $errors[] = 'The password must contain at least one lowercase letter.';
    }
    if (!preg_match('/[0-9]/', $new_password)) {
        $errors[] = 'The password must contain at least one number.';
    }
    if (!preg_match('/[^a-zA-Z0-9]/', $new_password)) {
        $errors[] = 'The password must contain at least one special character.';
    }

    return $errors;
}, 10, 2);

Step 4: Set the User’s Password

Once the form is submitted and validated, this second snippet will update the logged-in user’s password:

add_action('bricks/form/custom_action', function ($form): void {
    $form_settings = $form->get_settings();
    $form_fields = $form->get_fields();
    $form_id = $form_fields["formId"];

    if ($form_id != 'vtiwwt') {
        return;
    }

    $new_password = $form->get_field_value('qqxsvs');
    wp_set_password($new_password, get_current_user_id());
});

It’s a relatively simple setup, but hopefully it’ll save someone some time.

Cheers!

1 Like