→ 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

516

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

Simple Login form

Author:
Prajwal Hallale

9 months ago

2.8k

v.5.3
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

3 months ago

2.1k

v.4.6
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

3 months ago

2.3k

v.4.6
Simple login form

Author:
Prajwal Hallale

8 months ago

2.7k

v.4.6
Login Form with input field validation, and display error or success messages using only HTML, CSS, and Bootstrap, you can follow this approach.
HTML: Form Structure: Contains fields for username and password with validation attributes (required, minlength). Feedback Messages: Placeholder div for dynamic error messages. CSS: Background Gradient: Applied to the body. Card Styling: Rounded corners and centered layout. Button Styling: Custom colors for the submit button. Validation Styling: Borders and error message styling. JavaScript: Validation Logic: Basic client-side validation to check if fields are empty or meet minimum length requirements. Feedback Messages: Display appropriate error or success messages based on validation.

Author:
zobaidul kaziex

3 months ago

2.2k

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

Author:
Juniper

2 months ago

1.4k

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

3 months ago

232

v.4.6
Contact us form

Author:
Anonymous

8 months ago

2.8k

v.4.6
Search bar
Search bar with icon

Author:
Anonymous

9 months ago

3.2k

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Ankit khedkar

5 months ago

1.4k

v.5.3
Error page template
Modern and clean 404-page template made with Bootstrap

Author:
Anonymous

17 hours ago

9

v.5.3
Simple toast messages example
Four different types of toasts: Success (green) Error (red) Warning (yellow) Info (blue) Auto-dismisses after 3 seconds

Author:
Ankit khedkar

5 days ago

49

v.5.3

Didn't find component you were looking for?

Search from 280+ componenent