Formulario de comentarios en Cloudflare Pages
Añade un formulario de comentarios a tu sitio de Cloudflare Pages sin Worker. El formulario es HTML plano que despliegas con el sitio, y las respuestas llegan a tu bandeja de entrada. Sin backend propio.
Como construirlo
- Crea un formulario en tu panel de Formpaste y copia su clave de acceso.
- Añade el HTML de arriba a la página donde quieres recibir comentarios.
- Reemplaza YOUR_ACCESS_KEY_HERE con tu clave de acceso, luego despliega en Pages.
Puntos claves de Cloudflare
Cloudflare Pages sirve tu sitio estático, y un formulario de Formpaste es solo HTML que despliegas junto con él: sin Worker y sin backend propio. Apunta el formulario a Formpaste, despliega, y los envíos llegan a tu bandeja de entrada.
No necesitas un Worker
Pages sirve archivos estáticos, así que un formulario que envía datos al endpoint de Formpaste funciona sin Worker y sin Pages Function. Agrega el markup a tu página y despliega como siempre.
Nada que enlazar
No necesitas un KV namespace, una base de datos D1, ni ningún binding para recibir envíos. El formulario envía los datos directamente a Formpaste, así que no hay estado que guardar de tu lado.
Las subidas de archivos se despliegan igual
Un formulario con un campo de tipo archivo envía datos multipart directamente a Formpaste, así que las subidas funcionan en un despliegue de Pages normal, sin configuración adicional de tu parte.
Mantén el access_key oculto
Deja el campo oculto access_key generado tal como está, para que Formpaste sepa a qué formulario pertenece cada envío.
Que debes acertar
Una calificación más un comentario es el punto óptimo
Un select para la puntuación y un textarea para el porqué te da tanto un número que rastrear como el contexto detrás de él, sin un formulario largo.
Deja que la gente permanezca anónima
Marca el nombre y el correo como opcionales. Los comentarios son más honestos cuando no están ligados a una identidad, y de todas formas filtras el spam automáticamente.
Dirige los comentarios adonde los verás
Reenvía los envíos a una bandeja compartida o a un webhook hacia tu sistema de seguimiento para que nada quede sin leer.
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" 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 (opcional)
<input type="text" name="name" 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 (opcional)
<input type="email" name="email" placeholder="tu@ejemplo.com" 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">Calificación
<select name="rating" 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">
<option>5 - Excelente</option>
<option>4 - Bueno</option>
<option>3 - Aceptable</option>
<option>2 - Malo</option>
<option>1 - Muy malo</option>
</select>
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Tu comentario
<textarea name="message" 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">Enviar comentario</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 comentarios en Cloudflare Pages 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.