→ Isaac Winslow
→ Password Reset Form

Password Reset Form

Multi-step password reset form with email verification, code validation, and password strength meter built with Bootstrap 5.3.

This bootstrap css example is contributed by Isaac Winslow, on 24-Nov-2024. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Form

Author Isaac Winslow

v.4.6

Fork Fullscreen

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8">
            <div class="text-center mb-4">
                <h2 class="mb-2">Reset Password</h2>
                <p class="text-muted">Follow the steps to reset your password securely</p>
            </div>

<div class="step-content" id="step1">
                        <h5 class="mb-4">Email Verification</h5>
                        <form>
                            <div class="mb-4">
                                <label class="form-label">Email Address</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                            <i class="fas fa-envelope"></i>
                                        </span>
                                    <input type="email" class="form-control" placeholder="Enter your email">
                                </div>
                                <div class="form-text">We'll send a verification code to this email</div>
                            </div>
                            <button class="btn btn-primary w-100">Send Verification Code</button>
                        </form>
                    </div>

<div class="step-content d-none" id="step2">
                        <h5 class="mb-4">Enter Verification Code</h5>
                        <p class="text-muted mb-4">We've sent a verification code to your email. Please enter it
                            below.</p>
                        <div class="d-flex justify-content-center mb-4">
                            <input type="text" class="verification-input" maxlength="1">
                            <input type="text" class="verification-input" maxlength="1">
                            <input type="text" class="verification-input" maxlength="1">
                            <input type="text" class="verification-input" maxlength="1">
                            <input type="text" class="verification-input" maxlength="1">
                            <input type="text" class="verification-input" maxlength="1">
                        </div>
                        <div class="text-center mb-4">
                            <span class="text-muted">Didn't receive the code? </span>
                            <a href="#" class="text-decoration-none">Resend</a>
                        </div>
                        <button class="btn btn-primary w-100">Verify Code</button>
                    </div>

<div class="step-content d-none" id="step3">
                        <h5 class="mb-4">Create New Password</h5>
                        <form>
                            <div class="mb-4">
                                <label class="form-label">New Password</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                            <i class="fas fa-lock"></i>
                                        </span>
                                    <input type="password" class="form-control" placeholder="Enter new password">
                                    <span class="input-group-text password-toggle">
                                            <i class="fas fa-eye"></i>
                                        </span>
                                </div>
                                <div class="password-strength mt-2">
                                    <div class="strength-meter bg-danger" style="width: 60%"></div>
                                </div>
                            </div>

<div class="mb-4">
                                <label class="form-label">Confirm Password</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                            <i class="fas fa-lock"></i>
                                        </span>
                                    <input type="password" class="form-control" placeholder="Confirm new password">
                                    <span class="input-group-text password-toggle">
                                            <i class="fas fa-eye"></i>
                                        </span>
                                </div>
                            </div>

<div class="mb-4">
                                <h6 class="mb-2">Password Requirements:</h6>
                                <ul class="requirement-list list-unstyled">
                                    <li class="valid">
                                        <i class="fas fa-check-circle me-2"></i>
                                        At least 8 characters
                                    </li>
                                    <li>
                                        <i class="fas fa-circle me-2"></i>
                                        Include uppercase letters
                                    </li>
                                    <li>
                                        <i class="fas fa-circle me-2"></i>
                                        Include special characters
                                    </li>
                                    <li>
                                        <i class="fas fa-circle me-2"></i>
                                        Include numbers
                                    </li>
                                </ul>
                            </div>

<button class="btn btn-primary w-100">Reset Password</button>
                        </form>
                    </div>

<div class="step-content d-none text-center" id="success">
                        <div class="success-checkmark">
                            <i class="fas fa-check"></i>
                        </div>
                        <h5 class="mb-3">Password Reset Successful!</h5>
                        <p class="text-muted mb-4">Your password has been successfully reset. You can now log in
                            with your new password.</p>
                        <a href="#" class="btn btn-primary">Back to Login</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

contact us

Author:
java stories story

1 year ago

4.2k

v.5.3
E-Commarce

Author:
Anonymous

1 month ago

419

v.5.3
siam form validation
form validation resourse

Author:
Anonymous

4 months ago

211

v.4.6
Simple Login form

Author:
Prajwal Hallale

2 years ago

10.1k

v.5.3
Bootstrap Form with Javascript Validation

Author:
User

2 months ago

293

v.4.6
HTML and Bootstrap for Registration Form
HTML: Personal Information Section: Includes fields for full name, email, date of birth, bio, and profile image. Company Information Section: Includes fields for company name, company size (using a dropdown), and location. Submit Button: A button to submit the form. CSS: Background Gradient: Applied to the body. Card Styling: Styled with rounded corners and padding. Button Styling: Custom colors for the submit button. Validation Styling: Highlight invalid fields and display error messages. JavaScript: Validation Logic: Checks if required fields are filled and updates the feedback area with error or success messages. Dynamic Feedback: Updates the form with success or error messages based on validation.

Author:
zobaidul kaziex

2 years ago

9.4k

v.4.6
Form Section

Author:
Tanvir fahad

4 months ago

888

v.4.6
Restrurant Website
Only for me

Author:
Zahid Hasan Riyad

2 months ago

247

v.5.3
Contact section for portfolio with JS validation

Author:
sajid taz

3 months ago

365

v.4.6
Contact From Section

Author:
Shahriar Noyon

4 months ago

413

v.4.6
User Settings Form
form with following sections - Personal Information - Profile Picture - Email Preferences - Account Settings - Change Password - Privacy Settings

Author:
Juniper

1 year ago

6.1k

v.5.3
form-validation
form-validation

Author:
Mustaq hussin

2 months ago

307

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent