How to handle Webflow Multi-Reference Fields from Form Submissions

This Autocode app provides an example of how to handle Webflow form submissions that include multi-reference fields and using them to create new collection items in the Webflow CMS with the webflow.collections API from Autocode's Standard Library.

You can deploy and run this app on your account, then fork it to a sandbox to modify it fit your needs or use it as a starting point for your own project.

TLDR (30s)

Before installing the app, you first need to clone the Webflow site by clicking here, then pressing on the Clone button on the top right to copy the sample blog form site to your own Webflow account. Then, you need to map the values of each category field in the form to the corresponding Category item ID and publish the site. (If you're not sure how to get the category IDs, check the How It Works section below).

Once you've cloned and published the Webflow site, click on the green install button to install the app to your account. You'll then be asked to link your Webflow site, simply follow the instructions to do so. Next, you'll need to set the COLLECTION_ID environment variable for the Blog Posts collection in the site you cloned. (If you're not sure how to get the collection id, check the How It Works section).

You're good to go! Once the app finishes installing and deploying, you can go to your Blog Site and submit a form including some Categories (multi-reference fields). A new blog post will appear in the CMS referencing the correct categories that were selected!

How It Works

Prerequisites

Before you start, you'd need to setup clone and setup the Webflow site:

Click on the Clone button on the top right corner of this page
Map each of the category fields in the form to their corresponding Category Item IDs

You can find the category IDs, by navigating to the CMS, then clicking on each of the Category Items in the Categories Collection

Publish the cloned site to be able to make form submissions

Under the hood

When you link your Webflow site to your app, Autocode takes care of the Authentication, creation and validation of webhooks to listen to form submission events, and making API calls to Webflow.

This app listens to all form_submission events coming from the linked Webflow site by default, you'll notice a wild card * is specified in the form_name field in the event handler. If you'd like to specify a certain form to listen to submission events from, you can add a new form_submission event handler and set the form_name to your specific form's name defined in the Webflow designer.

Diving into some code

The event handler is simply an exported JavaScript function that takes in a parameter called event that represents the event coming in from Webflow. This function runs every time a form is submitted on your site:

const lib = require('lib')({token: process.env.STDLIB_SECRET_TOKEN});

/**
* An HTTP endpoint that acts as a webhook for Webflow form_submission event
* @param {object} event
* @returns {object} result Your return value
*/
module.exports = async (event) => {
  // event handler logic
}

We include all the logic that we would like to run whenever we get a new event, i.e. when a form is submitted on our site. Here's the general structure of the event object:

{
  "event": {
    "d": "2020-08-26T16:29:54.226Z",
    "_id": "000000000000000000000000",
    "data": {
      [SUBMITTED FORM DATA]
    },
    "name": "FORM_NAME",
    "site": "000000000000000000000000"
  }
}

And here's a breakdown of the different event fields:

d: the datetime when the form was submitted
_id: the id of the form submission
data: the data that was submitted in the form
name: the name of the form that was submitted
site: the id of the site where the form was submitted

In our case, with the way the form is setup in the sample Blog Site, the data object would look like the following:

"data": {
  "Title": "[SOME_TITLE]",
  "Content": "[SOME_CONTENT]",
  "Categories": "000000000000000000000001,000000000000000000000002,000000000000000000000003"
}

An important thing to note here is the Categories field. You'll notice it contains a comma separated string with different IDs instead of an array. These IDs reference the different Category objects from the Categories collection in the CMS. There can be multiple IDs (or none), hence the name multi-reference fields.

Creating a Collection Item with Multi-Reference fields

Next we look at creating new collection items with multi-reference fields. When we get a new form submission we first check if the multi-reference field (in our case Categories) is present in data object of the event. If it is, simply split it on the commas , to get a list of IDs:

let categoryIDs = (event.data.Categories && event.data.Categories.split(',')) || [];

Based on the example event object mentioned earlier, it will convert it to the following:

["000000000000000000000001", "000000000000000000000002", "000000000000000000000003"]

Note: You'd need to do this for every multi-refernce field you have in order to pass it in the endpoint below to create the collection item.

Next, to create the collection item in Webflow we utilize the collections.items.create endpoint, and pass in the required fields:

  await lib.webflow.collections['@1.0.0'].items.create({
    collection_id: process.env.COLLECTION_ID,
    fields: {
      'name': `${event.data.Title}`,
      'categories': categoryIDs,
      '_archived': false,
      '_draft': false
    },
    live: true
  });

collection_id: is the ID of the collection in the CMS to create the item in. To get that ID, navigate to the CMS tab in the Webflow designer of your site, then click on the settings button for the Collection (in this case Blog Post) and it should be there

fields: the fields of the item that will be created. Notice how we passed in the fieldsIDs list to reference the categories that the blog post refers to, that way Webflow would know which categories objects to refer to
live: whether or not the item should be published to the live site when created

Once that endpoint is called, the new item will be created and appear in the Blog Posts CMS in Webflow.

Putting it all together

The final result of putting the whole event handler logic together would look like this:

const lib = require('lib')({token: process.env.STDLIB_SECRET_TOKEN});

/**
* An HTTP endpoint that acts as a webhook for Webflow form_submission event
* @param {object} event
* @returns {object} result Your return value
*/
module.exports = async (event) => {
  let result = {};

  let categoryIDs = (event.data.Categories && event.data.Categories.split(',')) || [];

  await lib.webflow.collections['@1.0.0'].items.create({
    collection_id: process.env.COLLECTION_ID,
    fields: {
      'name': `${event.data.Title}`,
      'categories': categoryIDs,
      '_archived': false,
      '_draft': false
    },
    live: true
  });

  return result;
};

Testing with different payloads

You can test different event payloads from within the Autocode editor, without the need to deploy and test with actual form submissions, this is super useful to not use up your Webflow form submissions quota!

To do so, you can click on the Test Event Payloads button at the top of the form_submission handler, a modal would open up containing a test payload for the event that you can modify and then save.

When you're ready to test, simply click on the Run Test Event button on the bottom left corner. That would run the event handler with the payload you set, and open up a side modal containing any logs or errors you may have.

That's It!

If you have any questions or feedback please feel free to join our community Slack channel. You can get an invite from the Community Tab in the top bar of the page.

You can also follow the Autocode team on Twitter for updates @AutocodeHQ.