Formularios de contacto para JavaScript
Añade un formulario de contacto a cualquier página con JavaScript puro y sin backend. Es un formulario HTML real más un listener de envío que hace POST con fetch, así que el visitante se queda en la página. Sin framework y sin paso de build. Pruébalo en vivo, copia el código con el estilo que prefieras, y los envíos llegan a tu bandeja de entrada, con el spam filtrado.
Cómo crear un formulario en JavaScript
- 1
Crea un formulario en tu panel de Formpaste y copia su clave de acceso.
- 2
Copia el formulario y el script de arriba en tu página y elige tu estilo.
- 3
Reemplaza YOUR_ACCESS_KEY_HERE con tu clave de acceso y publica.
Prompt para tu agente de programación con IA
Add a Formpaste contact form to my page with vanilla JavaScript. Use a real HTML form with an action of https://api.formpaste.com/submit and a hidden access_key input, plus a submit listener that calls preventDefault and POSTs new URLSearchParams(new FormData(form)) with fetch, then resets the form. 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.
Un formulario y un fetch
El fragmento de arriba es un formulario HTML real más un script corto. El formulario
tiene un action que apunta a Formpaste, y el script añade un listener de submit que
llama a preventDefault(), envía los campos con fetch y reinicia el formulario. No hay
framework, no hay paso de build y no hay backend: lo pegas en cualquier página y funciona.
Gestionar la respuesta
El endpoint devuelve JSON (success, message, id). Espera el fetch con await y
muestra tu propio mensaje de éxito o error en la página, que es la razón principal para
añadir el script. Si prefieres no escribir nada de JavaScript, define una URL de
redirección en la configuración de tu panel y deja que el envío del formulario plano
lleve al visitante a una página de agradecimiento.
Una mejora, no un requisito
Como el markup es un formulario real con un action, se envía igual si el script no
carga o el usuario tiene JavaScript desactivado. Eso hace del script una mejora genuina
en vez de un requisito, y es la razón por la que el formulario se degrada con elegancia
en cualquier página.
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" class="mx-auto flex w-full max-w-md flex-col gap-4 rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-950">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Nombre
<input type="text" name="name" placeholder="Tu nombre" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Correo electrónico
<input type="email" name="email" placeholder="tu@ejemplo.com" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Mensaje
<textarea name="message" required class="min-h-28 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100"></textarea>
</label>
<button type="submit" class="w-full rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-gray-800 disabled:opacity-60 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200">Enviar</button>
</form>
<script>
const form = document.getElementById("form");
form.addEventListener("submit", async (e) => {
e.preventDefault();
await fetch("https://api.formpaste.com/submit", { 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">Formularios de contacto para 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.
Lo que obtienes con Formpaste
Sin servidor, sin DNS
Apunta tu formulario a Formpaste: sin backend, sin DNS, sin servidor de correo que mantener.
Spam filtrado automáticamente
Heurísticas más una carpeta de cuarentena que tú controlas. Los mensajes reales siempre llegan.
Cuarentena que tú controlas
Los envíos sospechosos llegan a una carpeta que revisas: nada se descarta en silencio.
Creado para agentes de IA
Un servidor MCP que tu agente de código llama para crear un formulario y configurarlo.
Componentes para copiar y pegar
Código de formulario accesible para copiar y pegar en HTML, React, TypeScript, JavaScript y Astro.
Panel sencillo
Gestiona formularios, bandeja de entrada, cuarentena y entrega desde un solo lugar.