Track Paperform Form Submissions with Google Analytics 4

This article was written by Jude Nwachukwu, who was kind to share his tips with Analytics Mania’s readers

If your website’s forms are built with Paperform and you aim to track these form submissions as conversion events in Google Analytics, this article guides you on achieving that goal. It also elaborates on how to measure multi-step form completions to enhance your funnel analysis.

If you discovered this article through a Google search on “how to track Paperform form submissions with Google Analytics”, it means that you are likely familiar with Paperform. However, if you are not, here is a brief overview of the tool.

Paperform is an online form builder similar to Gravity Form, Contact Form 7, Typeform, and others. It allows you to create a variety of website forms, including dynamic forms, eSignatures, surveys, bookings, payments, and more, which can be seamlessly integrated into your website.

PaperForm offers two types of forms: multi-step forms and standard non-multi-step forms. This article will demonstrate how to measure the submission of both types in Google Analytics (GA4) as conversions.

With that being said, let’s focus on this article’s primary objective, which is the measurement implementation.

To effectively track PaperForm form submissions as conversion events in Google Analytics (GA4) and measure each step in a multi-step PaperForm form, two essential components are required: PaperForm event listeners and a Google Tag Manager (GTM) container.

Firstly, we will look into the process of tracking successful form submissions, followed by a discussion on tracking each form step completion in a multi-step form created with Paperform.

Table of Contents

Here’s what you will learn in this article

• Tracking Successful Paperform Form Submissions 
  • Capture The Event DataLayer Values For More Context
  • GA4 Event Tag
• Measure Multi-step Paperform Forms
• GTM Recipe To Save You Time
• Closing Remarks

Tracking Successful Paperform Form Submissions

As mentioned earlier, we’ll need a Paperform form event listener and will use the one developed at DumbData, which is the JavaScript code provided below.

<script>
//fires on actual successful PaperForm submission
window.addEventListener('PaperformSubmission', function(e) { 
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'paperformSubmissionEvent',
  'eventType': e.type,
  'form_ID': e.detail.form_id,
  'submission_ID': e.detail.submission_id,
  'event_timestamp': e.timeStamp,
  'formData': e.detail.data
});
})

//Fires on paperForm form step change

window.addEventListener('PaperformPageChange', function(e) { 
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'paperformStepChange',
  'eventType': e.type,
  'form_ID': e.detail.form_id,
  'paperForm_Step': e.detail.currentPage,
  'paperForm_Total_Step': e.detail.totalPages,
  'event_timestamp': e.timeStamp
});
})
</script>

Copy this code and create a new tag in Google Tag Manager. Choose “Custom HTML” as the tag type, then insert the copied code.

Add a trigger to the tag; both page view and DOM-ready triggers will work, but for this tutorial, I’ll go with the DOM Ready trigger.

You might wonder what an “Event Listener” is and what the above code accomplishes.

An event listener, in JavaScript, is a function that waits for an event to occur and then responds to it. In our case, it triggers a dataLayer event, which we will use in Google Tag Manager to activate our GA4 event tag and enhance our GA4 event tag with information about the Paperform form.

The code above leverages the Paperform Embedded form JavasCript API to listen to two types of PaperForm form activities: “form submission” and “form step change.” When either of these activities occurs, it executes two dataLayer events:

1. [paperformSubmissionEvent]: Executed upon successfully submitting forms created with Paperform.
2. [paperformStepChange]: Executed upon completing each step in a multi-step Paperform form.

The listener supports measuring form step changes and successful submissions.

After adding the code, the next step is to create a trigger to fire our GA4 tag, which helps record a Google Analytics event when the form is submitted.

To create a trigger for the Paperform form submission event in Google Tag Manager, navigate to the “Triggers” section and click the “New” button.

In the subsequent view, choose the “Custom Event” trigger type under the “Other” section. This action should open the trigger configuration view.

In the event name, add “paperformSubmissionEvent” to the field, give the trigger a name, and click the save button.

