Los formularios multi-step son una excelente opción cuando necesitas recolectar mucha información sin abrumar al usuario. Dividen el proceso en secciones claras y amigables. En esta guía, te enseño cómo hacer un formulario multi-step con JavaScript puro, sin librerías pesadas, 100% personalizable y estéticamente pro.
¿Por qué usar formularios Multi-Step?
- Mejoran la experiencia del usuario.
- Aumentan las conversiones.
- Son ideales para formularios largos (registro, reservas, encuestas).
- Se ven más modernos y limpios.
Tip: Siempre mantén tus formularios simples, visuales y con buena retroalimentación. Aquí puedes ver buenas prácticas de UX para formularios.
Paso a paso para crear tu formulario multi-step con JavaScript
1. Estructura HTML
Primero, define los pasos en contenedores separados, también, estaremos haciendo uso de una barra de progreso, para indicar al usuario el avance:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Formulario Multi-Step</title>
</head>
<body>
<div class="form-wrapper">
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<form id="multiStepForm">
<div class="step active">
<h2>Paso 1</h2>
<input type="text" placeholder="Nombre" required />
<button type="button" class="next">Siguiente</button>
</div>
<div class="step">
<h2>Paso 2</h2>
<input type="email" placeholder="Correo" required />
<button type="button" class="prev">Anterior</button>
<button type="button" class="next">Siguiente</button>
</div>
<div class="step">
<h2>Paso 3</h2>
<input type="password" placeholder="Contraseña" required />
<button type="button" class="prev">Anterior</button>
<button type="submit">Enviar</button>
</div>
</form>
</div>
</body>
</html>
2. Estilos CSS modernos
Agrega estilos para ocultar/mostrar pasos y dar un look moderno:
.step {
display: none;
animation: fadeIn 0.5s ease-in-out;
}
body {
font-family: 'Segoe UI', sans-serif;
background: #f0f0f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 20px;
}
.form-wrapper {
width: 100%;
max-width: 400px;
}
.progress-container {
width: 100%;
height: 8px;
background: #e0e0e0;
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
}
.progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #7e5bef, #ff80bf);
transition: width 0.4s ease;
}
form {
background: white;
padding: 30px;
border-radius: 16px;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.step {
display: none;
animation: fadeIn 0.5s ease-in-out;
}
.step.active {
display: block;
}
input {
width: 90%;
padding: 12px;
margin: 10px 0;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 16px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 8px;
background: #7e5bef;
color: white;
font-weight: bold;
margin: 10px 5px 0 0;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #6749d4;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
3. Lógica JavaScript
Controlamos qué paso mostrar:
const steps = document.querySelectorAll(".step");
const progressBar = document.getElementById("progressBar");
let currentStep = 0;
function showStep(index) {
steps.forEach((step, i) => {
step.classList.toggle("active", i === index);
});
updateProgressBar(index);
}
function updateProgressBar(index) {
const progress = ((index + 1) / steps.length) * 100;
progressBar.style.width = progress + "%";
}
document.querySelectorAll(".next").forEach(button => {
button.addEventListener("click", () => {
if (currentStep < steps.length - 1) {
currentStep++;
showStep(currentStep);
}
});
});
document.querySelectorAll(".prev").forEach(button => {
button.addEventListener("click", () => {
if (currentStep > 0) {
currentStep--;
showStep(currentStep);
}
});
});
document.getElementById("multiStepForm").addEventListener("submit", e => {
e.preventDefault();
alert("¡Formulario enviado con éxito!");
});
Resultado
¿Quieres ver el código completo y jugar con él?
Este es solo el comienzo. Si quieres clonar el proyecto, trastear el código, mejorarlo o usarlo en tu propio sitio, ¡te invito a visitar el repositorio en GitHub! Ahí encontrarás el código actualizado y futuras mejoras.
👉 Explora el repositorio y dale ⭐ si te sirvió
(También acepto PRs, sugerencias y memes de gatitos 🐱)
Conclusión
Crear un formulario multi-step con JavaScript es más fácil de lo que parece y puede hacer una gran diferencia en la experiencia de usuario. Es ideal para apps modernas, procesos de onboarding y cualquier proyecto que necesite fluidez. Puedes mejorar este ejemplo con validaciones por paso, animaciones, barra de progreso o incluso conectar con APIs como Formspree o Netlify Forms.
Si tienes alguna duda o proyecto en mente que quisieras compartir no dudes en contactarme ¡Estaré encantada y feliz de poder ayudarte!
¿Quieres aprender más y llevar tus conocimientos al siguiente nivel?🎓
Si te emocionó este artículo y quieres comenzar YA a aprender más sobre JavaScript te invito a que explores todos los cursos disponibles en Platzi, una de las mejores plataformas de educación online en español. Hay rutas completas para desarrollo móvil, backend, frontend, ¡Y hasta diseño, inglés y marca personal!
👉 Haz clic aquí para entrar con mi link de referido y empieza tu camino pro como developer ¡Obtendrás 1 mes gratis adicional! 🎁 Además, cuando te unes desde ese link también me estarías ayudando a mi también a seguir adquiriendo conocimientos 💖 ¡Gracias mil por eso!
