Formulario de subida de archivos en JavaScript
Crea un formulario de subida de archivos con JavaScript puro y sin API de subida propia. Publica el FormData sin procesar con fetch para que el navegador establezca el límite multipart, y el archivo llega a tu bandeja de entrada junto con los demás campos. 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.
- Conecta Storage en el panel para que el formulario pueda aceptar subidas.
- Copia el formulario y el script de arriba, agrega tu clave de acceso, luego publica.
Prompt para tu agente de programación con IA
Add a Formpaste file upload form to my page with vanilla JavaScript. Use a real form with enctype multipart/form-data and a file input, plus a submit listener that POSTs new FormData(form) directly (not URLSearchParams) to https://api.formpaste.com/submit with a hidden access_key input. Do not build an upload endpoint of my own.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 archivo implica multipart, no urlencoded
En cuanto el formulario tiene un campo de tipo archivo, debe enviarse como multipart form data. El código generado configura enctype y envía el FormData sin procesar, así el archivo viaja junto con los demás campos. No necesitas ningún endpoint de carga propio.
La carga va directo del cliente a Formpaste
El navegador envía el archivo directamente a Formpaste, así que tu app nunca almacena en búfer ni procesa la carga. Eso evita por completo los límites de tamaño de cuerpo y de tiempo de ejecución de los entornos serverless.
Define expectativas sobre tamaño y tipo
Indica a las personas qué formatos aceptas. La carga de archivos es una función Pro; conecta Storage en el panel primero y mantén el campo claro respecto a los tipos y tamaños aceptados.
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" enctype="multipart/form-data" 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
<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">Archivo
<input type="file" name="file" 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" 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">Subir</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 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 subida de archivos 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.