Formulario JavaScript de varios pasos
Crea un formulario de varios pasos con JavaScript puro y sin backend. Mantén todos los campos en un solo formulario, muestra un fieldset a la vez y publica una sola vez al final. Copia el asistente de abajo y agrega tu clave de acceso.
Como construirlo
- Crea un formulario en tu panel de Formpaste y copia su clave de acceso.
- Copia el formulario y el script de abajo en tu página.
- Reemplaza YOUR_ACCESS_KEY_HERE con tu clave de acceso, luego publica.
Prompt para tu agente de programación con IA
Add a Formpaste multi-step form to my page with vanilla JavaScript. Use one real form containing several fieldsets, a step counter in a let variable, Back and Next buttons that show and hide the fieldsets, and a submit listener that POSTs new URLSearchParams(new FormData(form)) once at the end to https://api.formpaste.com/submit with a hidden access_key. 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 JavaScript
Un formulario de contacto en JavaScript puro es HTML simple más un listener de envío. Apunta el formulario a Formpaste, agrega un script que llame a preventDefault y envíe el FormData con fetch, y el visitante se queda en la página. Sin framework, sin paso de compilación, sin backend.
Es un formulario más un listener
Mantén el markup real del formulario con una action que apunte al endpoint de Formpaste, luego agrega un listener de envío que llame a preventDefault y haga el envío con fetch. No hay framework ni nada que instalar, así que el mismo snippet funciona en un sitio estático, una plantilla de CMS o una página escrita a mano.
La mejora progresiva sale gratis
Como el markup es un formulario real con una action, se envía igual si tu script no carga o el usuario tiene JavaScript desactivado. El listener es una mejora que mantiene al visitante en la página, no un requisito.
Envía FormData, no un objeto armado a mano
Construye el body con new FormData(form) para que cada campo viaje por su nombre, incluida la access_key oculta. Envuélvelo en URLSearchParams para un formulario de texto normal, o envía el FormData directamente cuando el formulario tenga un campo de archivo.
Maneja tú mismo la respuesta
El endpoint devuelve JSON (success, message, id). Espera el fetch y muestra tu propio mensaje de éxito o error, luego llama a form.reset(). O configura una URL de redirección en el dashboard y deja que el envío del formulario simple haga el trabajo sin ningún script.
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><label>Name <input name="name" required></label></fieldset>
<fieldset data-step hidden><label>Email <input type="email" name="email" required></label></fieldset>
<fieldset data-step hidden><label>Message <textarea name="message"></textarea></label></fieldset>
<button type="button" id="back" hidden>Back</button>
<button type="button" id="next">Next</button>
<button type="submit" id="send" hidden>Submit</button>
</form>
<script>
const form = document.getElementById("form");
const steps = form.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.hidden = i !== step));
back.hidden = step === 0;
next.hidden = step === steps.length - 1;
send.hidden = step !== steps.length - 1;
}
back.addEventListener("click", () => { step--; render(); });
next.addEventListener("click", () => { step++; render(); });
form.addEventListener("submit", async (e) => {
e.preventDefault();
await fetch(form.action, { method: "POST", body: new URLSearchParams(new FormData(form)) });
form.reset();
});
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 JavaScript 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.