Futuristic Styled Multi Step Form - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Futuristic Styled Multi-step Form</title> <style> body { font-family: 'Roboto', sans-serif; background: #0f0c29; background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29); background: linear-gradient(to right, #24243e, #302b63, #0f0c29); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; overflow: hidden; } .form-container { background: rgba(255, 255, 255, 0.1); padding: 30px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); width: 500px; max-width: 100%; transition: all 0.3s ease; overflow: hidden; } .form-container h1 { margin: 0 0 20px; font-size: 24px; text-align: center; color: #fff; } .form-container .form-step { display: none; transition: all 0.3s ease; } .form-container .form-step.active { display: block; } .form-container .form-step input { width: 95%; padding: 15px; margin: 10px 0; border: 2px solid #bbb; border-radius: 5px; background: rgba(255, 255, 255, 0.2); color: #fff; outline: none; } .form-container .form-step .step-icon { font-size: 40px; text-align: center; color: #42a5f5; } .form-container .form-step .emoji { font-size: 35px; text-align: center; color: #42a5f5; } .form-container .form-step .form-controls { text-align: center; margin-top: 20px; } .form-container .form-step .form-controls button { padding: 10px 20px; border: none; border-radius: 5px; background: #42a5f5; color: white; cursor: pointer; transition: background 0.3s ease; } .form-container .form-step .form-controls button:hover { background: #1e88e5; } .form-container .progress-bar { position: relative; display: flex; justify-content: space-between; margin-bottom: 30px; } .form-container .progress-bar .step { width: 20px; height: 20px; background: #bbb; border-radius: 50%; position: relative; } .form-container .progress-bar .step::before { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: inherit; transform: translate(-50%, -50%); border-radius: inherit; transition: background 0.3s ease; } .form-container .progress-bar .step.active::before { background: #42a5f5; } .form-container .progress-bar::after { content: ''; position: absolute; top: 50%; left: 5%; width: 90%; height: 2px; background: #bbb; z-index: -1; } .form-container .progress-bar .step.active + .step::after { background: #42a5f5; } .form-container .form-step .form-controls .prev-btn { background: #666; margin-right: 10px; } .form-container .form-step .form-controls .prev-btn:hover { background: #444; } h2, p{ text-align: center; color: #fff; } </style> </head> <body> <div class="form-container"> <h1>Futuristic Styled Multi-step Form 🌌</h1> <div class="progress-bar"> <div class="step"></div> <div class="step"></div> <div class="step"></div> <div class="step"></div> </div> <form id="futuristic-multi-step-form"> <div class="form-step active"> <div class="step-icon">👤</div> <input type="text" placeholder="First Name" required> <input type="text" placeholder="Last Name" required> <div class="form-controls"> <button type="button" class="next-btn">Next</button> </div> </div> <div class="form-step"> <div class="step-icon">📧</div> <input type="email" placeholder="Email Address" required> <div class="form-controls"> <button type="button" class="prev-btn">Previous</button> <button type="button" class="next-btn">Next</button> </div> </div> <div class="form-step"> <div class="step-icon">🔒</div> <input type="password" placeholder="Password" required> <input type="password" placeholder="Confirm Password" required> <div class="form-controls"> <button type="button" class="prev-btn">Previous</button> <button type="button" class="next-btn">Next</button> </div> </div> <div class="form-step"> <div class="step-icon">✔️</div> <h2>Thank you! 🎉</h2> <p>Your registration is complete.</p> <div class="form-controls"> <button type="button" class="prev-btn">Previous</button> <button type="submit">Submit</button> </div> </div> </form> </div> <script> const nextBtns = document.querySelectorAll('.next-btn'); const prevBtns = document.querySelectorAll('.prev-btn'); const formSteps = document.querySelectorAll('.form-step'); const progressSteps = document.querySelectorAll('.progress-bar .step'); let formStepNum = 0; nextBtns.forEach(btn => { btn.addEventListener('click', () => { formStepNum++; updateFormSteps(); updateProgressbar(); }); }); prevBtns.forEach(btn => { btn.addEventListener('click', () => { formStepNum--; updateFormSteps(); updateProgressbar(); }); }); function updateFormSteps() { formSteps.forEach(formStep => { formStep.classList.contains('active') && formStep.classList.remove('active'); }); formSteps[formStepNum].classList.add('active'); } function updateProgressbar() { progressSteps.forEach((progressStep, idx) => { if (idx <= formStepNum) { progressStep.classList.add('active'); } else { progressStep.classList.remove('active'); } }); } </script> </body> </html>