I am trying to write Java Script code for storing the data submitted through a form in a CMS collection list in webflow. I have some Javascript development experience. Are there any example code available somewhere for me to get started?
Any support will be appreciated.
Please note that I am developing the site for a non-profit organization and they don’t have budget to spend on third party solutions using Zapier, Make etc.
Hi there @gopal_aparna! Great question. Webflow does not natively support writing or updating CMS items directly from frontend JavaScript (like from a form submission). For security and performance reasons, all CMS content in Webflow is managed via the Canvas, the Editor, or the Webflow CMS API—which must be accessed via server-side code or a secure backend (to keep your API token safe). That said, here’s a basic outline of how you can achieve what you want without using paid third-party tools like Zapier or Make:
What you’ll need:
A form on your Webflow site
A backend endpoint (ie. on Firebase Functions, Supabase, Vercel, or another free tier service). This would allow you to make API calls to Webflow
The Webflow CMS API
Your CMS Collection ID and API Token (from Webflow Project Settings > Integrations)
How it could work:
User submits a Webflow form
Custom JavaScript catches the submission and sends the form data via fetch() to your backend
Your backend receives the request, uses your Webflow CMS API token (securely stored) to create a new CMS item
Webflow CMS updates with the form data
If you try to call the Webflow CMS API directly from the frontend:
You’ll expose your private API token (a major security risk)
CORS and authentication will likely block the request
So, a backend service (even on a free tier) is required to securely act as a middleman between your site and the CMS API. Hope this helps!
@gopal_aparna adding to Veronica’s notes, since you’re familiar with JS you might look at using Netlify’s functions, which can be written and deployed as JS. into a free Netlify middle tier. This protects your API key and prevents CORS issues.
Note however, there’s no “built in” security in these types of arrangements. If you put your serverless function URL directly in the form Action field, there is a high risk of spambots picking it up and sending you spam submissions.
Most likely, you’re better off using Webflow’s native forms and then the form submission Webhook so that results are already SPAM-checked and your middle tier isn’t directly exposed in the HTML.
Also, if you only have only 1 or 2 “endpoints” and relatively low traffic, you might want to check out Make’s automations. I believe the free plan gives you 2 automations, and a useful number of executions.