How to track form submissions with GTM

Tracking form submissions allow capturing valuable leads and associating visitors with their contact details. However, configuring a trigger correctly, and recording values of fields essential for enhanced tracking and attribution such as customer email or phone, can be challenging. This post explains how to create a trigger for such forms in Google Tag Manager (GTM) and send a custom event to Able CDP.

Note: if you're using Able CDP, this is normally not required as forms will be recognized and tracked automatically instead.

In this guide, you’ll configure GTM to detect form submissions by targeting forms based on the submit button’s caption (e.g., "Submit," "Sign Up," or "Send"). This approach avoids relying on fixed element IDs or adding JavaScript event listeners manually.

Step 1: Inspect the Form and Submit Button

To configure your Google Tag Manager (GTM) trigger effectively, you need to carefully analyze the form and submit button using your browser's developer tools. This step-by-step guide will walk you through the process of inspecting and identifying the unique properties of a form's submit button.

Preliminary Steps: Accessing Developer Tools

1. Open the Page with the Form
   • Navigate to the specific webpage containing the form you want to track.
   • Ensure you're on the exact page where the form is located.
2. Open Developer Tools
   
   There are multiple ways to access the developer tools inspector:
   
   
   1. Method 1: Right-Click Inspection
      • Locate the form's submit button on the page
      • Right-click directly on the button
      • Select "Inspect" from the context menu
        
        
   2. Method 2: Keyboard Shortcuts
      • Windows/Linux: Press Ctrl+Shift+I
      • macOS: Press Cmd+Shift+I
      • Alternative Method: Press F12
        
        
   3. Method 3: Browser Menu
      • Chrome: 
        1. Click the three-dot menu in the top right
        2. Select More Tools > Developer Tools
      • Firefox:
        1. Click the hamburger menu
        2. Select Web Developer > Toggle Tools
      • Safari:
        1. Enable Developer menu in Preferences
        2. Select Develop > Show Web Inspector

Identifying Button Properties

The next step would be to use developer tools to identify how form's submit button and input fields can be identified. The goal is to choose the most specific, stable identifier. It's usually best to prefer semantic attributes over fragile selectors and test the selector across different page states.

Unique Identifier Strategies

1. Button Text (Caption)

• In GTM, use the "Click Text" condition
• Pros: Simple to implement
• Cons: Can be unreliable if text changes frequently

Look for text-based identifiers within the button's HTML:

<button type="submit">Sign Up</button>
<input type="submit" value="Submit">
<a class="submit-button">Register Now</a>

GTM trigger settings:

• Trigger Type: Click
• Click Trigger Selector: Matches CSS Selector
• Trigger Option: Some Clicks
• Constraint: Click Text equals "Submit"

2. HTML Attributes

Examine various attributes that can uniquely identify the button:

CSS Classes

This is the Most reliable and recommended method. Make sure to use the most specific class name as a selector and avoid generic classes like 'btn'.

<button class="form-submit-btn primary-action">Submit</button>

GTM trigger settings:

• Trigger Type: Click
• Click Trigger Selector: Matches CSS Selector
• Selector: .form-submit-btn
• Constraint: Click Element matches CSS Selector .form-submit-btn

Data Attributes

This is usually the most precise method, but not always available.

<button data-action="form-submission" data-form-id="contact-form">Send</button>


GTM trigger settings:

• Trigger Type: Click
• Click Trigger Selector: Matches CSS Selector
• Selector: [data-action="form-submission"]

ID Attributes

Very specific, but often not available when you need them.

<button id="newsletter-submit">Subscribe</button>

GTM trigger settings:

• Trigger Type: Click
• Click Trigger Selector: Matches CSS Selector
• Selector: #newsletter-submit

3. Form Hierarchy/Parent Selector
This is useful for forms where you can spot the identifying attribute of the form itself, but not of the submit button. Consider the button's position and relationship to parent elements:
<form id="contact-form">
  <div class="form-group">
    <button type="submit">Send Message</button>
  </div>
