One of the most requested features missing from Webflow is the submission of form data to its CMS.
Webflow is a very interesting tool for building websites in a codeless approach. It bridges the gap between developers and designers, as it allows you to create mockups and prototypes in html and css and its drag & drop platform allows you to visualize and manipulate CSS parameters.
Its CMS allows you to create hundreds of pages at a time thanks to its templates and also allows you to build collections to help you develop your business: launching your e-commerce, describing products and building forms to get customers more easily.
With so many features, it would be obvious to think that it would also allow its CMS to collect the information that a user puts into a form. But unfortunately, this can't be done directly with Webflow, yet.
Some weeks ago, we migrated YepCode webpage to Webflow, and we are delighted with the result.
We also included the Webflow integration (https://docs.yepcode.io/integrations/webflow/), and a bunch of recipes (https://yepcode.io/recipes/webflow/) to move information to and from this service.
In this post, we'll discuss one of the most important aspects that Webflow lacks. Send form submission data to CMS
The basic steps of this guide are:
This is up to you. In our case, we are going to create a Pets collection.
Create a new page adding the form. Include a field for each CMS Entry attribute, taking care to use the same name.
Go to your YepCode account (you may create one for FREE), and create a new process using the following source code.
You should create a new Webflow credential with name my-webflow, and you must generate an API key for a site. To do that, open the site in the dashboard and navigate to the "Settings" pane. There is a section titled "API Access", where you can generate a new API key that must be provided in the token field.
You should also configure your CMS collection ID, that is available in your CMS collection page:
After that, you should create a webhook for this process, in order to be called from Webflow:
Go to your project Integrations settings:
And create a new webhook for each Form submission. The URL to be used should be the one that YepCode provides with the webhook creation.
Just publish your Webflow site and visit the form page. Each submission will instantly create the CMS entry.
This was just a sample use case, but you could complicate it as much as needed, adding more login to the YepCode process: retrieve information from any other service, also store the information in one external database ,etc
Thank you for reading :) and...
Happy coding!