bootstrap 5 step form wizard using progress bar

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 60px 0;
        }

        .wizard-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }

        .wizard-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .wizard-header h2 {
            font-size: 2rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .wizard-header p {
            color: #7f8c8d;
        }

        /* Progress Steps */
        .progress-steps {
            display: flex;
            justify-content: space-between;
            margin-bottom: 40px;
            position: relative;
        }

        .progress-steps::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            height: 4px;
            background: #e0e0e0;
            z-index: 1;
        }

        .progress-steps::after {
            content: '';
            position: absolute;
            top: 20px;
            left: 0;
            height: 4px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            z-index: 2;
            transition: width 0.3s ease;
        }

        .progress-steps[data-step="1"]::after { width: 0%; }
        .progress-steps[data-step="2"]::after { width: 33.33%; }
        .progress-steps[data-step="3"]::after { width: 66.66%; }
        .progress-steps[data-step="4"]::after { width: 100%; }

        .step {
            position: relative;
            z-index: 3;
            text-align: center;
            flex: 1;
        }

        .step-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #e0e0e0;
            color: #7f8c8d;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-weight: 700;
            transition: all 0.3s ease;
            border: 3px solid white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .step.active .step-circle {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            transform: scale(1.1);
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
        }

        .step.completed .step-circle {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            color: white;
        }

        .step-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: #7f8c8d;
            transition: color 0.3s ease;
        }

        .step.active .step-label {
            color: #667eea;
        }

        .step.completed .step-label {
            color: #43e97b;
        }

        /* Form Steps */
        .form-step {
            display: none;
            animation: fadeIn 0.5s ease;
        }

        .form-step.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .form-label {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 8px;
        }

        .form-control, .form-select {
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            padding: 12px 15px;
            transition: all 0.3s ease;
        }

        .form-control:focus, .form-select:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
        }

        .form-check-input {
            border: 2px solid #e0e0e0;
            width: 20px;
            height: 20px;
        }

        .form-check-input:checked {
            background-color: #667eea;
            border-color: #667eea;
        }

        /* Buttons */
        .wizard-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
        }

        .btn-wizard {
            padding: 12px 35px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-prev {
            background: #e0e0e0;
            color: #555;
            border: none;
        }

        .btn-prev:hover {
            background: #d0d0d0;
            transform: translateX(-5px);
        }

        .btn-next {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
        }

        .btn-next:hover {
            transform: translateX(5px);
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
        }

        .btn-submit {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            color: white;
            border: none;
        }

        .btn-submit:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 20px rgba(67, 233, 123, 0.4);
        }

        /* Success Message */
        .success-message {
            display: none;
            text-align: center;
            padding: 40px;
        }

        .success-message.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }

        .success-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            margin: 0 auto 20px;
        }

        .success-message h3 {
            font-size: 1.8rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .success-message p {
            color: #7f8c8d;
            font-size: 1.1rem;
        }

        @media (max-width: 768px) {
            .wizard-container {
                padding: 30px 20px;
            }

            .step-label {
                font-size: 0.7rem;
            }

            .step-circle {
                width: 35px;
                height: 35px;
                font-size: 0.9rem;
            }
        }
    </style>

    <div class="container">
        <div class="wizard-container">
            <div class="wizard-header">
                <h2>Registration Wizard</h2>
                <p>Complete the steps below to create your account</p>
            </div>

            <!-- Progress Steps -->
            <div class="progress-steps" id="progressSteps" data-step="1">
                <div class="step active" data-step="1">
                    <div class="step-circle">1</div>
                    <div class="step-label">Personal Info</div>
                </div>
                <div class="step" data-step="2">
                    <div class="step-circle">2</div>
                    <div class="step-label">Account Details</div>
                </div>
                <div class="step" data-step="3">
                    <div class="step-circle">3</div>
                    <div class="step-label">Preferences</div>
                </div>
                <div class="step" data-step="4">
                    <div class="step-circle">4</div>
                    <div class="step-label">Confirmation</div>
                </div>
            </div>

            <!-- Form -->
            <form id="wizardForm">
                <!-- Step 1: Personal Info -->
                <div class="form-step active" data-step="1">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">First Name</label>
                            <input type="text" class="form-control" placeholder="John" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Last Name</label>
                            <input type="text" class="form-control" placeholder="Doe" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Email Address</label>
                            <input type="email" class="form-control" placeholder="john.doe@example.com" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Phone Number</label>
                            <input type="tel" class="form-control" placeholder="+1 (555) 123-4567" required>
                        </div>
                    </div>
                </div>

                <!-- Step 2: Account Details -->
                <div class="form-step" data-step="2">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Username</label>
                            <input type="text" class="form-control" placeholder="Choose a unique username" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Password</label>
                            <input type="password" class="form-control" placeholder="Create a strong password" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Confirm Password</label>
                            <input type="password" class="form-control" placeholder="Re-enter your password" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Company Name (Optional)</label>
                            <input type="text" class="form-control" placeholder="Your company name">
                        </div>
                    </div>
                </div>

                <!-- Step 3: Preferences -->
                <div class="form-step" data-step="3">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Account Type</label>
                            <select class="form-select" required>
                                <option value="">Choose account type</option>
                                <option value="personal">Personal</option>
                                <option value="business">Business</option>
                                <option value="enterprise">Enterprise</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Country</label>
                            <select class="form-select" required>
                                <option value="">Select your country</option>
                                <option value="us">United States</option>
                                <option value="uk">United Kingdom</option>
                                <option value="ca">Canada</option>
                                <option value="au">Australia</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Interests</label>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="interest1">
                                <label class="form-check-label" for="interest1">Technology & Innovation</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="interest2">
                                <label class="form-check-label" for="interest2">Business & Marketing</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="interest3">
                                <label class="form-check-label" for="interest3">Design & Creative</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Step 4: Confirmation -->
                <div class="form-step" data-step="4">
                    <div class="row g-3">
                        <div class="col-12">
                            <h5 class="mb-3">Review Your Information</h5>
                            <div class="alert alert-info">
                                <strong>Please review your information before submitting.</strong>
                                <p class="mb-0 mt-2">Make sure all details are correct as they will be used for your account setup.</p>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" id="terms" required>
                                <label class="form-check-label" for="terms">
                                    I agree to the Terms of Service and Privacy Policy
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="newsletter">
                                <label class="form-check-label" for="newsletter">
                                    Subscribe to our newsletter for updates and offers
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <!-- Success Message -->
            <div class="success-message" id="successMessage">
                <div class="success-icon">✓</div>
                <h3>Registration Complete!</h3>
                <p>Your account has been successfully created. Welcome aboard!</p>
                <button class="btn btn-wizard btn-submit mt-3" onclick="location.reload()">Start Over</button>
            </div>

            <!-- Navigation Buttons -->
            <div class="wizard-buttons" id="wizardButtons">
                <button type="button" class="btn btn-wizard btn-prev" id="prevBtn" onclick="changeStep(-1)">Previous</button>
                <button type="button" class="btn btn-wizard btn-next" id="nextBtn" onclick="changeStep(1)">Next</button>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        let currentStep = 1;
        const totalSteps = 4;

        function changeStep(direction) {
            const currentStepElement = document.querySelector(`.form-step[data-step="${currentStep}"]`);
            const inputs = currentStepElement.querySelectorAll('input[required], select[required]');
            
            // Validate current step if moving forward
            if (direction === 1) {
                let isValid = true;
                inputs.forEach(input => {
                    if (!input.value) {
                        input.classList.add('is-invalid');
                        isValid = false;
                    } else {
                        input.classList.remove('is-invalid');
                    }
                });
                
                if (!isValid) return;
            }

            // Update current step
            currentStep += direction;

            // Boundary checks
            if (currentStep < 1) currentStep = 1;
            if (currentStep > totalSteps) {
                submitForm();
                return;
            }

            updateUI();
        }

        function updateUI() {
            // Update form steps
            document.querySelectorAll('.form-step').forEach(step => {
                step.classList.remove('active');
            });
            document.querySelector(`.form-step[data-step="${currentStep}"]`).classList.add('active');

            // Update progress steps
            document.querySelectorAll('.step').forEach(step => {
                const stepNum = parseInt(step.dataset.step);
                step.classList.remove('active', 'completed');
                
                if (stepNum === currentStep) {
                    step.classList.add('active');
                } else if (stepNum < currentStep) {
                    step.classList.add('completed');
                }
            });

            // Update progress bar
            document.getElementById('progressSteps').dataset.step = currentStep;

            // Update buttons
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');

            prevBtn.style.display = currentStep === 1 ? 'none' : 'block';
            
            if (currentStep === totalSteps) {
                nextBtn.textContent = 'Submit';
                nextBtn.classList.remove('btn-next');
                nextBtn.classList.add('btn-submit');
            } else {
                nextBtn.textContent = 'Next';
                nextBtn.classList.remove('btn-submit');
                nextBtn.classList.add('btn-next');
            }
        }

        function submitForm() {
            // Hide form and buttons
            document.getElementById('wizardForm').style.display = 'none';
            document.getElementById('wizardButtons').style.display = 'none';
            document.getElementById('progressSteps').style.display = 'none';
            
            // Show success message
            document.getElementById('successMessage').classList.add('active');
        }

        // Initialize
        updateUI();
    </script>