Formulario Bootstrap de varios pasos
Crea un formulario de varios pasos con Bootstrap 5 y sin backend. Mantén todos los campos en un solo formulario, muestra un paso a la vez alternando d-none, y envía una sola vez al final. Copia el markup y añade tu clave de acceso.
Como construirlo
- Crea un formulario en tu panel de Formpaste y copia su clave de acceso.
- Copia el markup y el script de abajo en tu página.
- Reemplaza YOUR_ACCESS_KEY_HERE con tu clave de acceso y publica.
Prompt para tu agente de programación con IA
Give me a Bootstrap 5 multi-step form that POSTs once to https://api.formpaste.com/submit with a hidden access_key input. Show one fieldset at a time by toggling d-none with a few lines of vanilla JavaScript, with Back and Next buttons using btn btn-secondary and btn btn-primary. Make Next validate the visible step with reportValidity before advancing, so a required field hidden by d-none cannot block the final submit. Do not post on every step and do not add a backend.O conecta el servidor MCP de Formpaste con Claude Code, Codex, Cursor, Claude Desktop, VS Code o cualquier cliente mcp-remote. Ver la guía de configuración.
Puntos claves de Bootstrap
Bootstrap le da estilo al formulario, Formpaste lo recibe. Apunta un formulario Bootstrap normal al endpoint de Formpaste, deja la access key oculta, y los envíos llegan a tu bandeja de entrada. No hay plugin, no hay jQuery y no hay backend propio.
Es un formulario normal con clases de Bootstrap
Bootstrap no cambia en nada cómo se envía un formulario. Agrega form-label, form-control y btn btn-primary al markup habitual, apunta el action al endpoint de Formpaste, y el navegador lo envía por POST. Bootstrap solo aporta el estilo.
Los estilos de validación son solo presentación
was-validated, is-invalid e invalid-feedback le dan estilo al formulario en el navegador. No filtran spam ni validan nada en el servidor. Formpaste sigue aplicando su propio filtrado de spam después del post.
Usa los nombres de clase de Bootstrap 5
Bootstrap 5 renombró varias clases de formulario: form-group pasó a ser mb-3, custom-select pasó a ser form-select, y form-control-file pasó a ser form-control. Si estás copiando un snippet viejo de Bootstrap 4, actualiza esos nombres o el estilo no se va a aplicar.
Deja el access_key oculto
Deja el input oculto access_key en su lugar para que Formpaste sepa a qué formulario pertenece el envío. Es un input normal, así que los estilos de Bootstrap lo ignoran.
Que debes acertar
Un formulario, varias pantallas
Un formulario multi-paso es un único envío dividido en pasos dentro de la interfaz. Recoge todos los campos en el estado del cliente y envía el POST una sola vez al final.
Una ruta por paso es opcional
Puedes darle a cada paso su propia URL para soportar el botón de retroceso, o mantenerlo todo en una sola página con estado local. Ambos enfoques envían la misma carga final.
Envía toda la carga de una vez
No hagas un POST en cada paso. Reúne los campos a medida que el usuario avanza y envía una sola petición cuando termine.
Cómo funciona
Tres pasos simples para que los envíos de formularios lleguen a tu bandeja de entrada.
Crea tu formulario, apunta la URL de action al endpoint de Formpaste y añade tu clave de acceso.
Crea tu formulario
Regístrate, verifica tu correo y crea una clave de acceso en tu panel.
Copia el código
Pega el fragmento de arriba en tu proyecto. Elige CSS o Tailwind para que combine con tu sitio.
<form id="form" action="https://api.formpaste.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
<fieldset data-step>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
</fieldset>
<fieldset data-step class="d-none">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
</fieldset>
<fieldset data-step class="d-none">
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" name="message" rows="4"></textarea>
</div>
</fieldset>
<button type="button" id="back" class="btn btn-secondary d-none">Back</button>
<button type="button" id="next" class="btn btn-primary">Next</button>
<button type="submit" id="send" class="btn btn-primary d-none">Submit</button>
</form>
<script>
const steps = document.querySelectorAll("[data-step]");
const back = document.getElementById("back");
const next = document.getElementById("next");
const send = document.getElementById("send");
let step = 0;
function render() {
steps.forEach((s, i) => s.classList.toggle("d-none", i !== step));
back.classList.toggle("d-none", step === 0);
next.classList.toggle("d-none", step === steps.length - 1);
send.classList.toggle("d-none", step !== steps.length - 1);
}
back.addEventListener("click", () => {
if (step === 0) return;
step--;
render();
});
next.addEventListener("click", () => {
// Validate the visible step before advancing. Hidden required fields are
// still checked at submit time, so an empty earlier step would otherwise
// block the post with no message the visitor can see.
const invalid = steps[step].querySelector(":invalid");
if (invalid) { invalid.reportValidity(); return; }
step++;
render();
});
render();
</script>
Añade tu clave de acceso
Reemplaza el marcador por tu clave de acceso para empezar a recibir envíos.
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">Formulario Bootstrap de varios pasos FAQ
Pega un formulario. Recibe envíos.
Al instante, sin configurar ningún backend, servidor ni base de datos. 250 envíos/mes gratis, sin tarjeta de crédito.