Receive Discord Alerts on Webflow Form Submissions

Installing this app will create a Discord message in your workspace whenever someone submits a Webflow form on one of your sites. You can use it to be extra responsive when people want to contact you through your Webflow site! The code is totally modifiable after installation, so you can customize the message or expand your app's functionality however you'd like after you fork and deploy it.

By default, this app will respond to submissions from any form on your Webflow site. If you want to use this app with only a specific form on your Webflow site, you can add another handler that responds to the form_submission event with a form_name matching your specific form's name from the Webflow designer.

How It Works

When you link a Webflow site to Autocode on setup, Autocode creates the required webhooks automatically. This app adds a handler for those incoming Webflow form events and constructs a Discord message by sorting the incoming form data fields. If Name or Email fields are present, they are sorted first, followed by other fields your form contains sorted alphabetically:

let embeds = Object.keys(context.params.event.data).sort((a, b) => {
  if (a < b) {
    return -1;
  } else if (b < a) {
    return 1;
  } else {
    return 0;
  }
}).sort((a, b) => {
  if (a === 'Email') {
    return -1;
  } else if (b === 'Email') {
    return 1;
  } else {
    return 0;
  }
}).sort((a, b) => {
  if (a === 'Name') {
    return -1;
  } else if (b === 'Name') {
    return 1;
  } else {
    return 0;
  }
}).map((inputName) => {
  return {
    title: inputName,
    description: context.params.event.data[inputName],
    color: 0x2EB67D
  };
});

Then, it makes a call to the messages.create method within the discord.channels API:

await lib.discord.channels['@0.3.2'].messages.create({
  channel_id: process.env.ALERTS_CHANNEL_ID,
  content: `Your Webflow form, **${context.params.event.name}**, has a new response!`,
  embeds: embeds
});

This API call will send a Discord message to the channel you specify on installation:

Thank You!

Thanks for checking out this app! Follow the Autocode team on Twitter @Autocode for updates. If you have questions, comments, or suggestions, please join our community Discord server!