Checkboxes as array in Google tag manager data layer, with Contact form 7

Stoto 0
Viewed 26

Hi I've tried searching for a solution but couldn't find one here.

I'm using the following code snippet to add Contact Form 7 submissions as an event in Google Tag Manager data layer.

document.addEventListener( 'wpcf7mailsent', function( event ) {
    window.dataLayer.push({
    "event" : "CF7submit",
    "CF7formId" : event.detail.contactFormId,
    "CF7fields" : event.detail.inputs
    })
});

It's working good with form submissions being pushed to the data layer. However I've noticed that multiple checkboxes are being pushed as individual name / value pairs.

enter image description here

Is is possible to output these multiple checkbox values as an array?

For example:

{name: "Checkboxes-Name[]", value: "Option 1", "Option 2", "Option 3"}

Any help greatly appreciated.

Thanks.

contact-form-7 google-tag-manager javascript
1 Answers

I have this working now. I've had to use a naming convention when setting up Contact Form 7 input fields. Its the only way I could think of to make it work. If anyone has some better suggestions feel free to chip in.

This is the Data Layer in Google Tag Manager.

dataLayer.push({
  event: "CF7submit",
  CF7formId: 35396,
  CF7fields: {
    CF7checkbox: "Option 1, Option 2, Option 3",
    CF7radio: "Option 2",
    CF7textfield: "Text field message",
    CF7dropdown: "Option 3",
    CF7textarea: "Text area message",
    CF7accept: "1"
  },
  gtm.uniqueEventId: 76
})

Multiple checkboxes are now saved as an array.

CF7checkbox: "Option 1, Option 2, Option 3",

This is the script I'm using in Google Tag Manager.

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {

    var inputs = event.detail.inputs;
    var vals = [];

    for ( var i = 0; i < inputs.length; i++ ) {
        if ( 'CF7-Checkbox[]' == inputs[i].name ) {
            vals.push( inputs[i].value );
            var CF7checkbox = vals.length ? vals.join(', ') : undefined;
        }
        else if ( 'CF7-Radio' == inputs[i].name ) {
            var CF7radio = inputs[i].value;
        }
        else if ( 'CF7-Textfield' == inputs[i].name ) {
            var CF7textfield = inputs[i].value;
        }
        else if ( 'CF7-Dropdown' == inputs[i].name ) {
            var CF7dropdown = inputs[i].value;
        }
        else if ( 'CF7-Textarea' == inputs[i].name ) {
            var CF7textarea = inputs[i].value;
        }
        else if ( 'CF7-Acceptance' == inputs[i].name ) {
            var CF7accept = inputs[i].value;
        }
    }

    window.dataLayer.push({
        'event' : 'CF7submit',
        'CF7formId' : event.detail.contactFormId,
        'CF7fields': {
            'CF7checkbox': CF7checkbox,
            'CF7radio': CF7radio,
            'CF7textfield': CF7textfield,
            'CF7dropdown': CF7dropdown,
            'CF7textarea': CF7textarea,
            'CF7accept': CF7accept
        }
    });
}, false );
</script>

I've created a template in Contact Form 7 for all the relevant variables in the script.

<label id=“cf7_question" class=“cf7_question">
CF7 survey question.
</label>

[checkbox 
CF7-Checkbox
id:cf7_checkbox 
class:cf7_checkbox 
use_label_element 
"Option 1" 
"Option 2" 
"Option 3"
]

[radio 
CF7-Radio
id:cf7_radio 
class:cf7_radio 
use_label_element 
default:1 
"Option 1" 
"Option 2" 
"Option 3"
]

[text 
CF7-Textfield
id:cf7_text_field 
class:cf7__text_field 
placeholder "Placeholder for text field"
]

[select 
CF7-Dropdown
id:cf7_dropdown 
class:cf7_dropdown 
"Option 1" 
"Option 2" 
"Option 3"
]

[textarea 
CF7-Textarea
id:cf7_textarea 
class:cf7_textarea 
]

[acceptance 
CF7-Acceptance
default:on 
id:cf7_sub_checkbox 
class:cf7_sub_checkbox 
optional] 
Label for acceptance checkbox
[/acceptance]

[submit "Submit"]

I've set up many of the input fields available in Contact Form 7, from checkboxes to text area. If this can help someone in a similar need to myself, feel free to use it. Or if anyone has some better suggestions to write this then I would be keen to know.

Thanks again.

Stoto0
Related