Enhanced Stepper Form - Copy this Html, Bootstrap Component to your project
Migliora lo stile di questa pagina <!DOCTYPE html> <html lang="it"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Stepper Form Confronta la tua bolletta</title> <! Bootstrap 5 CSS > <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <style> body { background color: #f3f4f6; font family: Arial, sans serif; } .step { display: none; } .step.active { display: block; } .stepper { display: flex; justify content: space between; margin bottom: 30px; } .stepper .step indicator { width: 40px; height: 40px; border radius: 50%; background color: #e0e0e0; color: white; display: flex; align items: center; justify content: center; transition: background color 0.3s; } .stepper .active indicator { background color: #3b82f6; } .btn primary { background color: #3b82f6; border: none; } </style> </head> <body> <div class="container mt 5"> <! Stepper Navigation > <div class="stepper mb 5"> <div class="step indicator active indicator" id="indicator step 1">1</div> <div class="step indicator" id="indicator step 2">2</div> <div class="step indicator" id="indicator step 3">3</div> <div class="step indicator" id="indicator step 4">4</div> </div> <! Step 1: Anagrafica > <div class="step active" id="step 1"> <h4>Compara la tua bolletta</h4> <div class="mb 4"> <label>Hai la partita IVA?</label><br> <input type="radio" name="vat" value="yes" id="vatYes"> Sì <input type="radio" name="vat" value="no" id="vatNo"> No </div> <div class="mb 4"> <label>Hai già un contratto di LUCE attivo?</label><br> <input type="radio" name="contract" value="yes" id="contractYes"> Sì <input type="radio" name="contract" value="no" id="contractNo"> No </div> <button class="btn btn primary" onclick="nextStep()">Avanti</button> </div> <! Step 2: Questionario > <div class="step" id="step 2"> <div id="companyFields" class="hidden"> <h5>Dati Aziendali</h5> <input type="text" class="form control mb 3" placeholder="Ragione Sociale"> <input type="text" class="form control mb 3" placeholder="Partita IVA"> <input type="text" class="form control mb 3" placeholder="Indirizzo Azienda"> <input type="email" class="form control mb 3" placeholder="PEC"> <input type="text" class="form control mb 3" placeholder="Codice SDI"> </div> <h5>Dati Personali</h5> <input type="text" class="form control mb 3" placeholder="Nome"> <input type="text" class="form control mb 3" placeholder="Cognome"> <input type="tel" class="form control mb 3" placeholder="Telefono"> <input type="email" class="form control mb 3" placeholder="Email"> <button class="btn btn secondary" onclick="prevStep()">Indietro</button> <button class="btn btn primary" onclick="nextStep()">Avanti</button> </div> <! Step 3: Consumo > <div class="step" id="step 3"> <h5>Consumo</h5> <input type="number" class="form control mb 3" placeholder="Kwh consumati"> <input type="number" class="form control mb 3" placeholder="Spesa bolletta (€)"> <button class="btn btn secondary" onclick="prevStep()">Indietro</button> <button class="btn btn primary" onclick="nextStep()">Avanti</button> </div> <! Step 4: Offerte > <div class="step" id="step 4"> <h5>Offerte disponibili</h5> <button class="btn btn success">Seleziona Offerta</button> <button class="btn btn secondary" onclick="prevStep()">Indietro</button> </div> </div> <script> let currentStep = 1; function nextStep() { document.getElementById(`step ${currentStep}`).classList.remove('active'); document.getElementById(`indicator step ${currentStep}`).classList.remove('active indicator'); currentStep++; document.getElementById(`step ${currentStep}`).classList.add('active'); document.getElementById(`indicator step ${currentStep}`).classList.add('active indicator'); } function prevStep() { document.getElementById(`step ${currentStep}`).classList.remove('active'); document.getElementById(`indicator step ${currentStep}`).classList.remove('active indicator'); currentStep ; document.getElementById(`step ${currentStep}`).classList.add('active'); document.getElementById(`indicator step ${currentStep}`).classList.add('active indicator'); } </script> <! Bootstrap 5 JavaScript > <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
