Envía formularios a Slack sin servidor

Para enviar formularios a Slack, conecta un servicio que guarde el mensaje y avise por webhook entrante. En mailcontact utiliza el endpoint del proyecto y guarda el webhook en sus notificaciones. Sin desplegar servidor ni crear automatizaciones por sitio.

Esta guía utiliza HTML y sirve para portfolios, páginas de producto y sitios estáticos. Slack requiere Pro o Plus; elige un plan. El página de precios describe los planes y las cuotas actuales.

Cómo se conecta el formulario a Slack

Website contact form
  → mailcontact form endpoint
  → saved message in the project inbox
  → notification in your Slack channel

El endpoint de formulario va en tu HTML público. El webhook de Slack, en los ajustes privados del proyecto. Uno recibe mensajes; el otro autoriza publicar en el canal.

Nunca pongas un webhook de Slack en action, variables públicas ni scripts del navegador. Su URL contiene un secreto y Slack advierte que puede revocar enlaces filtrados. Además, espera su JSON propio, no campos arbitrarios. Consulta Documentación de webhooks entrantes de Slack para la configuración oficial y las recomendaciones de seguridad.

1. Crea un webhook entrante para tu canal de Slack

1. Abrir tus aplicaciones de Slack y crea o selecciona una aplicación en el espacio de trabajo correcto.
2. Abrir Incoming Webhooks y actívalas.
3. Elegir Add New Webhook to Workspace, selecciona un canal y autorízalo.
4. Copia la URL generada. Para un canal privado, debes ser miembro.

Elige un canal cuyos miembros deban ver las consultas. Las alertas incluyen remitente y extracto: un canal público de empresa puede ser inadecuado para soporte privado. Un canal específico facilita distinguirlas de la conversación diaria.

2. Guarda el webhook en mailcontact

Abre tu proyecto en mailcontact y ve a Ajustes → Notificaciones, añade un destino de Slack y pega la URL del webhook. Actívalo y utiliza el botón de prueba del destino. Comprueba que la prueba aparece en el canal elegido antes de conectar el formulario real.

Las notificaciones pertenecen al proyecto. Si gestionas varios en Pro, configura cada bandeja: todas pueden avisar al mismo Slack o a destinos distintos. La referencia de notificaciones también cubre Discord, email y webhooks personalizados.

3. Conecta el formulario de contacto de tu sitio

Copia el endpoint del formulario de tu proyecto y sustituye your-form-id en este ejemplo. El email y message son obligatorios; name y subject son opcionales.

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <label for="contact-email">Your email</label>
  <input id="contact-email" type="email" name="email"
    autocomplete="email" maxlength="320" required />

  <label for="contact-message">Message</label>
  <textarea id="contact-message" name="message"
    maxlength="5000" required></textarea>

  <button type="submit">Send message</button>
  <input name="company_website" type="text" tabindex="-1" autocomplete="off"
    style="position:absolute;left:-10000px" aria-hidden="true" />
</form>

Un envío nativo abre JSON si tiene éxito o una página de verificación cuando es necesario. Para mostrar los avisos en la misma página, utiliza el script alojado de MailContact: inserta la comprobación obligatoria, gestiona la verificación automática y conserva los borradores si hay errores. Los formularios Free con script deben mostrar un enlace visible «Processed by mailcontact.app». Los mensajes retenidos en Spam no generan alertas de Slack hasta que se restauran.

El endpoint funciona con distintos alojamientos. Puedes usarlo en GitHub Pages, en un Página de contacto de Astro, o con un formulario HTML existente. Tu interfaz no necesita un token de Slack ni un SDK específico del proveedor.

4. Prueba el recorrido completo: sitio, bandeja y Slack

Envía un mensaje distintivo como “Prueba de contacto, 23 de octubre” desde la página real. Comprueba la bandeja correcta y después Slack. La prueba del destino verifica los avisos; el formulario real también verifica campos y endpoint.

• No hay mensaje en la bandeja: comprueba el endpoint, los campos obligatorios y el estado de respuesta. Un envío no válido o una cuota agotada no crea mensajes.
• Mensaje en la bandeja sin alerta de Slack: comprueba que el destino está activado, revisa su estado de entrega y ejecuta una prueba.
• Alertas en el canal equivocado: comprueba qué webhook guardaste para este proyecto. Crea otro para el canal correcto si hace falta.

Los fallos temporales se reintentan. Si Slack falla, el mensaje sigue guardado en mailcontact. Usa la bandeja como registro cuando el extracto sea corto o necesites una consulta antigua.

¿Puede el email entrante avisar al mismo canal de Slack?

Sí, con Pro. Email y formulario alimentan la misma bandeja y avisos. Escribir directamente genera la misma alerta. Recibir email requiere Pro; Free recibe formularios. Lee la guía de direcciones de proyecto para más detalles.