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, construye un formulario corto (nombre, correo, mensaje), envíalo a una ruta del servidor que valide los datos, guarda el mensaje en una base de datos y luego 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 prueba todo de principio a fin en la web publicada. Guardar antes de enviar el correo es lo importante: si el correo falla alguna vez, sigues teniendo la consulta.

Tus opciones

Si tu web ya tiene un backend y una base de datos —algo habitual en las apps creadas con creadores 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, mensaje. Añade un desplegable de asunto («Ventas», «Soporte», «Otros») solo si vas a enrutar por él.
• Etiquetas claras encima de cada campo, no solo 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é pasa después: «Gracias. Te respondemos en un día laborable.»
• Una nota de privacidad que indique cómo usarás los datos, enlazada a tu política de privacidad.
• Una alternativa como tu correo o teléfono para quien prefiera ese medio.

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, lo 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 responderle directamente. Si el envío falla, conserva el mensaje guardado y registra el error sin mostrar la clave.

Protección frente al spam:

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

Una bandeja de entrada:

Añade una página de administración protegida con contraseña que muestre 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 a dó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 los teléfonos muestren el teclado adecuado).
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. Consulta 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 explica 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 rechazará como suplantación.
7. Opcionalmente responde automáticamente al visitante, pero con un mensaje corto; las respuestas automáticas a direcciones de spam pueden dañar la reputación de tu envío.
8. Añade protección anti-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. Aplica las defensas de menos a más intrusiva:

1. Campo oculto tipo trampa. Un campo que las personas no ven; los bots lo rellenan. No cuesta nada a las visitas 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 llenos de 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 puede saltarse.

Errores comunes

• Mostrar «¡Enviado!» cuando no se envió nada. La interfaz muestra éxito antes o al margen de la respuesta del servidor. Espera siempre a que responda el servidor.
• Solo correo, sin base de datos. Una clave mal configurada y las consultas desaparecen durante semanas sin que nadie lo note.
• Clave de API en el código del front-end. Cualquiera puede usarla para enviar correos en tu nombre.
• Dominio de envío sin verificar. Los avisos 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 directo. Las claves y los dominios a menudo difieren entre la previsualización y 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
• Correo de aviso enviado desde un dominio verificado, con responder-a configurado
• Clave de API del correo guardada solo en secretos 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 esto 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 integrado 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; consulta Enviar correo desde tu app. Antes de confiar en ello, ejecuta las pruebas de la app (/test) sobre el formulario en la previsualización, luego publica y prueba la URL en directo.

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

Preguntas