Multi Step Form

<!DOCTYPE html>
<title>My Example</title>

<div class="form-step active" data-step="1">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" required>
            </div>
        </div>

<div class="form-step" data-step="2">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required>
            </div>
             <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
        </div>
        
        
        <div class="form-step" data-step="3">
            <div class="form-group">
                <label for="newsletter">Newsletter preference?</label>
                <select id="newsletter" name="newsletter">
                    <option value="daily">Daily</option>
                    <option value="weekly">Weekly</option>
                    <option value="monthly">Monthly</option>
                </select>
            </div>
        </div>

<div class="form-buttons">
            <button type="button" class="btn btn-prev" id="prevBtn" disabled>Previous</button>
            <button type="button" class="btn" id="nextBtn">Next</button>
        </div>
    </form>
</div>

function showStep(stepIndex) {
    // Show the active step, hide others
    formSteps.forEach((step, index) => {
        step.classList.toggle('active', index === stepIndex);
    });

// Update progress bar
    progressSteps.forEach((step, index) => {
        step.classList.toggle('completed', index < stepIndex);
        step.classList.toggle('active', index === stepIndex);
    });

// Update buttons
    prevBtn.disabled = stepIndex === 0;
    nextBtn.textContent = (stepIndex === formSteps.length - 1) ? 'Submit' : 'Next';
}

nextBtn.addEventListener('click', () => {
    if (!validateCurrentStep()) return;

if (currentStep < formSteps.length - 1) {
        currentStep++;
        showStep(currentStep);
    } else {
        // Final step reached, submit form manually
        form.submit();
    }
});

prevBtn.addEventListener('click', () => {
    if (currentStep > 0) {
        currentStep--;
        showStep(currentStep);
    }
});

// Initialize
showStep(currentStep);
</script>