# Un formulario HTML para tu web estática, sin backend propio

Ejemplo de formulario HTML con Formgong: envío POST sin PHP, clave pública, página de agradecimiento y comprobación de entrega.

Author: Formgong
Published: 2026-10-01
Language: es
Canonical: https://formgong.com/blog/html-contact-form-without-backend?lang=es

Usa method=POST, la dirección /submit de Formgong y un campo oculto access_key. El navegador puede enviar el formulario sin JavaScript. Formgong recibe los datos; no tienes que mantener el servidor que los procesa.

## La web es estática; la recepción necesita un servicio

HTML muestra los campos, pero no guarda mensajes ni envía correos por sí solo. Formgong asume esas tareas. Este enfoque sirve para portfolios, páginas de servicios y formularios de texto.

Si ya tienes un backend con reglas específicas, puedes utilizarlo. El ejemplo evita añadir uno nuevo solo para recibir consultas.

## Antes de copiar el ejemplo

Crea el formulario en [Formgong](/?lang=es#top), verifica tu correo y copia su clave desde la conexión de la web. Reemplaza `fk_your_access_key`. La clave puede quedar en HTML porque es pública; un correo sin verificar puede retener los avisos.

## Añade el formulario a la página

Coloca el código en la sección de contacto y añade tus clases CSS. Puedes cambiar las etiquetas visibles, manteniendo los nombres de los campos. Esta versión envía texto, no archivos.

```html
<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden">
  <label>Leave this field empty<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">Send</button>
</form>
```

## Los atributos que hacen posible el envío

`action` indica el destino, `method="POST"` el método y `name` identifica cada dato. Un `id` por sí solo no basta. Para un teléfono puedes añadir `name="phone"`.

El campo `botcheck` debe estar fuera de la pantalla y vacío. Es una trampa para bots, no un campo que deba completar el visitante.

## Elige qué ocurre después

Sin ajustes adicionales se abre la página de resultado de Formgong. Para una página propia, configura su URL HTTPS completa. También puedes usar `_redirect`; si el panel ignora direcciones enviadas por el formulario, prevalece el ajuste del panel.

Para permanecer en la misma página, necesitas `fetch` y estados de interfaz. La [guía de diagnóstico](/blog/contact-form-not-sending-email?lang=es) incluye un ejemplo.

## Comprueba la web publicada

Envía una consulta reconocible desde el dominio real. Búscala en el formulario correcto, el correo y el spam. Revisa en el móvil los campos, el botón y el agradecimiento. Puedes sumar un canal con la [conexión de Telegram](/blog/website-form-to-telegram?lang=es).

## Si activas protección, actualiza el código

Turnstile requiere un widget y `cf-turnstile-response`; el honeypot del ejemplo no lo sustituye. Obtén el código actualizado del panel. Si usas una lista de dominios permitidos, incluye el dominio publicado; el editor puede tener otro.

## Preguntas frecuentes

### ¿Hace falta JavaScript?

No para el POST normal: el navegador envía los datos y abre la página de resultado.

### ¿Necesito hosting con PHP?

No. Formgong procesa los datos y la web puede seguir en hosting estático.

### ¿Se pueden añadir campos?

Sí, campos de texto con name. Este ejemplo no incluye la carga de archivos.

### ¿Incluye Turnstile el ejemplo?

No, incluye un honeypot. Si Turnstile está activo, añade el widget y el token actuales desde el panel.

## Fuentes y documentación

- [MDN: sending form data](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data)
- [Documentación de Formgong](https://formgong.com/docs/html?lang=es)

[Obtener una clave](https://formgong.com/?lang=es#top)