How to send form submission data from Webflow to Google Tag Manager and PostHog

A guide for marketers, PMs and entrepreneurs who want to track their Webflow form submissions using their GTM

Recently I've started to use Webflow. As a PostHog fan, I wanted to track all custom events and minimize required effort. There was not much content available on the topic, so I wrote my own step-by-step guide on tracking custom events and attributes on Webflow pages with Google Tag Manager and PostHog.

After that, I kept falling in Webflow rabbit hole – started using forms. As a lazy person, I wanted a way to track data from all forms on my website at once. Of course, there wasn't much written on the topic either.

So I figured it out and wrote another step-by-step guide. This post covers setting up tracking for all forms on your Webflow site with 1 script.

It looks like it might turn into a series of posts on the Webflow setup, so tune in.

Why track Webflow form inputs as event attributes?

So, why log all form inputs?

1. I want to save all inputs in a Google Sheet or other CRM for the future. Webflow stores form inputs + it's possible to send the data to other tools with Activepieces or Zapier, but

2. I want to get Telegram notifications whenever someone fills out a form. Activepieces + Telegram bot will do (Zapier does not have Telegram integration), but

3. I want to add form data as Posthog person properties. This way I will link new sessions of the same user with their contact data and reach out to them based on pages they've seen.

I could not do (3) with Activepieces or Zapier and had to find a workaround with Google Tag Manager.

Setup

Setup will take you from 30 to 60 minutes depending on page count if you have already installed Google Tag Manager and PostHog on your Webflow site and started tracking custom events. I assume you've already done it, if not – here's how.

Name the forms

Name each form so you can track where leads come from. It's especially useful if you send the data further via integrations – e.g. Zapier or Activepieces.

Select form, then go to "Settings" tab and fill out "Name":

Name form input fields

After that, name form input fields. Our script will look for these in HTML and parse the data.

It helps to unify field names across all forms on the website – this way you'll have universal GTM variables and PostHog (or other tool) event properties.

Text inputs

Select text box input and change "Name" in "Text Field settings" section:

Radio buttons

For radio buttons, select each radio button separately. Answers to the same question should have the same Group Name value and different Choice Value:

Configure "Submit" button

After that, add Custom attributes and CSS class to the button. Do exactly like explained here, but name the class differently. This way, the new script tracks clicks on "Submit" separately.

Add custom tracking code

Go to "Custom code" section of your website settings in Webflow and paste the snippet below step-by-step description. Change values in getAttribute() and getElementsByClassName() to the ones you use:

<script type="text/javascript">

  var trackFormEvent = function () {

   // variableNameToUseInScript = this.getAttribute('Webflow element Custom attribute')

    var EventCategory = this.getAttribute("eventCategory");
    var EventAction = this.getAttribute("eventAction");
    var EventLabel = this.getAttribute("eventLabel");

    // variableNameToUseInScript = document.querySelector('input[name="Webflow form element X Field settings' Name"]').value;

    var formData = new FormData(document.querySelector('form'));
    var object = {};
    formData.forEach(function(value, key){
        object[key] = value;
  });
    console.log(object);
    var x = Object.assign( {
        // 'GTM variable name': variable_defined_above

        'event': 'webflow_event',
        'eventCategory': EventCategory,
        'eventAction': EventAction,
        'eventLabel': EventLabel
        },
        object
     );
  console.log(x);
    dataLayer.push(x)
   };  

  // Find all of the elements on the page which have the class 'ga-event'

  var elementsToTrack = document.getElementsByClassName("submit_form");

  // Add an event listener to each of the elements you found

  var elementsToTrackLength = elementsToTrack.length;
  for (var i = 0; i < elementsToTrackLength; i++) {
    elementsToTrack[i].addEventListener('click', trackFormEvent, false);
  };

 // console.log(document.querySelector());
</script>

Configure GTM variables

Next step is configuring new Google Tag Manager variables. Use form input field names. Detailed process is described here.

Send data to PostHog

It's a good idea to create a separate GTM trigger and tag to send form submissions to PostHog. This is because you need to send more properties than with most events and update user properties with $set or $set_once.

I prefer using 1 trigger for all of the forms (with filter by eventCategory) and one tag with all possible form questions put in $set section:

<script>
  var eventLabel = {{eventLabel}};
  var eventAction = {{eventAction}};
  var eventCategory = {{eventCategory}};
  var event_name = eventLabel.concat(
      "_",
      eventAction,
      "_",
      eventCategory
      );
  posthog.capture(event_name,
        {
          domain: eventLabel,
          action: eventAction,
          goal: eventCategory,
          $set: 
              { 
                email: {{email}},
                name: {{name}},
                tool_choice: {{tool_choice}}
              }
        }
  );
</script>

Wrapping up

That's a non-obvious way to make your Webflow forms very powerful. If you've set up tracking the data to GTM, then you can send it to most of the tools you'd want to install on your website with JS SDKs.

On top of that, form & field names are already standard across your website, so it would stack much more neatly when sent via Webflow integrations.