How to send Webflow form image uploads to the CMS as drafts with Zapier and Webflow Cloud
Blog post from Webflow
A Webflow Cloud and Zapier workflow can eliminate manual re-uploading of form-submitted images by sending each Webflow form submission’s public file URL to a Next.js Route Handler, which authenticates the request and creates a draft CMS item through the Webflow API. The setup requires a CMS collection with matching name, caption, and image fields, a file-upload form on an eligible Webflow plan, a write-enabled API token, a Zapier webhook, and a Next.js 15 project deployed through Webflow Cloud using npm. Uploaded files must have public link access enabled, use HTTPS, and meet the CMS’s 4 MB image limit, while the route uses a shared secret, validates payload data, ensures Webflow reports invalid files rather than silently omitting them, and generates unique timestamped slugs. Deployment requires storing tokens and configuration in environment variables, accounting for the Webflow Cloud mount path in the webhook URL, and mapping the form fields correctly in Zapier before testing a live submission. The process creates items as drafts for editorial review, but the basic shared-secret approach should be strengthened with rate limiting, replay protection, and signed time-bound verification for production use. Common problems include incorrect mounted URLs, mismatched CMS field slugs, inaccessible or unsupported images, accidental use of the unsupported Next.js edge runtime directive, and Node filesystem modules that do not work in Webflow Cloud’s Workers environment.
| Trend | Post Mentions | Total Month Mentions | Posts | Companies | MoM |
|---|---|---|---|---|---|
| Secrets Management | 4 | 2,195 | 470 | 125 | +7% |
| Edge Computing | 3 | 107 | 30 | 11 | +20% |
Use this post, company, and trend context to find content marketing opportunities, perform competitive analysis, or address product feature gaps via the Plushcap MCP server or the Plushcap API.