integraciones · hosting platform

Un formulario en Cloudflare Pages sin programar un Worker.

Cloudflare sirve tu sitio desde cientos de ciudades, pero no recibe formularios. Su tutorial remite a terceros. Static Forms para Pages Functions solo intercepta POST y lo pasa a una función que debes programar y conectar a KV.

Un action dirigido a mailcontact elimina esa capa: sin Functions, KV, wrangler ni Worker. Los mensajes llegan a la bandeja y avisan por Discord, Slack, email o webhook.

configuración recomendada

Utiliza el script de MailContact con tu diseño.

Añade este HTML a tu sitio o utiliza el generador de formularios. Sustituye el enlace por el de tu formulario. El script alojado inserta la comprobación oculta, gestiona el envío y la verificación automática y conserva el borrador si hay errores. Tú controlas el HTML y el CSS. Los formularios Free muestran un enlace visible «Processed by mailcontact.app»; Pro y Plus no. Los avisos siguen el idioma del navegador; configura data-mailcontact-language="fr" en el formulario para forzar el francés.

contact.html
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="es" data-mailcontact-language="es">
  <input type="hidden" name="_language" value="es" />
  <fieldset>
    <legend>Contáctanos</legend>
    <label>
      Nombre (opcional)
      <input name="name" type="text" autocomplete="name" maxlength="200" />
    </label>
    <label>
      Correo electrónico
      <input name="email" type="email" autocomplete="email" maxlength="320" required />
    </label>
    <label>
      Mensaje
      <textarea name="message" rows="5" maxlength="5000" required></textarea>
    </label>
    <noscript>
    <div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;">
      <label>Sitio web
        <input name="company_website" type="text" tabindex="-1" autocomplete="off" />
      </label>
    </div>
    </noscript>
    <button type="submit">Enviar mensaje</button>
  </fieldset>
  <p data-contact-status role="status" aria-live="polite" aria-atomic="true"></p>
</form>
<script defer src="https://mailcontact.app/forms/v1.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Para un componente con su propio controlador de envío, carga el mismo script y utiliza MailContact.prepare(form) y MailContact.send() en lugar del marcador automático. Consulta la referencia de interfaces personalizadas para carga, avisos y atribución de Free.

el código

Alternativa: una integración directa para Cloudflare Pages.

Este ejemplo envía directamente a la API. Mantén el campo obligatorio company_website presente y vacío. Los envíos nativos abren JSON si tienen éxito o una página de verificación si hace falta. Los scripts sin verificación envían los mensajes sospechosos a Spam; el spam claro también se retiene sin alertas ni consumo de cuota. Una respuesta de éxito confirma recepción, incluida revisión, o el descarte silencioso de una trampa rellenada. Consulta protección contra spam para conocer todo el funcionamiento.

public/contact.html
<!-- No functions/ directory. No KV namespace. No wrangler.toml. -->

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your name" required />
  <input type="email" name="email" placeholder="[email protected]" required />
  <textarea name="message" placeholder="What's on your mind?" required></textarea>

  <!-- Bots fill this in. Humans never see it. -->
  <input type="text" name="company_website" type="text" tabindex="-1" autocomplete="off"
      style="position:absolute;left:-10000px" aria-hidden="true" />

  <button type="submit">Send</button>
</form>

cómo funciona

Tres pasos de principio a fin.

01

Crear una bandeja

Una bandeja por proyecto Pages con endpoint y email al instante.

02

Pega el formulario en el resultado generado

HTML, Astro o React: el formulario es código en la página. No cambia tu compilación.

03

Despliega como siempre

git push o wrangler pages deploy. Funciona en vistas previas, ramas y dominio propio sin ajustes por entorno.

por qué mailcontact

Pensado para funcionar con Cloudflare Pages.

Static Forms no es un servicio completo de formularios

El plugin analiza y llama a tu controlador. Tú programas almacenamiento, avisos, spam y errores. Ese es el trabajo real y el plugin no lo hace.

Sin vigilar el nivel gratuito

Workers cobra peticiones y CPU; un formulario con email añade API y clave. Un endpoint externo evita presupuestos de invocación y depuración nocturna.

Resiste los cambios de Pages a Workers

Cloudflare orienta nuevos proyectos a Workers. Un formulario con URL externa no depende del producto y no necesita migrar integraciones.

preguntas frecuentes

Cloudflare Pages + mailcontact: tus preguntas resueltas

¿Cloudflare Pages gestiona formularios como Netlify Forms?

No. Netlify detecta un atributo al desplegar y guarda los envíos; Cloudflare no tiene esa función. Propone Static Forms, donde programas el controlador y el almacenamiento, o un servicio externo. No hay opción sin código en la plataforma.

¿Y Static Forms para Pages Functions?

Es una base técnica, no un producto completo. El plugin captura el POST de formularios con data-static-form-name y lo pasa a un respondWith que debes programar. Guardar mensajes, avisar y filtrar spam sigue siendo tu responsabilidad. Si quieres programarlo, ayuda; si quieres evitarlo, un endpoint es más directo.

¿Puedo seguir usando Pages Functions para otras cosas?

Sí. No hay conflicto: action apunta a otro origen y no cambia functions/, middleware ni bindings. Solo sustituye la función que harías para contacto.

¿Funciona en vistas previas y alias de ramas?

Sí. *.pages.dev, ramas y dominio propio envían a la misma bandeja sin configurar cada entorno ni mantener autorizaciones.

relacionado

También funciona con

Una bandeja por cada proyecto de Cloudflare Pages que publiques.

Formularios y una dirección de email real, juntos, con avisos en tus herramientas. Empieza con una cuenta gratuita.

Crear formulario gratis

Sin tarjeta de crédito. Free incluye un proyecto y 50 mensajes de formulario al mes.