Contact form 7 to Squeezely (EN)

If you are using the Contact Form 7 plugin for contact forms, you can use the instructions below to sync the content of the forms to Squeezely via tag manager.

Retrieving IDs

Every contact form has a unique ID, and every field in it has its own ID as well. We need both and you can retrieve them as follows: open the page with the contactform, and then open the console (ctrl-shift-j). Paste the code below into the console:

document.addEventListener( 'wpcf7submit', function( event ) {

console.log(event.detail.contactFormId);
console.log(event.detail.inputs);

     });

This will result in the following example:

Here we see that the form ID is 24, and the fields name and e-mail have respectively 1 and 2 as ID

Creating a tag

Create a custom HTML tag in GTM, using the script below:

<script type="text/javascript">

  document.addEventListener( 'wpcf7submit', function( event ) {
    
         if (event.detail.contactFormId == 24 ) {
       var input = event.detail.inputs;
       var fullName = input[2].value.split(' ');
       var firstName = fullName[0];
       var lastName = fullName[fullName.length - 1];
 
        window._sqzl.push({
          "event" : "Contact",
          "firstname" : firstName,
          "lastname" : lastName,
          "email" : input[4].value
        });

     }
    </script>

Change 24 to your form ID. Next we retrieve all submitted information and place it in the array 'input'. You can retrieve individual field names by addressing an element as follows: input[2] if we want to send the second field, in this case email.

In this example, the name field in the form does not have a first name and last name split, so we added a script to split that as well. If the field is a direct match, you don't need to create any extra variables and you can just do it like this: "email" : input[4].value.

We then send the name and email in a custom event titled Contact. The trigger for this form is the page view where the form is on, since this script is an event listener it will only really execute when the form is submitted. If you place it on the button click, the event listener may act too late