Send contact form submissions to Slack without a backend

To send website contact form submissions to Slack, connect your form to a backend that stores the submission and sends a notification through a Slack incoming webhook. With mailcontact, you use your project's form endpoint and save the webhook in its notification settings. You do not need to deploy a server or build a separate automation for every website.

This walkthrough uses a plain HTML form, so it fits a portfolio, a product landing page or a static site. Slack notifications require Pro or Plus; choose a plan. The pricing page describes the current plans and message allowances.

How the form-to-Slack connection works

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

The form endpoint belongs in your public HTML. The Slack webhook belongs in your project's notification settings. Those URLs serve different purposes: one collects messages from visitors, while the other authorizes posting into your channel.

Never put a Slack webhook in a form action, frontend environment variable or browser script. Its URL contains a secret, and Slack warns that leaked webhooks can be revoked. Slack also expects its own JSON payload, rather than arbitrary contact form fields. See Slack's incoming webhook documentation for the official setup and security guidance.

1. Create an incoming webhook for your Slack channel

1. Open your Slack apps and create or select an app in the intended workspace.
2. Open Incoming Webhooks and enable them.
3. Choose Add New Webhook to Workspace, select a channel and authorize it.
4. Copy the generated webhook URL. For a private channel, you must already be a member.

Pick a channel whose members should see website enquiries. Notification content includes sender details and a message preview, so a public company-wide channel may be a poor destination for private support requests. A dedicated project channel also makes the alerts easier to distinguish from everyday conversation.

2. Save the webhook in mailcontact

Open your project in mailcontact, go to Settings → Notifications, add a Slack destination and paste the webhook URL. Enable it, then use the destination's test button. Check that the test appears in the channel you selected before connecting the real form.

Notification settings belong to a project. If you manage multiple projects on Pro, configure each inbox separately: they can all alert the same Slack channel, or each can have a destination of its own. The notification reference also covers Discord, email and custom webhooks.

3. Connect your website contact form

Copy the form endpoint from your project and replace your-form-id in this example. The email and message fields are required; name and subject are optional.

<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>

A native submission opens JSON on success or a verification page when needed. For inline feedback, use the hosted MailContact script: it injects the required check, handles automatic verification and preserves drafts on errors. Free script forms require a visible “Processed by mailcontact.app” link. Messages held in Spam send no Slack alert until restored.

The endpoint works across website hosts. You can use it on GitHub Pages, in an Astro contact page, or with an existing HTML form. Your frontend needs no Slack token and no provider-specific SDK.

4. Test the full path from website to inbox to Slack

Submit a distinctive message such as “Contact page test, October 23” through the actual page. Confirm that it appears in the correct mailcontact inbox, then check the Slack alert. The destination test verifies the notification connection; submitting the real form verifies your website's field names and endpoint too.

• No inbox message: check the form endpoint, required fields and response status. An invalid submission or exhausted monthly allowance will not create a message.
• Inbox message but no Slack alert: check that the destination is enabled, inspect its delivery status and run a destination test.
• Alert in the wrong channel: check which webhook you saved for this project. Create a webhook for the intended channel if needed.

Temporary notification failures are retried. A Slack delivery failure does not erase the message already saved in mailcontact. Keep the inbox as the record you return to when the channel preview is too short or you need to find an older enquiry.

Can incoming email notify the same Slack channel?

Yes, on Pro. A project's receiving email address and its form feed the same inbox, and enabled notification channels apply to both. Someone who writes directly to the project address can therefore trigger the same Slack alert as someone using the form. Receiving email requires Pro; Free receives form submissions. Read the project email address guide for the details.