This tutorial will show you how to capture form data and input values from Fluent Forms submissions that you can use with Google Analytics, Facebook Pixel, or any other tracking system. This method allows you to access both the raw form inputs and Fluent Forms’ processed submission data, giving you complete control over what data you send to your analytics platforms.
If you need to track form submissions and send specific form data to Google Analytics, Facebook Pixel, or other tracking systems, you’ll need a way to capture the form inputs when a user successfully submits a Fluent Form. This tutorial shows you how to hook into Fluent Forms’ success event to extract form data that you can then use with any analytics platform.
This approach is particularly useful for e-commerce sites, lead generation forms, or any situation where you need to track specific form values for conversion tracking or user behaviour analysis.
Why Capture Form Data on Submission?
Before we dive into the implementation, here’s why this technique is valuable:
- Track conversion values for e-commerce analytics
- Create custom events in Google Analytics with form-specific data
- Trigger Facebook Pixel events with dynamic values
How It Works
The solution uses jQuery to listen for Fluent Forms’ success event, then captures both the raw form inputs and the processed submission data. This gives you access to:
- All form field values as entered by the user
- Fluent Forms’ processed response data
- Submission ID and other metadata
Implementation Steps
Follow these steps to implement form data capture:
Step 1: Identify Your Form
First, you need to identify your form’s ID. You can find this in your Fluent Forms dashboard or by inspecting the form element in your browser. The form ID will be something like fluentform_3 where 3 is your form’s ID number.
Step 2: Add the JavaScript Code
Add the following code to your theme’s footer, a custom JavaScript file, or using a code snippet plugin. Make sure to replace the form ID with your actual form ID.