WPForms is my favourite form builder plugin for WordPress. I like its user interface and functionality. You can use WPForms and collect data from your website visitors with great ease.

To measure the effectiveness of your digital marketing campaigns, you would also want to track these form submissions with an analytics tool. The most commonly used tool is Google Analytics. In this article, I’ll show you how to track WPForms form submissions with Google Analytics if you redirect the user to a "Thank You Page" after the form has been submitted successfully.

The internet is full of tutorials that teach you form submission tracking with Google Analytics. To track a form, we normally use Google Tag Manager these days using which we send an event to Google Analytics when either the "Submit" button of the form is clicked or when the user is navigated to a "Thank You Page" after successfully submitting the form.

This can be accomplished even without Google Tag Manager. You simply create a Goal inside Google Analytics based on a destination page (the Thank You Page).

However, I am not a fan of both of the above implementations.

Problem With Tracking "Submit" Button Clicks

Clicking the Submit button does not necessarily mean that the form was successfully submitted. What if the user did not enter anything in a mandatory field, or if the user entered an invalid email address in the email field of the form? Clicking the Submit button would display the validation error(s), the user would correct the errors and then click the Submit button again. If you track Submit button clicks to track conversions in Google Analytics, your conversion data would be inaccurate. In our example scenario, Google Analytics would show two conversions while the form was successfully submitted only once.

Problem With Tracking "Thank You Page" Views

If you track "Thank You Page" views to track form submissions using Google Analytics, data might be inaccurate again. There is nothing stopping anybody to copy the URL of the thank you page in the address bar of the browser and open that page. I know, there is a very less chance of somebody actually doing it, but, you never know. The approach that you undertake to track WPForms form submissions with Google Analytics must be foolproof.

How to Track WPForms Form Submissions With Google Analytics The Right Way?

In order to track WPForms form submissions with Google Analytics, we’ll make use of wpforms_process_complete action which fires at the end of a successful form entry processing. You can read more about it here:

In our theme's functions.php file, we’ll create a function and hook that on to the wpforms_process_complete action. Effectively, this function would execute each time your form is successfully submitted.

Inside this function, we’ll make use of the Google Analytics Measurement Protocol to send an event directly to Google Analytics servers. Don't worry if you are not a programmer. You do not need to write the code yourself. I've given the code snippet below. If you encounter any problem while implementing this, get in touch with me. I'll help you do it.

function ga_track_event_form_submission_function_name( $fields, $entry, $form_data, $entry_id ) {
  $endpoint = 'https://ssl.google-analytics.com/collect?';
  $payload_data = array(
    'v' => 1,
    'tid' => 'UA-XXXXXX-1',
    'cid' => 123,
    't' => 'event',
    'ec' => 'Forms',
    'ea' => 'Successful Submission',
    'el' => 'Contact Us'
    $parameters = http_build_query( $payload_data );
    wp_remote_post( $endpoint . $parameters );
add_action( 'wpforms_process_complete_1634', 'ga_track_event_form_submission_function_name', 10, 4 );
Please note that you need to replace UA-XXXXXX-1 with your Google Analytics Tracking ID. In the above code snippet, 123 is a random User ID. For a detailed explanation of all the parameters that Measurement Protocol uses, please refer to the Measurement Protocol Parameter Reference.

Also note that I have used an alternate version of the wpforms_process_complete action. The number 1634 in wpforms_process_complete_1634 specified in the code snippet above is the Form ID. Therefore, if you have multiple forms in your website, it would be easy to implement different code snippets for different forms.

This way, we have removed dependence on the "Submit" button as well as the "Thank You Page". The conversion data recorded in Google Analytics would be absolutely accurate. What do you think of this approach? Please let me know in the comments section below.

  • Christina says:

    I’ve implemented this code and all submission are coming in as direct traffic, even though there are from different referrals. Any idea why this would be?

    • Varun Sood says:

      Hi Christina, first of all, I apologize for the delayed reply. I was recovering from COVID.

      You've made a good point. I'll have to check it out once I am back to work. Please allow me some time. Thanks!

    • Jaime madeofanalytics.com says:

      Hi Christina,

      They come as direct traffic because in order to attribute the source to the specific user you will need to pass the Google Analytics client id generated by the user (https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#getting_the_client_id_from_the_cookie). In this article, it is not explained how to get the right client id. Notice that it is a cid, not uid (user id) which is a different dimension.

      You can get the client id from GA tracker or from the _ga cookie (although Google does not recommend the second method). The problem is that the tracker is normally accessed via JavaScript, and the script above is server side PHP.

      You could add this line:
      gaClientId = preg_replace("/^.+.(.+?..+?)$/", "\1", @$_COOKIE['_ga']);

      And then:

      cid' => $gaClientId ,

      Although client side tracking will be less accurate, it will be less complex to implement, and the attribution will be correct.

      I hope that provides some clarity.

  • Abran says:

    How does this work with multiple forms?

  • Sam says:

    Hi Varun,
    I tried this out, replacing the GA ID and form id number with my own but it crashed the site.

    Does the code need to be placed anywhere in particular in the functions.php file? I placed it directly at the end.

    • webmaster says:

      Hi Sam, no the positioning is not important. Please check if you have copied and pasted the code correctly. Any single character here and there will cause issues. If you think you pasted the code correctly, checking your server logs will help. Logs will tell you exactly what error occurred.