Currently, Webflow doesn't support sending form submissions data directly to the CMS, at least not natively, making some things inefficient and time-consuming. Many users struggle with this issue, as setting up 3rd-party software often involves a complex process.

Using several 3rd-party services increases latency when sending forms, leading to low SEO website scores, making it an inefficient and expensive endeavor. The issue becomes particularly prominent when you have a large e-commerce website or blog that sends comments or product reviews to the CMS, as the strict CMS limits get maximized quickly. This incurs extra costs at the end of the month.

However, Trivial can make it possible by helping you bridge the gap between Webflow and the CMS. So, let's dive into the tutorial explaining how to send form data to the CMS using Trivial easily.

Setting up Trivial to Receive Webflow Form Data


To begin, log to your Webflow account. On the left side menu of Webflow, click on the first icon represented by 3 bars, go to Project Settings > Integration, and scroll down to the bottom of the page, where you can find the webhooks section.



Then, click Add Webhook in the new menu and select Form submission as the trigger type. We will use Trivial for the webhook URL where the forms are going to be received.



In Trivial, hit the New app button. Name it, and click the Build it button to start building your app. The process takes approximately 20 seconds.



Once your app is ready, go to the top of the page and set the App trigger. We'll use the Receive Webhook trigger for our use case, then hit the Copy Webhook URL and paste it on the Webhook URL section of your Webflow webhook.



Now, when you send a form on your website, you can go back to your Trivial app and check the app's activity log. You should be able to see that the app just received some form data.



Now, let's configure Trivial to populate the collection we created on Webflow. It'll make it easier to read and approve review forms. The first step is to go to the App Builder of the app we've made in Trivial and add a new action.



Click Add action > Webflow > CreateCollectionItem > Add this action.



Next, click on the pen icon to edit the action. We need to configure the API key, Collection ID, and how we want to transform the data here.



To generate an API key, go back to the integrations page of Webflow. Then, under API Access, click Generate new API token and copy it to the API key section of your Trivial app. Make sure to store the API key safely, as Webflow won't show it a second time. You can also hit the eye button on the right to display the API key on Trivial.



To obtain the Collection ID, go to Webflow, select your website, and click on the Designer button. On the left side, click on CMS Collections and choose the collection we created earlier. Then, under Collection Settings, look for Collection ID and copy it to the section with the same name in your app.



In the fields section, we must use this code: {'name': initialPayload.data.field, _achieved: false, draft: true}



The code makes the API dig through the data and field sections and fetches the form's comment. We also set _achieved: to false, since this is a new table, and _draft: to true, to make sure you can review the form content before it's pushed to the website.


To ensure we have feedback on any errors the CreateCollectionItem action may throw at us, we must set up another action to give us readable information to debug any possible issues. Inside your Trivial app go to App builder > Add action > Pick SendResponse > Add this action.



After adding the action, click the pen to edit it, then click on the body hyperlink. In the body field, input payload, and then hit Save & Rebuild. The payload will output the results of the previous step for us.



Hit Save & Rebuild to make the changes live.

We can go back to the Activity Log and hit Re-send to receive a readable form output when mousing over the Transformation applied section.



When sending a form on the website, you can find the output on Webflow under CMS Collections. Here, you can check its date, time, reviews, and set its status as draft or published.