Formulario de comentarios en JavaScript
Agrega un formulario de comentarios a cualquier página con JavaScript puro y sin backend. El listener de envío publica con fetch para que el lector se quede donde está, y los comentarios llegan a tu bandeja de entrada para revisión. 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 formulario y el script de arriba en tu página o plantilla de post.
- Reemplaza YOUR_ACCESS_KEY_HERE con tu clave de acceso, luego publica.
Prompt para tu agente de programación con IA
Add a Formpaste comment form to my page with vanilla JavaScript. Use a real form with a name field and a comment textarea, plus a submit listener that calls preventDefault and POSTs new URLSearchParams(new FormData(form)) to https://api.formpaste.com/submit with a hidden access_key, then shows a thank-you message without reloading the page. 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 sitios estáticos no tienen backend de comentarios, así que un formulario llena el vacío
Una página generada estáticamente no puede almacenar comentarios por sí sola. Enviarlos a Formpaste te da un lugar donde aterricen sin añadir una base de datos o un CMS.
Modera antes de publicar
Los comentarios son un imán de spam. Formpaste filtra el spam obvio y pone en cuarentena los envíos dudosos en una carpeta que revisas, así apruebas lo que realmente aparece en la página.
Mantén el correo privado
Recopila el correo de quien comenta para moderar y responder, pero etiquétalo como no publicado para que la gente sepa que no aparecerá en el sitio.
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" 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 (no se publica)
<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">Comentario
<textarea name="comment" 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">Publicar comentario</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">Formulario de comentarios 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.