Formulario de subida de archivos en Bootstrap
Crea un formulario de subida de archivos con Bootstrap 5 y sin API de subida propia. Bootstrap 5 da estilo a los inputs de archivo con la misma clase form-control que todo lo demás, y el archivo se envía directamente a Formpaste. Copia el markup y añade 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 markup de abajo, añade tu clave de acceso y publica.
Prompt para tu agente de programación con IA
Give me a Bootstrap 5 file upload form that POSTs multipart/form-data to https://api.formpaste.com/submit with a hidden access_key input. Use form-label, form-control on the file input, form-text for the hint, and btn btn-primary. 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 Bootstrap
Bootstrap le da estilo al formulario, Formpaste lo recibe. Apunta un formulario Bootstrap normal al endpoint de Formpaste, deja la access key oculta, y los envíos llegan a tu bandeja de entrada. No hay plugin, no hay jQuery y no hay backend propio.
Es un formulario normal con clases de Bootstrap
Bootstrap no cambia en nada cómo se envía un formulario. Agrega form-label, form-control y btn btn-primary al markup habitual, apunta el action al endpoint de Formpaste, y el navegador lo envía por POST. Bootstrap solo aporta el estilo.
Los estilos de validación son solo presentación
was-validated, is-invalid e invalid-feedback le dan estilo al formulario en el navegador. No filtran spam ni validan nada en el servidor. Formpaste sigue aplicando su propio filtrado de spam después del post.
Usa los nombres de clase de Bootstrap 5
Bootstrap 5 renombró varias clases de formulario: form-group pasó a ser mb-3, custom-select pasó a ser form-select, y form-control-file pasó a ser form-control. Si estás copiando un snippet viejo de Bootstrap 4, actualiza esos nombres o el estilo no se va a aplicar.
Deja el access_key oculto
Deja el input oculto access_key en su lugar para que Formpaste sepa a qué formulario pertenece el envío. Es un input normal, así que los estilos de Bootstrap lo ignoran.
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 action="https://api.formpaste.com/submit" method="POST" enctype="multipart/form-data">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="mb-3">
<label for="file" class="form-label">Attachment</label>
<input type="file" class="form-control" id="file" name="file">
<div class="form-text">PDF or image, up to 10 MB.</div>
</div>
<button type="submit" class="btn btn-primary">Upload</button>
</form>
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 Bootstrap 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.