Multi- Step Form - Copy this Html, Bootstrap Component to your project
<body class="py-5"> <div class="content-wrapper"> <div class="row g-4"> <div class="col-md-4"> <div class="stepper-wrapper_emp"> <div class="step active" data-step="1"> <div class="step-icon"> <i class="bi bi-person-circle"></i> </div> <div class="step-text">Personal Info</div> </div> <div class="step" data-step="2"> <div class="step-icon"> <i class="bi bi-shield-lock"></i> </div> <div class="step-text">Education</div> </div> <div class="step" data-step="2"> <div class="step-icon"> <i class="bi bi-shield-lock"></i> </div> <div class="step-text">Experiance</div> </div> <div class="step" data-step="3"> <div class="step-icon"> <i class="bi bi-shield-lock"></i> </div> <div class="step-text">Security</div> </div> <div class="step" data-step="4"> <div class="step-icon"> <i class="bi bi-bell"></i> </div> <div class="step-text">Allowence</div> </div> <div class="step" data-step="5"> <div class="step-icon"> <i class="bi bi-bell"></i> </div> <div class="step-text">Bond Sign</div> </div> <div class="step" data-step="6"> <div class="step-icon"> <i class="bi bi-bell"></i> </div> <div class="step-text">Photo and Documents</div> </div> <div class="step" data-step="7"> <div class="step-icon"> <i class="bi bi-check-circle"></i> </div> <div class="step-text">Review</div> </div> </div> </div> <div class="col-md-8"> <div class="main-card"> <div class="card-body p-4"> <div class="progress-indicator"> <div class="progress-bar" style="width: 25%"></div> </div> <div class="step-content" id="step1"> <h3 class="mb-4">Personal Information</h3> <div class="row g-4"> <div class="col-md-8"> <label class="form-label">EMP ID</label> <input type="text" class="form-control" placeholder="TTPL0000TT"> </div> <div class="col-md-4 mt-auto"> <button class="btn btn-info" type="submit">Fetch Details</button> </div> <div class="col-md-4"> <label class="form-label">First Name</label> <input type="text" class="form-control" placeholder="John"> </div> <div class="col-md-4"> <label class="form-label">Last Name</label> <input type="text" class="form-control" placeholder="Doe"> </div> <div class="col-md-4"> <label class="form-label">Gender</label> <select class="form-select" name="gender" id="gender"> <option value="male">Male</option> <option value="female">Female</option> <option value="transgender">Transgender</option> </select> </div> <div class="col-md-6"> <label class="form-label">Father First Name</label> <input type="text" class="form-control" placeholder="James"> </div> <div class="col-md-6"> <label class="form-label">Father Last Name</label> <input type="text" class="form-control" placeholder="Doe"> </div> <div class="col-12"> <label class="form-label">Email</label> <input type="email" class="form-control" placeholder="john@example.com"> </div> <div class="col-12"> <label class="form-label">Phone</label> <input type="tel" class="form-control" placeholder="+1 (555) 000-0000"> </div> <div class="col-12"> <label class="form-label">Primery Address</label> <input type="text" class="form-control" placeholder="123 Main Street"> </div> <div class="col-12"> <label class="form-label">Second Address</label> <input type="text" class="form-control" placeholder="Apartment, Suite, etc."> </div> <div class="col-md-4"> <label class="form-label">Village</label> <input type="text" class="form-control" placeholder="Village Name"> </div> <div class="col-md-4"> <label class="form-label">Post Office</label> <input type="text" class="form-control" placeholder="Post Office"> </div> <div class="col-md-4"> <label class="form-label">Sub-District</label> <input type="text" class="form-control" placeholder="Sub-District"> </div> <div class="col-md-12"> <label class="form-label">Police Station</label> <input type="text" class="form-control" placeholder="Police Station"> </div> <div class="col-md-3"> <label class="form-label">Country</label> <select class="form-select"> <option value="">Select Country</option> <option value="us">United States</option> <option value="uk">United Kingdom</option> <option value="ca">Canada</option> </select> </div> <div class="col-md-3"> <label class="form-label">State</label> <select class="form-select"> <option value="">Select State</option> <option value="ny">New York</option> <option value="ca">California</option> <option value="il">Illinois</option> </select> </div> <div class="col-md-3"> <label class="form-label">City</label> <select class="form-select"> <option value="">Select City</option> <option value="new_york">New York</option> <option value="los_angeles">Los Angeles</option> <option value="chicago">Chicago</option> </select> </div> <div class="col-md-3"> <label class="form-label">Pin Code</label> <input type="text" class="form-control" placeholder="Enter Pin Code"> </div> </div> </div> <div class="step-content d-none" id="step2"> <h4 class="mb-4">Security Settings</h4> <div class="mb-4"> <label class="form-label">New Password</label> <input type="password" class="form-control"> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar" role="progressbar" style="width: 0%"></div> </div> </div> <div class="mb-4"> <label class="form-label">Confirm Password</label> <input type="password" class="form-control"> </div> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="2fa"> <label class="form-check-label" for="2fa">Enable Two-Factor Authentication</label> </div> </div> <div class="step-content d-none" id="step3"> <h4 class="mb-4">Notification Preferences</h4> <div class="mb-4"> <div class="d-flex justify-content-between align-items-center mb-3"> <div> <label class="form-check-label h6 mb-0" for="emailNotif">Email Notifications</label> <p class="text-muted small mb-0">Receive updates via email</p> </div> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="emailNotif"> </div> </div> <div class="d-flex justify-content-between align-items-center"> <div> <label class="form-check-label h6 mb-0" for="smsNotif">SMS Notifications</label> <p class="text-muted small mb-0">Get instant alerts via SMS</p> </div> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="smsNotif"> </div> </div> </div> <div class="preview-section"> <h6 class="mb-3">Preview</h6> <div class="notification-preview"> <p class="text-muted mb-0">Your notification settings preview will appear here</p> </div> </div> </div> <div class="step-content d-none" id="step4"> <h4 class="mb-4">Review & Confirm</h4> <div class="summary-card mb-4"> <div class="card-body"> <div class="d-flex justify-content-between align-items-center mb-3"> <h6 class="mb-0">Personal Information</h6> <button class="edit-btn" onclick="goToStep(1)">Edit</button> </div> <p class="text-muted mb-0">John Doe<br>john@example.com<br>+1 (555) 000-0000</p> </div> </div> <div class="summary-card mb-4"> <div class="card-body"> <div class="d-flex justify-content-between align-items-center mb-3"> <h6 class="mb-0">Security Settings</h6> <button class="edit-btn" onclick="goToStep(2)">Edit</button> </div> <p class="text-muted mb-0">Two-Factor Authentication: Enabled</p> </div> </div> <div class="summary-card mb-4"> <div class="card-body"> <div class="d-flex justify-content-between align-items-center mb-3"> <h6 class="mb-0">Notification Preferences</h6> <button class="edit-btn" onclick="goToStep(3)">Edit</button> </div> <p class="text-muted mb-0">Email: Enabled<br>SMS: Disabled</p> </div> </div> </div> <div class="d-flex justify-content-end gap-3 mt-4"> <button class="btn btn-light d-none" id="backBtn" onclick="prevStep()"> <i class="bi bi-arrow-left me-2"></i>Back </button> <button class="btn btn-primary" id="nextBtn" onclick="nextStep()"> Continue<i class="bi bi-arrow-right ms-2"></i> </button> </div> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script> let currentStep = 1; const totalSteps = 4; function updateProgress() { const progress = ((currentStep - 1) / (totalSteps - 1)) * 100; document.querySelector('.progress-bar').style.width = `${progress}%`; } function updateUI(step) { // Update steps document.querySelectorAll('.step').forEach((el, index) => { el.classList.remove('active', 'completed'); if (index + 1 === step) { el.classList.add('active'); } else if (index + 1 < step) { el.classList.add('completed'); } }); // Update content visibility document.querySelectorAll('.step-content').forEach(content => { content.classList.add('d-none'); content.classList.remove('active'); }); const currentContent = document.getElementById(`step${step}`); currentContent.classList.remove('d-none'); currentContent.classList.add('active'); // Update buttons const backBtn = document.getElementById('backBtn'); const nextBtn = document.getElementById('nextBtn'); backBtn.classList.toggle('d-none', step === 1); if (step === totalSteps) { nextBtn.textContent = 'Complete Setup'; nextBtn.classList.remove('btn-primary'); nextBtn.classList.add('btn-success'); nextBtn.innerHTML = 'Complete Setup <i class="bi bi-check-circle ms-2"></i>'; } else { nextBtn.classList.remove('btn-success'); nextBtn.classList.add('btn-primary'); nextBtn.innerHTML = 'Continue <i class="bi bi-arrow-right ms-2"></i>'; } updateProgress(); } function validateStep(step) { let isValid = true; const inputs = document.querySelectorAll(`#step${step} input[required]`); inputs.forEach(input => { if (!input.value.trim()) { isValid = false; input.classList.add('is-invalid'); if (!input.nextElementSibling?.classList.contains('validation-feedback')) { const feedback = document.createElement('div'); feedback.className = 'validation-feedback'; feedback.textContent = 'This field is required'; input.parentNode.insertBefore(feedback, input.nextSibling); } } else { input.classList.remove('is-invalid'); const feedback = input.nextElementSibling; if (feedback?.classList.contains('validation-feedback')) { feedback.remove(); } } }); return isValid; } function nextStep() { if (currentStep < totalSteps && validateStep(currentStep)) { currentStep++; updateUI(currentStep); } else if (currentStep === totalSteps) { // Handle form submission console.log('Form completed!'); // Add your submission logic here } } function prevStep() { if (currentStep > 1) { currentStep--; updateUI(currentStep); } } function goToStep(step) { if (step <= currentStep || validateStep(currentStep)) { currentStep = step; updateUI(step); } } // Password strength checker document.querySelectorAll('input[type="password"]').forEach(input => { input.addEventListener('input', function() { if (this.value.length > 0) { const strength = calculatePasswordStrength(this.value); const progressBar = this.nextElementSibling?.querySelector('.progress-bar'); if (progressBar) { progressBar.style.width = `${strength}%`; progressBar.style.backgroundColor = strength < 33 ? '#dc3545' : strength < 66 ? '#ffc107' : '#198754'; } } }); }); function calculatePasswordStrength(password) { let strength = 0; if (password.length >= 8) strength += 25; if (password.match(/[a-z]/) && password.match(/[A-Z]/)) strength += 25; if (password.match(/\d/)) strength += 25; if (password.match(/[^a-zA-Z\d]/)) strength += 25; return strength; } // Update notification preview document.querySelectorAll('.form-check-input').forEach(input => { input.addEventListener('change', function() { const preview = document.querySelector('.notification-preview'); if (preview) { const emailEnabled = document.getElementById('emailNotif').checked; const smsEnabled = document.getElementById('smsNotif').checked; if (!emailEnabled && !smsEnabled) { preview.innerHTML = '<p class="text-muted mb-0">No notifications enabled</p>'; } else { preview.innerHTML = ` <div class="alert alert-info mb-0"> <small class="d-block mb-1">You will receive notifications via:</small> ${emailEnabled ? '<div class="badge bg-primary me-2">Email</div>' : ''} ${smsEnabled ? '<div class="badge bg-primary">SMS</div>' : ''} </div> `; } } }); }); // Initialize tooltips const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); }); </script> </body> / Step Write the code as per the instructions, not a single code should be removed, also add this (<span class="text-danger">*</span>)