Mastering Form Submissions in Webflow: A Comprehensive Guide

Form submissions are an integral part of any website, be it for collecting user feedback, conducting surveys, or generating leads. When it comes to Webflow, leveraging the power of form submissions can seem a bit daunting due to the absence of detailed documentation. Fear not, this comprehensive guide is here to help you master form submissions in Webflow, right from setting up a webhook to retrieving form data using the API.

The Problem: Retrieving Form Submissions

As a Webflow user, you might have faced challenges in retrieving form submissions. The issue often arises when you set up a webhook for your email form but are unable to fetch the form submission from the webhook. The Webflow documentation and JavaScript SDK may not offer a clear path to this.

The Solution: Understanding Webhooks and Form Data

Webhooks are essentially user-defined HTTP callbacks. When a certain event occurs, the source site makes an HTTP request to the URL configured for the webhook. In the case of Webflow, the form data itself is included in the body of the request that is sent to your server. You can either opt for the non-code way of using Zapier or go for the coding way. This guide is focused on the latter.

Setting Up A Webhook

Webflow allows you to set up a webhook that receives all form submissions. However, it's recommended to set up a new webhook per form submission. This way, you know that a specific form is going to a specific webhook. As a pro tip, you can use a simple, free tool like Webhook Creator to access all of the Webflow Webhooks without having to learn computer commands like “curl” or what an “Authorization Bearer” is.

Retrieving Form Data

Once you have the webhook set up, the next step is to retrieve the form submission based on the webhook using the API. The form data is included in the webhook. You can refer to the Webflow Workshop #64: A sneak peek into the Webflow CMS API video for an in-depth explanation on how to retrieve a form submission based on a webhook using the API.

Filtering Form Submissions

While the Webflow admin only allows selecting form submissions in general, the filter parameter in the API can sort by the form name. This allows you to make the trigger type an individual form. You can also use tools like Integromat or Zapier to filter your form submissions or use their paid upgrades to conditionally route based on the form name.

Conclusion

Mastering form submissions in Webflow may seem like a challenge initially, but with the right understanding of webhooks and APIs, you can easily navigate this task. Remember, practice makes perfect, so don't shy away from testing and experimenting with your forms.

Pro Tip: Using Hidden Fields for Better Analytics

For advanced users, here's a little gem that can make a huge difference in your data collection. When setting up your forms, consider adding hidden fields. These are not visible to your visitors, but can hold valuable information that gets passed along with the form submission.

For example, you can use a hidden field to record which page the form was submitted from, the time of the submission, or even specific campaign tracking codes. This can be incredibly useful for understanding the effectiveness of different pages or campaigns, and can add a whole new level of depth to your data analysis.

To set this up in Webflow, simply add a new field to your form, and select the 'Hidden' field type. You can then use custom code to dynamically populate this field. It might take a bit of tinkering, but the insights you can gain make this a top tip for any Webflow power user.