How to Track Webflow CMS Form Submissions | Step-by-Step Guide

When working with Webflow CMS, one common challenge is tracking which specific page a form submission comes from. This can be crucial for optimizing lead magnets, understanding which blog posts drive sign-ups, and pinpointing the effectiveness of course landing pages. Unfortunately, Webflow doesn't offer a native solution for this. But don’t worry, we've got a workaround that will make this possible.

In this tutorial, we'll cover:

1. Configuring your form inside the Webflow CMS.
2. Handling multiple forms in a Webflow project.
3. Sending form submissions to Airtable.
4. Enhancing your existing Webflow form submissions.

By the end of this tutorial, you'll be able to track the origin of your Webflow CMS form submissions, manage multiple forms efficiently, and integrate your data with Airtable for better analysis and insights.

Configuring Webflow Forms on Webflow CMS Pages

The first step is to configure your form to pass through the name of the page where the form is submitted. Here’s how to do it:

Step 1: Access Your Form Fields

• Navigate to the form field inside your Webflow CMS.
• You'll see all the individual form fields.

Step 2: Add a Custom Embed

• Drop in a new field or item in your form element.
• Search for "Embed" to bring up the code embed editor.

Step 3: Insert the Code Snippet

<input type="hidden" id="workshopName" name="workshopName" value="">

• Use a specific code snippet to create a hidden input field in your form. This snippet will pre-populate with the page name dynamically.
• The input type will be hidden so users won’t see it.
• Set the ID and name of the form input to something recognizable, like workshop-name.

Step 4: Make the Field Dynamic

• Populate the value dynamically by selecting the relevant CMS field from your collection.

Step 5: Position the Embed

• Ensure this embed sits before the form’s submit button to ensure the data passes through correctly.

Step 6: Name Your Form

• Give your form a clear and consistent name, such as workshop-form.
• Ensure all form input fields are properly named to avoid issues later, e.g., first-name, last-name, and email.

Step 7: Publish Your Form

• Once everything is set up, publish your form.

Now that your form is configured to track the page origin, the next step involves setting up workflows to handle the submissions and send the data to Airtable. This will ensure you get detailed insights into which pages are generating the most valuable form submissions.

Handling Multiple Webflow Forms with Filters in Make.com

If you have multiple forms on your website—such as newsletter sign-ups, workshop registrations, or course inquiries—you’ll need to manage them separately to ensure that each submission follows the correct workflow. Here’s how to do it:

Adding Filters to Differentiate Webflow Forms

1. Open Your Scenario:
   • Log into your Make.com account and open the scenario you created for your Webflow form submissions.
2. Locate the Form Submission Module:
   • Find the module that captures form submissions from Webflow.
3. Add a Filter:
   • Click on the line connecting the Webflow module to the next step in your workflow.
   • Select "Add Filter."
4. Configure the Filter Conditions:
   • Set the condition to check the form name or identifier. For example:
     • Field: form_name
     • Condition: Equals
     • Value: workshop_form
   • This ensures only submissions from the form named workshop_form proceed through this path.
5. Create Additional Paths:
   • Duplicate the subsequent steps for each additional form you have, adjusting the filter conditions accordingly. For example:
     • Field: form_name
     • Condition: Equals
     • Value: newsletter_form
   • Ensure each path has a unique filter based on the form name.

By setting up these filters, you ensure each form submission is processed correctly and efficiently, with data routed to the appropriate workflows and systems.

Sending Webflow Form Submissions to Airtable

With your filters in place, the next step is to send the form submissions to Airtable. This will allow you to manage and analyze your form data effectively.

Step-by-Step Guide to Create Airtable Records

1. Create a Record in Airtable:
   • In Make.com, add a module to create a record in Airtable for each form submission.
2. Map the Form Fields:
   • Map the fields from the form submission to the corresponding fields in your Airtable base. This typically includes:
     • Email field to Airtable email field
     • First name to Airtable first name field
     • Last name to Airtable last name field
     • Workshop name or page name to the corresponding field in Airtable

Adding to your Webflow Form Submission Workflow

Once you have the basic setup working, you can enhance your form submissions by integrating with additional tools and adding extra features.

Adding Subscribers to MailerLite from Webflow Forms

• If you want to add form submitters to your mailing list, you can integrate with MailerLite.
• In Make.com, add a module to add a subscriber to MailerLite.
• Map the email and other relevant fields from the form submission.

Sending Slack Notifications for Webflow Form Submissions

• To stay informed about new form submissions, you can set up Slack notifications.
• In Make.com, add a module to send a message to a Slack channel.
• Customize the message to include details from the form submission.

By following these steps, you’ll have a robust system for tracking Webflow CMS form submissions, understanding user behavior, and optimizing your content and landing pages effectively.

If you have any questions, feel free to reach out, and I look forward to seeing you in the next tutorial.

‍