Cómo añadir un formulario de contacto a tu web (que de verdad te llegue)

Para añadir un formulario de contacto que funcione, crea un formulario corto (nombre, correo y mensaje), envíalo a una ruta del servidor que valide los datos, guarda el mensaje en una base de datos y después te envíe un aviso por correo a través de un proveedor de correo usando una clave de API secreta. Añade un campo oculto tipo trampa (honeypot) y limitación de peticiones para frenar la mayor parte del spam, muestra un mensaje de éxito claro y pruébalo de principio a fin en la web publicada. Guardar antes de enviar el correo es lo importante: si el correo falla, sigues teniendo la consulta.

Tus opciones

Si tu web ya tiene backend y base de datos —algo habitual en las apps creadas con creadores de apps con IA—, la última opción es la más fiable y mantiene las consultas donde puedes verlas.

Qué incluye un buen formulario de contacto

• Los menos campos posibles. Nombre, correo y mensaje. Añade un desplegable de asunto («Ventas», «Soporte», «Otro») solo si vas a enrutar por él.
• Etiquetas claras encima de cada campo, no solo un texto de ejemplo que desaparece.
• Validación útil: «Introduce una dirección de correo válida», mostrada junto al campo.
• Un estado de éxito que diga qué pasará después: «Gracias, te responderemos en un día laborable».
• Una nota de privacidad que explique cómo usarás los datos, con enlace a tu política de privacidad.
• Una alternativa como tu correo o tu teléfono para quien prefiera otra vía.

Prompts de ejemplo

El formulario básico:

Añade un formulario de contacto en la página de Contacto con nombre, correo y mensaje (todos obligatorios, el mensaje de hasta 2.000 caracteres). Envíalo a una ruta del servidor que valide los datos, los guarde en una tabla contact_messages con la hora de recepción y muestre un mensaje de éxito: «Gracias, te responderemos en un día laborable». Muestra los errores de cada campo en línea. Que funcione bien en el móvil.

Avisos por correo:

Cuando se guarde un mensaje de contacto, envíame un aviso por correo a hola@ejemplo.com usando Resend con la clave en RESEND_API_KEY. Pon como responder-a la dirección de quien escribe, para que pueda contestarle directamente. Si el envío falla, conserva el mensaje guardado y registra el error sin mostrar la clave.

Protección contra spam:

Añade protección contra spam al formulario de contacto: un campo oculto que debe quedar vacío, un límite de 5 envíos por IP y hora en el servidor, y rechaza los mensajes con más de 3 enlaces. Descarta en silencio los envíos del campo oculto pero muestra igualmente el éxito.

Una bandeja de entrada:

Añade una página de administración protegida con contraseña que liste los mensajes de contacto, del más reciente al más antiguo, con una casilla de «gestionado» y un filtro para los mensajes sin gestionar.

Paso a paso

1. Decide adónde van los mensajes: quién recibe los avisos y quién responde.
2. Construye el formulario con los campos de arriba, etiquetas accesibles y campos adaptados al móvil (usa el tipo de entrada de correo para que el teléfono muestre el teclado correcto).
3. Crea la ruta del servidor. Comprueba los campos obligatorios, el formato del correo y los límites de longitud. Nunca confíes solo en la validación del navegador.
4. Guarda primero en la base de datos. Mira cómo añadir una base de datos a tu app.
5. Configura un proveedor de correo. Crea una cuenta, verifica tu dominio de envío y guarda la clave de API como secreto. Cómo enviar correos desde tu app cubre en detalle la configuración del dominio (SPF, DKIM).
6. Envía el aviso desde el servidor después de guardar. Usa tu dominio verificado como remitente y la dirección del visitante como responder-a; no envíes «desde» la dirección del visitante, porque probablemente se rechace como suplantación.
7. Responde automáticamente al visitante si quieres, pero mantenlo breve; las respuestas automáticas a direcciones de spam pueden dañar la reputación de tu remitente.
8. Añade protección contra spam: campo oculto, limitación de peticiones y, si hace falta, una comprobación tipo CAPTCHA.
9. Prueba en la web publicada: envía un mensaje, revisa la base de datos, revisa tu bandeja de entrada y la carpeta de spam, y haz clic en responder.

Frenar el spam

Los formularios de contacto atraen bots en cuestión de días desde que salen a la luz. Aplica las defensas de menos a más intrusivas:

1. Campo oculto tipo trampa (honeypot). Un campo que los humanos no ven; los bots lo rellenan. No cuesta nada a los visitantes reales.
2. Limitación de peticiones en el servidor. Limita cuántos mensajes puede enviar una dirección en un periodo.
3. Reglas de contenido. Rechaza mensajes con muchos enlaces, o con un campo de mensaje vacío o absurdamente largo.
4. Una comprobación tipo CAPTCHA, como Cloudflare Turnstile o Google reCAPTCHA. El token debe verificarse en tu servidor; una comprobación que solo se ejecuta en el navegador se puede saltar.

Errores habituales

• Mostrar «¡Enviado!» cuando no se ha enviado nada. La interfaz muestra éxito antes o al margen de la respuesta del servidor. Espera siempre la respuesta del servidor.
• Solo correo, sin base de datos. Una sola clave mal configurada y las consultas desaparecen durante semanas sin que nadie lo note.
• Clave de API en el código del frontend. Cualquiera puede usarla para enviar correos en tu nombre.
• Dominio de envío sin verificar. Las notificaciones acaban en el spam o nunca llegan.
• Enviar «desde» el correo del visitante. Usa responder-a en su lugar.
• Sin límites de longitud. Los bots pegan bloques enormes de texto.
• No probar nunca la web en vivo. Las claves y los dominios suelen ser distintos entre la vista previa y la producción.

Lista de comprobación

• Formulario corto con etiquetas visibles y errores claros
• Validación y límites de longitud en el servidor
• Cada mensaje guardado en la base de datos
• Aviso por correo enviado desde un dominio verificado, con responder-a configurado
• Clave de API del correo guardada solo como secreto del servidor
• Campo oculto y limitación de peticiones activos
• El mensaje de éxito aparece solo cuando el servidor lo confirma
• La nota de privacidad enlaza a tu política de privacidad
• Probado de principio a fin en la web publicada, incluida la carpeta de spam

Formularios de contacto en Mythex

En Mythex puedes construir todo desde el chat. Pide el formulario y una base de datos en el mismo prompt (o escribe /database) para que los envíos persistan. Mythex no tiene un producto propio de envío de correo, así que para los avisos usas un proveedor como Resend, SendGrid o Postmark, añades su clave con /secrets o en los ajustes del proyecto, y pides al agente que envíe desde el servidor; mira Enviar correo desde tu app. Antes de confiar en ello, ejecuta las pruebas de la app (/test) sobre el formulario en la vista previa, y después publica y prueba en la URL en vivo.

Un formulario de contacto es una pieza clave de la mayoría de webs para pequeños negocios y de las páginas de aterrizaje. Revisa la lista de seguridad antes del lanzamiento.

Preguntas