About 3 minutes · no code

How to Send Framer Form Submissions to Slack or Discord (Step-by-Step)

You already have a form on your Framer site. By the end of this page, every submission will arrive as a message in your team’s channel — with your design, your fields and your success state untouched.

What you need first

A published or draft Framer site with a form on it, and a Slack workspace or Discord server you can sign into.

Slack and Discord work the same way, so this page covers both. The only place they differ is signing in, and that step is split below.

Step 1

Design your form in Framer as usual

Open the page your form should live on. Two placement rules matter, and they are the thing people most often get wrong:

  • Your form sits outside the page frame, beside it on the canvas.

  • The connector you add in step 2 sits inside the page frame.

The connector is what renders on the published site; it pulls in the form you point it at. If you drag your form onto the canvas beside the page and leave it there, you’re set.

Set ‘Send to’ while you’re here. Messages reach your channel whether or not Send To is filled — but your custom states won’t behave without setting it.

A custom multi-field form designed in Framer

Left: your form, loose on the canvas. Right: the connector, nested inside the page frame — see the Layers panel. The purple line is the link between them.

Step 2

Open the plugin and pick your channel

Open the plugin. Framer menu → Plugins → Browse All, search for Framer Forms Connect. Once it’s installed, Plugins → Run Recent Plugin is quicker.

Add Slack or Discord. Both sit under Messengers, near the bottom of the list. Drag one onto your page, or click the +. A connector component lands on the canvas.

Wire the connector to your form. Drag from the purple dot on the edge of the connector onto your form. A purple line joins them, and the connector’s settings in the right-hand panel now name your form. If that field still says Select…, the link didn’t take — drag again.

Connecting HubSpot from inside the plugin

Signing in — Discord

Click Sign in to Discord and approve the connection. That’s all — the plugin sets up the channel webhook for you.

No Discord login? Open Don’t have the login details? Configure manually and paste a webhook URL instead. Useful when a client gives you a webhook but won’t add you to their server.

Signing in — Slack

Click Sign in to Slack and approve the connection.

Connecting HubSpot from inside the plugin
Connecting HubSpot from inside the plugin

Pick the channel

Once you’re connected, choose the channel from the Select Channel dropdown. That’s the whole configuration.

Connecting HubSpot from inside the plugin
Connecting HubSpot from inside the plugin

There are no field names to match. The whole submission is posted to the channel as a message, so nothing needs renaming in your Framer form.
✔ That means you can add or remove fields later without touching the plugin again.
✔ Form name will be a heading of your message.

Step 3

Test, then publish

Hit Publish, open the live URL and send a real submission. Then check the channel — the submission should be sitting there as a message.

A custom multi-field form designed in Framer

Fill it in as a visitor would.

A green line under the form means it went through:

A custom multi-field form designed in Framer

Fill it in as a visitor would.

Last thing before you call it done. Select the Slack or Discord on the canvas and set Show Errors to No. That banner is a build-time diagnostic — useful to you, confusing to visitors.

Publish once more. Every submission now adds a subscriber to your group as it happens.

FAQ

Do I need to rename my form fields?

No. Unlike the CRM and newsletter integrations, messengers post the whole submission as a message, so there are no field names to match.

Form works well on desktop, but collapses on mobile.

Set the wrapper's position as Fill in Framer instead of Fit.

How do I use a separate version of the form on mobile?

You'll need to create a separate form and hide the desktop version on mobile.

Still stuck

Email us at annyeong@romans.design with the site URL and we’ll look at it with you. A real person reads it - no automated responses.

That’s the whole setup.

Every other integration follows the same five steps. Try it on your own site free for seven days.