Formulario dinámico en JavaScript
Crea un formulario dinámico basado en un esquema con JavaScript puro y sin backend. Genera los campos a partir de un array con createElement, así que agregas o reordenas campos editando datos, no markup. Publica una sola vez a Formpaste. Copia el código y agrega tu clave de acceso.
Como construirlo
- Crea un formulario en tu panel de Formpaste y copia su clave de acceso.
- Copia el código de abajo y edita el array de campos según tu formulario.
- Reemplaza YOUR_ACCESS_KEY_HERE con tu clave de acceso, luego publica.
Prompt para tu agente de programación con IA
Add a Formpaste dynamic form to my page with vanilla JavaScript. Build the inputs from a fields array using document.createElement so adding or reordering a field means editing data, not markup, and add a submit listener that POSTs new URLSearchParams(new FormData(form)) once to https://api.formpaste.com/submit with a hidden access_key. No framework and no 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
Los campos vienen de un esquema, no del markup
Un formulario dinámico renderiza sus campos a partir de un array de definiciones de campo, así que agregas o reordenas campos editando datos, no JSX ni markup de plantilla. El mismo componente maneja cualquier conjunto de campos.
Un solo envío para cualquier estructura
Sin importar cuántos campos tenga el esquema, el formulario envía una única vez a Formpaste como un solo envío. Mantén el input oculto access_key en el payload y los nombres de campo con sentido para que tu bandeja de entrada sea legible.
Mantén los nombres de campo estables
El nombre del campo es lo que aparece en tu bandeja de entrada y en las exportaciones, así que nombra cada entrada del esquema con claridad (name, email, message) aunque cambies las etiquetas o el orden. Formpaste guarda cualquier nombre que envíes.
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">
<button type="submit">Send</button>
</form>
<script>
const fields = [
{ name: "name", type: "text", label: "Name" },
{ name: "email", type: "email", label: "Email" },
{ name: "message", type: "textarea", label: "Message" },
];
const form = document.getElementById("form");
const submit = form.querySelector("button");
for (const f of fields) {
const label = document.createElement("label");
label.textContent = f.label + " ";
const input = document.createElement(f.type === "textarea" ? "textarea" : "input");
if (f.type !== "textarea") input.type = f.type;
input.name = f.name;
label.appendChild(input);
form.insertBefore(label, submit);
}
form.addEventListener("submit", async (e) => {
e.preventDefault();
await fetch(form.action, { method: "POST", body: new URLSearchParams(new FormData(form)) });
form.reset();
});
</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 dinámico en JavaScript 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.