How To Track WPForms Submissions

Are you using WPForms on your WordPress site and looking to enhance your understanding of user interactions? Tracking form submissions effectively not only helps optimize user experience but also provides valuable insights into your audience’s engagement with your website. WPForms, one of the most popular WordPress form plugins, offers robust functionality and flexibility, making it an ideal choice for businesses of all sizes.

 

In this article, we’ll dive into the specifics of setting up form submission tracking using Google Tag Manager (GTM) with a focus on leveraging custom DataLayer events. Whether you’re new to GTM or looking to refine your existing tracking setups, we’ll guide you through the process of capturing valuable data from your forms to inform your marketing strategies and improve overall site performance.

 

This guide is part of our conversion tracking series using Google Tag Manager. If you’re new to form tracking, check out our main article – How to track form submissions.

 

Overview of Form Submission Tracking Methods

While WPForms simplifies the creation and management of contact forms on WordPress, tracking form submissions to analyze performance involves additional steps. To fully understand how users interact with your forms, you must capture detailed data on their interactions. Below, we outline four primary methods for tracking form submissions with Google Tag Manager (GTM):

 

1. Page View Tracking: Tracks users landing on a dedicated “Thank You” or confirmation page after submission.
2. Submit Button Click Tracking: Tracks clicks on the submit button, regardless of whether the form is successfully submitted.
3. CSS Selector for Success Message: Detects the success message displayed upon successful submission using CSS selectors.
4. Custom DataLayer Event Tracking: A robust method where custom events are pushed into the DataLayer for precise submission tracking.

While all methods are effective, this article focuses on Custom DataLayer Event Tracking for its accuracy and ability to collect additional data.

Identifying WPForms on Your Website

Before setting up tracking, it’s essential to confirm whether your website uses WPForms. Here are two ways to identify WPForms:

1. Manual Inspection of Form Code:

• Open the page containing the form.
• Right-click on the form and select “Inspect” to open the browser’s developer tools.
• Look at the form’s HTML structure. WPForms typically includes the class .wpforms-form within the <form> tag or parent <div>.
• Look for hidden inputs or data attributes that reference WPForms.

2. Using Wappalyzer Chrome Extension:

• Install Wappalyzer if you haven’t already.
• Navigate to the page with the form.
• Click on the Wappalyzer icon to view the detected technologies.
• Check if WPForms is listed under “CMS” or “JavaScript Libraries.”

 

Setting Up DataLayer Event Tracking in GTM for WPForms

Tracking form submissions in Google Tag Manager (GTM) involves setting up a custom DataLayer event triggered when the form is submitted successfully. WPForms doesn’t automatically push form submission data into the DataLayer, but we can achieve this by inserting a small script into the form confirmation message.

Step-by-Step Setup:

1. Open WPForms and Locate Your Form

• In the WordPress dashboard, navigate to WPForms and select the form you want to track.

2. Access Confirmation Settings

• Open the form and go to Settings > Confirmations.
• Choose the confirmation type (most commonly “Message”), where users will see a success message after form submission.

3. Insert DataLayer Push Code

• Switch the editor to Text Mode (instead of Visual).
• Add the following JavaScript code into the confirmation message box:

<script>

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({

  ‘event’: ‘wpFormSubmit’,

  ‘formId’: ‘Simple Contact Form’ // replace ‘Simple Contact Form’ with your form’s unique name

});

</script>

 

• This script pushes the wpFormSubmit event to the DataLayer, which will later trigger the GTM tag.

4. Save the Form

• Save your changes and update the form.

Utilizing DataLayer Events To Create The Trigger And Tag

After the custom DataLayer event is set up in the form’s confirmation message, the next step is to configure Google Tag Manager (GTM) to capture the event and send data to Google Analytics 4 (GA4).

Step 1: Verifying Data in the DataLayer

• Activate GTM Preview Mode: Open GTM and click on Preview to test your setup.
• Submit a Test Form: Go to the page with your WPForm and submit the form. GTM preview mode should show the wpFormSubmit event.
• Check the DataLayer: Under GTM’s Preview Mode, verify that the event appears with event: wpFormSubmit and formId: Simple Contact Form.

Step 2: Creating a Custom Trigger

1. Create a New Trigger:
   In GTM, go to Triggers and click New. Select Custom Event as the trigger type.
   • Event Name: Enter wpFormSubmit (the event name from your DataLayer push).
   • Trigger Conditions: No conditions are required unless you have multiple forms to track.
2. Save the Trigger:
   Name it something like WPForms Submission Trigger and save.

Step 3: Creating a GA4 Event Tag

1. Create a New GA4 Event Tag:
   • Go to Tags and create a new tag.
   • Select Google Analytics: GA4 Event as the tag type.
   • Configure Tag:
     • Set the Event Name to something like wpFormSubmit (or customize it as needed).
     • Add event parameters such as formId to capture additional data.
2. Link the Trigger:
   • Assign the WPForms Submission Trigger created earlier to the tag.
3. Save and Test the Tag:
   • Save your tag and enter Preview Mode in GTM again.
   • Submit the form to verify the tag is firing correctly and sending data to GA4.

Step 4: Publishing the Tag

• Once you’ve confirmed everything is functioning properly, publish your changes in GTM.

 

Conclusion

With this guide, you now have the tools to track WPForms submissions using Google Tag Manager and Google Analytics 4. By following these steps, you can enrich your analytics data and gain valuable insights into how users engage with your forms, helping you optimize your marketing and conversion strategies.

At First Page Digital, we offer advanced digital marketing services including advanced form tracking setups like the one described here. If you need help refining your tracking or require tailored solutions for your website, reach out to our experts today!