Envoyer les formulaires de contact vers Slack sans backend

Pour envoyer les formulaires vers Slack, connectez-les à un backend qui stocke l’envoi et notifie via un webhook entrant. Avec mailcontact, utilisez le point de réception du projet et enregistrez le webhook dans ses notifications. Aucun serveur à déployer ni automatisation distincte par site.

Ce guide utilise du HTML simple pour portfolio, landing page ou site statique. Les notifications Slack nécessitent Pro ou Plus ; choisir une offre. Le page des tarifs décrit les offres et quotas de messages actuels.

Fonctionnement de la connexion formulaire-Slack

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

L’URL du formulaire a sa place dans votre HTML public. Le webhook Slack reste dans les paramètres de notification du projet. Ces URL ont des rôles distincts : l’une collecte les messages, l’autre autorise la publication dans le canal.

Ne placez jamais un webhook Slack dans l’action du formulaire, une variable frontend ou un script navigateur. Son URL contient un secret et Slack peut révoquer les webhooks divulgués. Slack attend aussi son propre JSON, pas des champs de formulaire arbitraires. Voir Documentation des webhooks entrants Slack pour la configuration officielle et les conseils de sécurité.

1. Créez un webhook entrant pour votre canal Slack

1. Ouvrir vos applications Slack et créez ou sélectionnez une application dans l’espace de travail voulu.
2. Ouvrir Incoming Webhooks et activez-les.
3. Choisir Add New Webhook to Workspace, sélectionnez un canal et autorisez la connexion.
4. Copiez l’URL du webhook généré. Pour un canal privé, vous devez déjà en être membre.

Choisissez un canal dont les membres doivent voir les demandes du site. Les notifications contiennent les coordonnées et un aperçu du message : un canal public de toute l’entreprise peut être inadapté à des demandes privées. Un canal de projet dédié permet aussi de distinguer les alertes des échanges quotidiens.

2. Enregistrez le webhook dans mailcontact

Ouvrez votre projet dans mailcontact, allez dans Paramètres → Notifications, ajoutez une destination Slack et collez l’URL du webhook. Activez-la, puis utilisez son bouton de test. Vérifiez que le test apparaît dans le canal choisi avant de connecter le formulaire réel.

Les notifications appartiennent au projet. Si vous en gérez plusieurs avec Pro, configurez chaque boîte séparément : toutes peuvent alerter le même canal Slack ou avoir leur destination. Le référence des notifications couvre aussi Discord, les emails et les webhooks personnalisés.

3. Connectez le formulaire de contact de votre site

Copiez le point de réception depuis votre projet et remplacez your-form-id dans cet exemple. Le email et message champs sont obligatoires ; name et subject sont facultatifs.

<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 envoi natif ouvre du JSON en cas de succès ou une page de vérification si nécessaire. Pour afficher les résultats sur place, utilisez le script MailContact hébergé: il injecte le contrôle requis, gère la vérification automatique et conserve le brouillon en cas d’erreur. Les formulaires Free avec script doivent afficher un lien visible « Traité par mailcontact.app ». Les messages placés dans les spams ne déclenchent aucune alerte Slack avant leur restauration.

Le point de réception fonctionne chez plusieurs hébergeurs. Vous pouvez l’utiliser sur GitHub Pages, dans un Page de contact Astro, ou avec un formulaire HTML existant. Votre interface n’a besoin ni de jeton Slack ni de SDK propre à un fournisseur.

4. Testez tout le parcours : du site à la boîte, puis à Slack

Envoyez un message distinctif comme « Test page contact, 23 octobre » depuis la vraie page. Vérifiez la bonne boîte mailcontact, puis l’alerte Slack. Le test de destination vérifie les notifications ; le vrai formulaire vérifie aussi les noms des champs et l’URL.

• Aucun message dans la boîte : vérifiez le point de réception, les champs requis et le statut de réponse. Un envoi invalide ou un quota mensuel épuisé ne crée pas de message.
• Message dans la boîte mais pas d’alerte Slack : vérifiez que la destination est activée, consultez son état de livraison et lancez un test.
• Alerte dans le mauvais canal : vérifiez le webhook enregistré pour ce projet. Au besoin, créez-en un pour le canal voulu.

Les erreurs temporaires de notification sont retentées. Un échec Slack n’efface pas le message stocké dans mailcontact. Revenez à la boîte si l’aperçu du canal est trop court ou pour retrouver une ancienne demande.

Les emails reçus peuvent-ils notifier le même canal Slack ?

Oui, avec Pro. Adresse de réception et formulaire alimentent la même boîte et utilisent les mêmes canaux activés. Un email direct peut donc déclencher l’alerte Slack. La réception d’emails nécessite Pro ; Free reçoit les formulaires. Lire le guide de l’adresse de projet pour les détails.