</form>


GTM trigger settings:

• Trigger Type: Click
• Click Trigger Selector: Matches CSS Selector
• Selector: #contact-form button[type="submit"]

Developer Tools Inspection Tips

Element Selection
- Click the inspect tool (cursor icon in dev tools)
- Click directly on the submit button
- The HTML will highlight in the Elements panel

Console Verification
Use JavaScript to confirm unique selection:
// Example queries to test button selection
document.querySelector('button[type="submit"]')
document.querySelector('.form-submit-btn')
document.getElementById('newsletter-submit')


By meticulously examining these button properties, you'll create robust GTM triggers that accurately track form submissions across various website configurations.

Step 2: Create a GTM Trigger

Using the information from the inspection step, set up a Form Submission Trigger in GTM.

1. Create a New Trigger:

   • In your GTM workspace, click Triggers → New, and name the trigger (e.g., "Submit Button Trigger").

2. Select Trigger Type:

   • Choose Form Submission as the trigger type.

3. Set Trigger Conditions:

   • Add conditions to ensure the trigger activates only for the correct form:
     • If the submit button has text like "Submit" or "Sign Up", use the condition:
       • Click Text equals "Submit" or Click Text equals "Sign Up".
     • For more flexibility, target forms with specific URLs or page paths:
       • Page URL contains /contact.
     • If the button has unique attributes (e.g., data-form="lead"), add:
       • Click Element contains Attribute data-form="lead".
     • See examples above for more details.

4. Save the Trigger:

   • Test it in GTM’s Preview Mode to ensure it activates when the form is submitted.

Step 3: Configure a Custom HTML Tag

Now that the trigger is ready, configure a Custom HTML Tag to send a Lead event when the form is submitted.

1. Create a New Tag:

   • In GTM, click Tags → New, and name the tag (e.g., "Lead Submission Tracking").

2. Choose Tag Type:

   • Select Custom HTML.

3. Add Custom HTML:

   • Use the following script, which assumes the form fields (like email or phone) are accessible by their name attributes:

   <script>
   var uipe_form = event.target; // GTM automatically passes the form element
   uipe('track', 'Lead', {
     keys: {
       email: uipe_form.elements['email']?.value || '',
       phone: uipe_form.elements['phone']?.value || '',
     },
     lead: {
       firstName: uipe_form.elements['name']?.value || '',
     },
     message: uipe_form.elements['message']?.value || '',
   });
   </script>
   

   Explanation:

   • event.target: Refers to the form being submitted, provided by GTM’s trigger.
   • .elements['field_name']: Retrieves values from form inputs with specific name attributes (e.g., email, phone).
   • if form elements don't have a name attribute, consider using id or type if available, for example, replacing uipe_form.elements['email']?.value with uipe_form.querySelector('[id="email"], [data-email], [type="email"]')?.value

4. Assign the Trigger:

   • Link the Submit Button Trigger you created in Step 2 to this tag.

5. Save and Publish:

   • Save the tag and test it in GTM Preview Mode.

Step 4: Test and Debug

1. Enter GTM Preview Mode:

   • Click Preview in GTM and visit your site.

2. Submit the Form:

   • Check if the trigger fires when the submit button is clicked and if the custom HTML tag executes.

3. Verify Data in the Browser Console:

   • Open the browser console (Ctrl+Shift+J / Cmd+Shift+J) to check if the uipe('track', 'Lead', { ... }) function is executed and the correct data is sent.

4. Publish Changes:

   • Once the setup is verified, click Submit in GTM to make the changes live.

Conclusion

By targeting forms through their submit button’s caption or attributes, you can use GTM's trigger capabilities to track submissions without relying on fixed IDs. This approach avoids adding unnecessary JavaScript event listeners and leverages GTM's flexibility for reliable tracking. Implement this method to seamlessly capture lead data and improve your analytics setup!