Background
In a recent Webflow project the client wanted multiple forms with different internal recipients via email. They also wanted to build forms that send different communication based on what the users fill out.
Naturally, coming from many years of developing traditional CMS platforms, I said “that’s no problem”. Then I realized that Webflow (so far at least) only allows for one form configuration.
The consequence is that this applies to all forms on the entire site.
After some research I realized that this is a requested feature - so who knows when it gets implemented.
First answer/solution
You can of course easily integrate third party form solutions using the Embed functionality in Webflow. However, that is not fun at all and I wanted to explore if we could make it work before turning to this option.
Form-data is a very interesting solution to investigate further, but for now I’ll put that on the todo-list.
Approach to finding a solution
I started to ask some questions to myself before approaching this challenge:
- Can the form somehow store information about the requested recipient?
- Can I integrate Webflow with any automation platforms such as Zapier?
- Is it possible to connect the selected automation platform to a simple database or relay information to the appropriate recipient based on the information filled out in the form? Or in combination with third source?
How to store information in the form
I found out that if we use a drop down in the form, it is possible to define the recipients (based on a value, since that is configurable).
That means that I have a standard configuration that applies to each form and for individual forms I have a field that stores the “recipients” information.
In this case it is based on an active choice by the user that selects a department, but it can also be a hidden field.
When setting up the dropdown and the choices, this is the value I defined:
- Value [Emails]
That made it easier in the next step to parse or to extract the information using REGEXP
Are there automation platforms that integrate with Webflow?
First step: I had to investigate if Webflow supports integrations and more specifically with their forms.
✅ The answer I found was that Webflow does send out an event when a form has been submitted. Great!
Second step: Are there automation platforms that have this support?
✅ Zapier was the obivous first platform to investigate as I have used that many times before. Good news is that it does integrate, which you can read more about here. Zapier is very reliable, powerful and easy to work with. It has a huge library of Zaps, but it comes at a cost.
✅ So I continued my exploration and stumbled upon another service that could do everything I wanted to, which also comes to a more understandable price model: Pabbly Connect.
Based on the automation platform, can I distribute the data to the right recipient?
My final step was to parse the data and send an email to the right recipient. At the same time temporarily store the data as fallback.
I found Airtable not only to be a fantastically flexible and powerful database for almost any type of data or structure, but also for automations.
So with Airtable I could store and parse the data, and also relay the information to the right recipient using a connection to selected email client.
Solution to support multiple and recipients in forms on Webflow
To recap the solution:
- Pabbly Connect listens to the “New Form Submission” event from Webflow
- The form post data is parsed and the intended recipients are extracted from the form data
- This data is pushed to Airtable through the “Create record” event
- Airtable stores the data and trigger the automation based on the event “When record is created” that sends a preconfigured email to the recipient
This can most probably be improved and we could probably achieve the relay already in Pabbly, but we use Airtable for other services too, so it made sense in this case.