In addition, you’ll need to create at least one variable. This is essential as it adds context to the actions performed by website visitors, providing a better understanding of the submitted form and more. Notably, the Paperform form event listener includes several dataLayer keys for this purpose.

• [form_ID]: This key contains the actual PaperForm form ID the user just submitted.
• [submission_ID]: An ID unique to the website visitor’s form submission, available at the successful PaperForm form submission event.
• [formData]: An array data type requiring manual selection of the data field you’d like to have sent to your ads platform as “First Party Data“, potentially to Google Ads enhanced conversion or for Meta Pixel advanced matching. Before using the form data, ensure it complies with relevant privacy regulations.
• [event_timestamp]: Indicates the timestamp of when the user did the action.
• [paperForm_Step]: Pertains to form step change events, providing information about the step the user moved to.
• [paperForm_Total_Step]: Represents the total steps in a multi-step PaperForm form.

DataLayer for form submission.

DataLayer for the form step change

While it’s worthwhile to be aware of all available data points, in this tutorial, I’ll be using the form ID. If necessary, for data blending purposes, I’ll be using the “submission_id” data points; I’ll create that as well and send the data as an event parameter in the Google Analytics event.

Capturing The Event DataLayer Values For More Context

To capture the value in the DataLayer, follow these instructions:

1. Navigate to the “Variables” view of your Google Tag Manager container.

2. Click the “New” button to create a new variable.

3. In the subsequent screen, select the “Data Layer” variable type to open the variable configuration view.

4. Enter the key for capturing the necessary form ID and submission ID values.

For the Paperform form ID, use the key “form_ID“, and it should set it up as shown below.

Similarly, for the submission ID, utilise the key “submission_ID,” your final configuration should be similar to the example provided in the screenshot below.

Creating a GA4 Event Tag That Collects Data on Paperform Form Submissions

Our next step in this implementation is to communicate with Google Analytics that a Paperform form was submitted, which involves creating a GA4 event tag. In this article, I presume that you have already installed a Google tag in your Google Tag Manager container.

Begin by navigating to the “Tags” section and selecting the “New” button.

Expand the “Google Analytics” tags in the next view and choose the “Google Analytics: GA4 Event” tag type.

Here is the Google Analytics: GA4 Event tag type.

In the tag configuration, insert your GA4 measurement ID. Proceed to add the event name; for this tutorial, the event is named “generate_lead“.

Expand the “Event Parameters” field, and click “Add Parameter” to include new fields.

Add new parameters.

In these fields, add “form_id” and “form_submission_id” to provide context on the submitted form and user submission. You may omit sending “form_submission_id” if unnecessary.

Attach a trigger to the tag by adding the Paperform form submission event trigger created earlier in this tutorial.

Your Paperform form submission GA4 event tag configuration should be similar to the image below.

In the measurement ID field, I inserted the variable that contains my GA4 measurement ID.

Test your setup using the Google Tag Assistant debug environment.

To track Paperform form submissions as a conversion event in Google Analytics, you’ll need to mark or add it as a conversion in your GA4 property.

Navigate to your analytics property admin and click the “Conversions” option under the “Data Display” view. In “Conversion Events,” click the “New Conversion Event” button, add the event name, and save.

Insert the event name in this field and hit the save button.

Returning to testing the setup, navigate to the page with a Paperform form on your website. Fill in the necessary form fields and submit.

Upon successful submission, check the recorded event in your Google Analytics DebugView. Clicking to expand the event will show the form ID and other included contexts as event parameters at the data collection point.

Also, check if you can see the event parameters and that the values are correct.

For tracking specific Paperform forms, apply conditions to the form submission event trigger using the form ID or page information to execute your GA4 event tag on separate form events as needed.

Also, remember to register the event parameters as a custom dimension in your analytics property, which makes it usable for later reporting in GA4, Google Sheets, and Looker Studio.

Now, let’s explore how to track changes in form steps in Paperforms, specifically when a user completes each step in a multi-step Paperform form.

Using Google Analytics 4 to Measure Multi-step Paperform Forms

