Password Reset Form Template

Allow users to securely update their password with this focused and user-friendly reset form.

This template provides the final step in the "forgot password" flow. It includes a "Confirm New Password" field, along with built-in JavaScript validation to ensure the new passwords match before submission.

Screenshot of a password reset form asking for a new password and a confirmation.

Get Source Code → Preview →

About this Password Reset Form

This form is designed for the page a user lands on after clicking a secure link from a password reset email. Its sole purpose is to allow the user to enter and confirm a new password. The design is minimal to prevent distractions and build user trust during this sensitive process.

Importantly, this template includes a small, dependency-free JavaScript snippet that checks if the "New Password" and "Confirm Password" fields match. If they don't, it prevents the form from being submitted and uses the browser's native validation UI to inform the user.

Features

Client-Side Validation: JavaScript validation ensures passwords match before the user can submit the form.
Focused Design: A simple, single-purpose UI to reduce user confusion.
Security Best Practices: Uses autocomplete="new-password" to help password managers generate and save a strong new password.
Helpful Password Hints: Includes basic HTML5 validation via the pattern attribute to enforce password complexity rules.

Ideal Use Cases

The final step in any "Forgot Password" workflow.
"Change Password" pages within a user's account settings.

Dependencies

None. Uses pure HTML and CSS, with a small, self-contained JavaScript block for validation.

Code

Here's the full code for the password reset form template:

<div class="password-reset-container">
    <div class="reset-form-header">
        <h2>Set a New Password</h2>
    </div>

<form id="passwordResetForm" action="#" method="post">
        <div class="form-group">
            <label for="new-password">New Password</label>
            <input type="password" id="new-password" name="new_password" required 
                   autocomplete="new-password"
                   pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                   title="Must contain at least one number, one uppercase and lowercase letter, and at least 8 or more characters">
            <p class="password-requirements">Must contain at least one number, one uppercase and lowercase letter, and at least 8 or more characters.</p>
        </div>
        
        <div class="form-group">
            <label for="confirm-password">Confirm New Password</label>
            <input type="password" id="confirm-password" name="confirm_password" required autocomplete="new-password">
        </div>
        
        <button type="submit" class="submit-btn">Reset Password</button>
    </form>
</div>

<script>
const resetForm = document.getElementById('passwordResetForm');
const newPassword = document.getElementById('new-password');
const confirmNewPassword = document.getElementById('confirm-password');

resetForm.addEventListener('submit', function(e) {
    if (newPassword.value !== confirmNewPassword.value) {
        confirmNewPassword.setCustomValidity('Passwords do not match.');
        e.preventDefault(); // Stop form submission
    } else {
        confirmNewPassword.setCustomValidity('');
    }
});

// Clear validation message when user types in the confirm field
confirmNewPassword.addEventListener('input', function() {
    this.setCustomValidity('');
});
</script>

View Output