Formulario de encuesta en Bootstrap
Crea un formulario de encuesta con Bootstrap 5 y sin backend. Usa listas desplegables form-select para las respuestas rápidas y un textarea para la pregunta abierta, y las respuestas 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 y edita las opciones.
- 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 survey form that POSTs to https://api.formpaste.com/submit with a hidden access_key input. Use form-select dropdowns for the fixed-choice questions, a form-control textarea for the open one, and btn btn-primary. 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
Mantenla corta para conservar una alta tasa de finalización
Cada pregunta adicional pierde respuestas. Un par de listas desplegables y un campo de comentario abierto suele reunir lo que necesitas sin generar fatiga.
Las listas desplegables superan al texto libre para el análisis
Las opciones fijas (campos select) son fáciles de contar después. Reserva el textarea para la única pregunta abierta que realmente lo necesite.
Haz que el correo sea opcional para respuestas más honestas
Las respuestas anónimas suelen ser más sinceras. Pide el correo solo si necesitas dar seguimiento, y márcalo como opcional.
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="mb-3">
<label for="rating" class="form-label">How would you rate us?</label>
<select class="form-select" id="rating" name="rating" required>
<option value="">Choose one</option>
<option>Very good</option>
<option>Good</option>
<option>Not great</option>
</select>
</div>
<div class="mb-3">
<label for="found" class="form-label">Did you find what you needed?</label>
<select class="form-select" id="found" name="found" required>
<option value="">Choose one</option>
<option>Yes</option>
<option>Partly</option>
<option>No</option>
</select>
</div>
<div class="mb-3">
<label for="comments" class="form-label">Anything else?</label>
<textarea class="form-control" id="comments" name="comments" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send</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 encuesta 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.