Track Contact Form 7 form submissions in Google Tag Manager without a Thank You page

If you have ever tried to set up an element visibility trigger in tag manager for a successful form completion event you may have been frustrated by the fact that the error and the success message in Contact Form 7 have the same ID and css class. Since Contact Form 7 uses ajax form submission this makes it much harder to track in tag manager.

There is one simple way to add a different class to the Contact Form 7 success message only.

  1. Login to WordPress
  2. Go to Appearance -> Theme Editor
  3. Click on functions.php in the side menu of your current theme (should be the child theme of your main theme)
  4. Add the following code at the bottom of funtions.php
                        

    add_action('wp_head', 'track_forms');
    function track_forms(){
    ?>
    
    <?php
    };

  5. Click on the save changes button.
  6. Now when you make a successful form submission, you will see this class added to the container for the success message:Added class to cf7 success message

This method checks for successful completion of a the mail sent event in Contact Form 7 and then adds the class. I used this method on a form that uses skip mail and it still successfully added the class.

 

 

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *