Formulario de registro en Bootstrap
Crea un formulario de registro con Bootstrap 5 y sin backend. Distribuye los campos en un grid de dos columnas que se apila en móvil, y los registros llegan a tu bandeja de entrada. 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.
- Copia el markup de abajo en tu página.
- Reemplaza YOUR_ACCESS_KEY_HERE con tu clave de acceso y publica.
Prompt para tu agente de programación con IA
Give me a Bootstrap 5 registration form that POSTs to https://api.formpaste.com/submit with a hidden access_key input. Use a row with col-md-6 columns, mb-3, form-label, form-control, form-text and btn btn-primary. Rely on native browser validation rather than Bootstrap's custom validation script. No jQuery, 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 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
Formpaste es un backend de formularios, no un proveedor de autenticación
Un formulario de registro recopila datos y te los envía por correo o los reenvía a tu sistema. No crea cuentas de acceso ni almacena contraseñas. Para una autenticación real, conecta el envío a tu herramienta de autenticación y nunca trates el formulario como un almacén de credenciales.
Nunca envíes contraseñas en texto plano por correo
Si recopilas una contraseña aquí, reenvía el envío a tu propio endpoint de registro mediante un webhook en lugar de dejar que llegue a una bandeja de entrada. Mejor aún, captura solo los datos que necesitas y deja que tu proveedor de autenticación establezca la contraseña.
Valida también en el cliente
Haz coincidir los dos campos de contraseña y exige un formato de correo válido en el navegador para que la gente corrija errores antes de enviar. Formpaste igual filtra el spam en el servidor.
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">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
<div class="row">
<div class="col-md-6 mb-3">
<label for="first" class="form-label">First name</label>
<input type="text" class="form-control" id="first" name="first_name" required>
</div>
<div class="col-md-6 mb-3">
<label for="last" class="form-label">Last name</label>
<input type="text" class="form-control" id="last" name="last_name" required>
</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
<div class="form-text">We will only use this to confirm your account.</div>
</div>
<button type="submit" class="btn btn-primary">Create account</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 registro 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.