Prerequisites

  1. Google Tag Manager (GTM) is installed correctly on all pages.
  2. Your Fluent Form is configured in its settings to redirect to a dedicated Thank-You page upon successful submission.

Part 1: The Form Submission Page Script (The Data Bridge)

This script's job is to capture the user data immediately upon submission and save it to the browser's temporary storage (localStorage) before the page redirects. This script must be placed on every page that contains a Fluent Form, ideally right before the closing </body> tag.

Step 1.1: Insert the Data Bridge Script

Add the following code to the footer or just before the closing </body> tag of your form pages:

<script>
document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll("form.frm-fluent-form").forEach(form => {

        // Helper function to gather the form data
        const gatherFormData = () => ({
            content_name: document.title, // Page Title for context
            // Ensure these selectors match the 'name' attributes of your form fields
            firstname: form.querySelector('input[name="names[first_name]"]')?.value || "",
            email: form.querySelector('input[name="email"]')?.value || "",
            phone: form.querySelector('input[name="phone"]')?.value || "",
            formname: form.querySelector('input[name="formname"]')?.value || "" // Value from your hidden formname field
        });

        const saveFormData = () => {
             const data = gatherFormData();
             // Save the collected data to localStorage under a specific key
             localStorage.setItem("formSubmissionData", JSON.stringify(data));
             console.log('GTM Bridge: Form submission data saved to localStorage.');
        }

        // 1. PRIMARY LISTENER (Listens for the successful AJAX submission event)
        form.addEventListener("fluentform_submission_success", saveFormData);

        // 2. ROBUST FALLBACK (Listens for the native browser submit event)
        // This is crucial for forms set to immediately redirect, ensuring data is saved
        // before the browser navigates away.
        form.addEventListener("submit", saveFormData);
    });
});
</script>

Part 2: The Thank-You Page Script (The Event Fire)

This script's job is to run on the Thank-You page, retrieve the data saved in Part 1, push a Custom Event and the data to GTM's Data Layer, and then clean up the storage. This script must be placed on your dedicated Thank-You page, after the GTM container code.

Step 2.1: Insert the Conversion Firing Script

Add the following code to the footer or just before the closing </body> tag of your Thank-You page:

<script>
document.addEventListener("DOMContentLoaded", function() {

    // Helper: Retrieve saved form data
    function getStoredData() {
        try {
            const raw = localStorage.getItem("formSubmissionData");
            return raw ? JSON.parse(raw) : null;
        } catch {
            return null;
        }
    }

    const data = getStoredData();

    if (!data) {
        console.warn("GTM Bridge: No form submission data found. Conversion tracking skipped.");
        return;
    }

    // --- PUSH TO GTM DATA LAYER ---
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        // 1. The Custom Event name (used for the GTM Trigger)
        event: "formSubmission",

        // 2. RAW PII and Form Context Data (used for GA4 Event Parameters and Enhanced Conversions)
        Firstname: data.firstname,
        Email: data.email,
        Phone: data.phone,
        "Form Name": data.formname
    });

    console.log('GTM Bridge: Successfully pushed formSubmission event to Data Layer.');

    // --- CLEANUP ---
    // Remove the data from localStorage to prevent re-firing on refresh or revisit.
    localStorage.removeItem("formSubmissionData");
});
</script>

Part 3: Google Tag Manager Configuration

This part connects the Data Layer push to your GA4 tag, enabling the generate_lead event and Enhanced Conversions.

Step 3.1: Create Data Layer Variables

  1. In GTM, navigate to Variables > New (User-Defined Variables).
  2. Create a Data Layer Variable for each piece of data:
Data Layer Variable Name Variable Name
Firstname {{DLV - Firstname}}
Email {{DLV - Email}}
Phone {{DLV - Phone}}
Form Name {{DLV - Form Name}}

Step 3.2: Create the User-Provided Data Variable (Enhanced Conversions)

This variable combines the PII and prepares it for Google's matching system.

  1. In GTM, create a New variable.
  2. Select User-Provided Data type.
  3. Set the Type to Manual Configuration.
  4. Map the Data Layer Variables created in Step 3.1:
    • Email: {{DLV - Email}}
    • Phone: {{DLV - Phone}}
    • First Name: {{DLV - Firstname}}
  5. Save this as {{User-Provided Data}}.

Step 3.3: Create the Custom Event Trigger

  1. In GTM, navigate to Triggers > New.
  2. Select Custom Event type.
  3. Set the Event Name to: formSubmission (Must match the script exactly).
  4. Fires on: All Custom Events.
  5. Save this as Form Submission Custom Trigger.

Step 3.4: Update the Google Tag (Configuration Tag)

To enable Enhanced Conversions, you must pass the PII variable to the main Google Tag.

  1. Navigate to your main Google Tag (your configuration tag that fires on all pages).
  2. Under Configuration Settings, add a new Configuration Parameter:
    • Configuration Parameter Name: user_data
    • Value: {{User-Provided Data}}

Step 3.5: Create the GA4 Event Tag

  1. In GTM, navigate to Tags > New.
  2. Select Google Analytics: GA4 Event type.
  3. Configuration Tag: Select your existing Google Tag.
  4. Event Name: generate_lead (GA4 standard event).
  5. Under Event Parameters, add the Data Layer Variables:
Parameter Name Value
firstname {{DLV - Firstname}}
email {{DLV - Email}}
phone {{DLV - Phone}}
formname {{DLV - Form Name}}
  1. Triggering: Attach the Form Submission Custom Trigger created in Step 3.3.

Part 4: Final Testing

  1. GTM Preview Mode: Put GTM into Preview Mode.
  2. Form Page: Navigate to the form page and check the browser console to confirm the message GTM Bridge: Form submission data saved to localStorage.
  3. Thank-You Page: Submit the form and land on the Thank-You page.
  4. GTM Debugger Check:
    • The formSubmission event must appear in the left-hand panel.
    • Click on formSubmission and verify that your Website Form Submission GA4 tag fired under Tags Fired.
    • Check the Data Layer tab to ensure the Firstname, Email, etc., values were passed correctly.

Once testing is complete, Publish your GTM Container.