Todas las entradas

Cómo añadir un formulario de contacto que funcione a una web estática hecha con IA

Le pediste a la IA un formulario de contacto y te creó uno con campos de nombre, email y mensaje. Pero cuando tú o un visitante pulsáis «Enviar», no pasa nada, o aparece un error. No es un fallo de la IA. Es una característica básica de las webs estáticas, y aquí te contamos cómo resolverlo bien.

Por qué un formulario estático no funciona por sí solo

Una web estática son solo archivos HTML, justo lo que generan las herramientas de IA. Detrás no hay ningún servidor ejecutando código que pueda recibir el formulario, guardarlo y enviártelo por email. El formulario se ve bien, pero el botón «Enviar» no tiene adónde mandar los datos. Para que funcione de verdad, hace falta algo al otro lado que lo procese.

Antes eso significaba escribir código de servidor (PHP, Node, etc.) y mantener un servidor. Para alguien sin perfil técnico, es un salto enorme. La respuesta moderna es un endpoint de formularios, un servicio que se encarga de recibir los datos por ti.

La solución sencilla: un endpoint de formularios

Un endpoint de formularios es una dirección web que acepta los datos de tu formulario, los guarda y te avisa, sin que tengas que mantener ningún servidor. Apuntas tu formulario a esa dirección y funciona. Muchos hostings lo incluyen. En Hostilo, cada web tiene un endpoint de formularios integrado, así que no necesitas un servicio aparte.

Paso a paso

1. Consigue el código del formulario

Copia un formulario que envíe al endpoint e incluya el token único de tu web. Tiene este aspecto:

<form action="https://hostilo.app/api_form.php" method="POST">
  <input type="hidden" name="site_token" value="TU_TOKEN_UNICO">
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <button type="submit">Enviar</button>
</form>

2. Añade tu token

El site_token es lo que vincula los mensajes con tu web. El código listo, con tu token ya puesto, está en el editor de tu web, en la pestaña Ajustes. Es la única pieza que hace que el formulario sea tuyo.

3. Pégalo en tu página

Coloca el formulario donde quieras que aparezca en tu HTML, guarda y publica. Listo: el formulario está online y funciona.

Consejo

Si la IA ya te diseñó un formulario bonito, puedes conservar ese diseño. Solo asegúrate de que action apunte al endpoint y de que incluya el campo oculto site_token.

¿Adónde van los mensajes?

Cuando alguien rellena el formulario, recibes el mensaje por email y además queda guardado en tu panel, así que tienes un registro aunque se pierda algún correo. No tienes que revisar otro servicio: todo está en un solo sitio.

¿Y el spam?

Los formularios públicos atraen bots de spam. Un buen endpoint incluye un honeypot: un campo invisible que las personas nunca rellenan, pero los bots sí. Si el honeypot viene relleno, el envío se descarta en silencio. Así se bloquea la mayor parte del spam automático sin molestar a tus visitantes con captchas.

Preguntas frecuentes

¿Necesito saber programar para añadir un formulario que funcione?
No. Pegas un fragmento de código y añades tu token. Sin backend, sin servidor, sin escribir código.

¿Puedo personalizar el aspecto del formulario?
Sí. Es HTML normal: dale el estilo que quieras o conserva el diseño de la IA. Solo deben quedarse la URL de action y el campo oculto del token.

¿Recibiré los mensajes por email?
Sí. Los mensajes llegan por email y también se guardan en tu panel como copia.

¿Cómo se gestiona el spam?
Un campo honeypot integrado detecta y bloquea automáticamente la mayoría de los bots, así que no necesitas captchas.

¿Listo para poner tu web hecha con IA online?

Pega tu código de ChatGPT o Claude, guarda y obtén un enlace en vivo con HTTPS en segundos. Gratis, sin tarjeta.

Publica tu web gratis

Más del blog