If your objective is solely to track form submissions, you are all set with the information I’ve shared about tracking submissions of forms built with Paperform.

However, suppose you intend to track step changes and leverage the event data to create a conversion funnel, which you utilize to build remarketing audiences or optimize form steps. In that case, you should proceed with reading, as I will elaborate on this aspect in this section of the blog post.

An essential point to note is that you cannot track all Paperform step changes, especially in multi-step forms with only one field in each step. Nonetheless, measuring submissions is still possible.

You can see a real-life example in the image below, which is a form with one field per form step.

To initiate the implementation process for tracking step changes, you need to create a new GTM trigger event. Since the Paperform form event listener shared earlier in the tutorial also listens for step changes and emits the dataLayer event “paperformStepChange,” there is no need to add more code.

Navigate to the “Triggers” tab in GTM, create a new “custom event” trigger type, and add “paperformStepChange” as the event name. Please provide a name for the trigger before saving it.

Following this step, you must create variables that inform you about the number of form steps and the step the user has just moved to. The dataLayer keys for each event are:

• ‘paperForm_Step‘: Provides insight into the step the user just moved to.
• ‘paperForm_Total_Step‘: Helps you understand the total steps in the Paperform form.

Here’s what the paperForm_Step looks like:

Then, configure the dataLayer variable for ‘paperForm_Total_Step‘ in your GTM.

Note that the dataLayer key does not include the number of steps the user completed. However, you can leverage the workaround I’ll briefly explain to capture this data point.

To get the value of the form step, the user just completed creating a new variable and selecting the “Custom JavaScript” variable type. Use the provided code, as it returns the completed form step.

function() {
  var paperformCurrentStep = {{DLV - PaperForm - paperForm_Step}};
  return parseInt(paperformCurrentStep) - 1;
}

This code above picks the “paperForm_Step” dataLayer variable, transforms the value into an integer and subtracts a constant “1” integer from the value.

The last part of the implementation is to create a new GA4 event tag in GTM and choose a Google Analytics event name of your preference. I’ll name mine “paperform_step_completion.” If needed, add the following event parameters to understand better which steps were completed and how many overall in the form.

Your final configuration should be somewhat similar to the one below.

Next, give the tag a name and save it.

Ensure you test your implementation before publishing your setup in Google Tag Manager. Also, register the event parameters as custom dimensions, not metrics.

Also, check if the event parameters are coming in as expected.

Paperform GTM Recipe To Save You Time

I’ve created a Google Tag Manager template available for download in the Analytics Mania recipe gallery. This template allows you to effortlessly import the setup for tracking Paperform form submissions and step changes as Google Analytics events into your own GTM container, ultimately saving you valuable implementation time.

Even with this template, you can customize the GA4 event name, tags, triggers, and variable names to suit your preferences. Additionally, you can extend the implementation to include Meta Pixel, Google Ads conversion tracking, or other ad platform conversion measurements, where you could send rich first-party data, provided that it’s compliant for you to do so.

Track Paperform with GA4: Closing Remarks

Firstly, I’d like to emphasize that the Paperform form event listener is not limited to GA4 conversion event tracking alone; it can also be utilized to track successful submissions of your Paperform forms across various platforms such as Google Ads, Meta Ads, Microsoft Ads, and more.

An essential consideration during this implementation is to ensure the registration of event parameters as custom parameters, as this greatly aids in reporting.

For those seeking a quicker setup without investing much time, a convenient option is to download the GTM recipe, saving you implementation time.

As I mentioned in the article, If you need to track specific Paperform form submissions rather than all, you can use trigger conditions using form IDs or page-level information to focus on forms that hold significance for your business.

I’d appreciate hearing about your experiences with Paperform or how your implementation for tracking form submissions with them unfolded in the comment section. Until then, happy measuring!

Jude Nwachukwu

Jude is an analytics specialist working with businesses across diverse industries in Africa, Europe, and North America. His passion is to write and assist non-technical marketers to thrive in the ever-evolving realm of analytics. He co-founded a measurement resource hub called DumbData.