Cómo conectar un formulario HTML a Slack, Discord o Telegram

Recibir notificaciones instantáneas cuando alguien envía su formulario es esencial para los equipos de ventas, los servicios de soporte y cualquier persona que necesite responder rápidamente. Slack, Discord y Telegram admiten webhooks entrantes que lo hacen posible.

Esta guía cubre tres enfoques: integraciones nativas a través de un backend de formularios, reenvío directo de webhooks y creación de una solución personalizada.

Enfoque 1: integración nativa (recomendado)

Los servicios de backend de formularioss como FormsFort ofrecen integraciones integradas de Slack, Discord y Telegram. Sin webhooks, sin middleware, sin código.

Integración de Slack

1. En el panel de FormsFort, abra la configuración de su formulario
2. Navegue a la sección de Notificaciones
3. Seleccione Slack
4. Autorizar la aplicación FormsFort Slack
5. Elige el canal para recibir notificaciones
6. Ahorre

Cada envío de formulario aparece como un mensaje formateado en el canal:

1
New form submission
2
Name: Ada Lovelace
3
Email: [email protected]
4
Message: Need help with integration setup
5
Submitted: 2026-05-28 at 2:32 PM

Integración de Discord

1. Abra la configuración de su formulario en el panel de FormsFort
2. Navegue a Notificaciones
3. Seleccionar Discord
4. Paste your Discord webhook URL (create one in Server Settings > Integrations > Webhooks)
5. Ahorre

Integración de Telegram

1. Crea un bot de Telegram a través de @BotFather
2. Agregue el bot a su grupo o inicie un chat directo
3. Obtenga la identificación del chat (use @userinfobot o la API de Telegram)
4. En FormsFort, ingrese el token del bot y el ID de chat
5. Ahorre

Enfoque 2: reenvío de webhook

Si el backend de su formulario admite webhooks pero no integraciones nativas, reenvíe los envíos a los webhooks de la plataforma de mensajería directamente.

Webhook entrante de Slack

1. Crea una aplicación de Slack en api.slack.com
2. Habilitar webhooks entrantes
3. Crea una URL de webhook para tu canal
4. Configure el backend de su formulario para POST en la URL del webhook

El webhook espera una payload JSON:

1
{
2
  "text": "New form submission",
3
  "blocks": [
4
    {
5
      "type": "section",
6
      "text": {
7
        "type": "mrkdwn",
8
        "text": "*New form submission*\n*Name:* Ada Lovelace\n*Email:* [email protected]\n*Message:* Need help with integration"
9
      }
10
    }
11
  ]
12
}

Webhook de Discord

1. Go to Server Settings > Integrations > Webhooks
2. Cree un nuevo webhook para su canal
3. Copie la URL del webhook
4. Configure el backend de su formulario para POST en la URL

Discord Los webhooks aceptan este formato JSON:

1
{
2
  "content": "New form submission",
3
  "embeds": [
4
    {
5
      "title": "New Contact Form Submission",
6
      "fields": [
7
        { "name": "Name", "value": "Ada Lovelace", "inline": true },
8
        { "name": "Email", "value": "[email protected]", "inline": true },
9
        { "name": "Message", "value": "Need help with integration" }
10
      ],
11
      "color": 3066993
12
    }
13
  ]
14
}

API de bot de Telegram

Enviar mensajes a través de la API de Telegram Bot:

1
POST https://api.telegram.org/bot<TOKEN>/sendMessage
2
{
3
  "chat_id": "-1001234567890",
4
  "text": "New form submission\nName: Ada Lovelace\nEmail: [email protected]\nMessage: Need help"
5
}

Enfoque 3: Función personalizada sin servidor

Si necesita control total sobre el formato de notificación, cree una función sin servidor que reciba el webhook del formulario y lo reenvíe a las plataformas de mensajería.

1
// Example: Cloudflare Worker or Vercel Edge Function
2
export default {
3
  async fetch(request) {
4
    const data = await request.formData();
5
    const name = data.get("name");
6
    const email = data.get("email");
7
    const message = data.get("message");
8

9
    const slackWebhook = "https://hooks.slack.com/services/YOUR/WEBHOOK/URL";
10
    await fetch(slackWebhook, {
11
      method: "POST",
12
      headers: { "Content-Type": "application/json" },
13
      body: JSON.stringify({
14
        text: `*New submission*\n*From:* ${name} (${email})\n*Message:* ${message}`,
15
      }),
16
    });
17

18
    return new Response("OK");
19
  },
20
};

Configure el backend de su formulario para reenviar los envíos a la URL de esta función.

Formateo de notificaciones

Incluir metadatos de envío

Agregue contexto a las notificaciones:

• Marca de tiempo
• URL de página donde se envió el formulario
• Agente de usuario o tipo de dispositivo
• Identificador de formulario

Utilice formato condicional

Resalte los envíos de alta prioridad:

1
🔴 URGENT: Enterprise lead from [email protected]
2
   Company: BigCorp (500+ employees)
3
   Budget: $50,000+
4
   Message: Need immediate quote

Envíos relacionados con hilos

En Slack, utilice el hilo de mensajes para agrupar envíos desde la misma dirección de correo electrónico o sesión.

Filtrado y enrutamiento

Enrutar por valor del campo del formulario

Enviar envíos a diferentes canales según los valores de los campos:

Filtre el spam antes de notificar

Solo envíe notificaciones para envíos que pasen controles de spam. Esto evita que los canales de su equipo se inunden con envíos de bots.

Resumen

Conecte formularios HTML a Slack, Discord o Telegram utilizando integraciones nativas en su servicio backend de formularioss para la configuración más sencilla. Para un formato personalizado, utilice el reenvío de webhooks para publicar directamente en las URL de webhooks de la plataforma. Para obtener un control total, cree una función sin servidor que reciba webhooks de formularios y reenvíe mensajes formateados a cualquier plataforma. Todos los enfoques envían notificaciones a los pocos segundos de su envío.