Streaming live at 10am (PST)

Get CMS Item ID to Zapier via Webflow Form Radio

Hello,

I am trying to get a dropdown element in a form to display items from a CMS collection,
then I want to send the corresponding item ID to zapier and use it to update another CMS collection that references the prior.

Another explanation:
Vendors sign up > zapier adds them to the Vendors CMS collection
Consumers enter a new transaction and select a vendor from the list > Transactions CMS collection is updated with the correct vendor selected using zapier webhooks

This way I can display to users which transactions happened with which vendors.

This is my first time really using APIs but my thought is, I can tap into the vendor CMS collection to get IDs then map them to the radio buttons’ values so the data goes through to zapier. I am getting an error (Access to XMLHttpRequest at 'https://api.webflow.com/collections/6169b9b3730958579e92c70c/items' from origin 'https://cpr-mro.webflow.io' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.) when trying to use the API, but I successfully mapped the vendor names based on the innerHTML. Just need the IDs somehow:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
  //  
  // const axios = require('axios').default;
  
  axios.get("https://api.webflow.com/collections/6169b9b3730958579e92c70c/items", {
    headers: {
      "Authorization": "Bearer f6550f1e1e3bc8488091003b77dd5367db502b5dfb3d8a7478892484b0e88b5e", 
      'accept-version': '1.0.0',
      "Access-Control-Allow-Origin": "<origin>"
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  
  // Set vendor radio button values
  const vendors = document.getElementsByClassName("vendor");
  const radios = document.getElementsByClassName("vendor-radio");

  radios.forEach((radio, i) => {
    radio.value = vendors[i].innerHTML;
  });
</script>

Here is my site Read-Only: Webflow - CPR

Can anyone help here?

You can’t call the Webflow API from the web browser, that’s why you’re getting that CORS error (they don’t allow it).

A good approach in this case is to use the “Lookup Table” technique. Here’s a walk through I’ve written on the topic:

Vendors sign up > zapier adds them to the Vendors CMS collection

The key with this is that you create the Webflow CMS Item from a “glue service” (Zapier/Integromat) and store the newly created Item ID. Sounds like you’ve got that covered (Integromat is your best bet with this).

Consumers enter a new transaction and select a vendor from the list > Transactions CMS collection

This is where the “lookup” comes into play for you.

Your exact use-case isn’t covered here, but with a small amount of tweaking you should be able to get this working :smiley: