→ 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

7.9k

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

siam form validation
form validation resourse

Author:
Anonymous

3 months ago

179

v.4.6
Restrurant Website
Only for me

Author:
Zahid Hasan Riyad

1 month ago

189

v.5.3
E- Commarce full website

Author:
Zahid Hasan Riyad

1 month ago

217

v.5.3
HTML, CSS, and Bootstrap. This approach will be purely HTML and CSS without any JavaScript.
HTML: Bootstrap Integration: Linked to Bootstrap CDN for styling. Form Structure: Contains input fields for name, email, and message, all within a card component. CSS: Background Gradient: Applied to the body for a visually appealing background. Card Styling: Rounded corners and padding for the card. Button Styling: Custom colors for the submit button, including hover effects. How to Use: Create an index.html file and copy the above code into it. Open the HTML file in your web browser to view the Contact Us form.

Author:
zobaidul kaziex

2 years ago

3.3k

v.4.6
contact us

Author:
java stories story

1 year ago

4k

v.5.3
contact us custom

Author:
java stories story

1 year ago

2.3k

v.5.3
Form Section

Author:
Tanvir fahad

3 months ago

850

v.4.6
yash from
amr from ta keow copy korbe nha .korle tui morog chor

Author:
rimon majumder

3 months ago

187

v.4.6
Contact From Section

Author:
Shahriar Noyon

3 months ago

374

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

5.9k

v.5.3
form-validation
form-validation

Author:
Mustaq hussin

1 month ago

168

v.4.6
Form validation by donald trump
form validation

Author:
Faysal

1 month ago

171

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent