The easiest way to take form data

var contactForm = document.querySelector('#wpforms-form-10');
var formData = new FormData(contactForm);
var inputValues = {};

formData.forEach(function (value, key) {
    inputValues[key] = value;
});
console.log(inputValues);

//dataLayer Code 
var contactForm = document.querySelector('#wpforms-form-10');
contactForm.addEventListener('submit', function () {
    var formData = new FormData(contactForm);
    var inputValues = {
        event: 'contact_form_submit'
    };

    formData.forEach(function (value, key) {
        inputValues[key] = value;
    });

    window.dataLayer = window.dataLayer || [];
    dataLayer.push(inputValues);
});

GoHighLevel form

<script>
(function() {
  var inputData = {};
  window.addEventListener('message', function (event) {
    if(Object.prototype.toString.call(event.data) === '[object Array]') {
        var inputJSON = event.data[2];

        if(inputJSON && inputJSON.includes('full_address') && inputJSON.includes('customer_id') && inputJSON.includes('full_name') && inputJSON.includes('email')) {
            var inputObject = JSON.parse(inputJSON);
            inputData = inputObject
            dataLayer.push({
                event: 'ghl_form_submit',
                inputs: inputObject
            });
        }

        if(event.data[0] === 'msgsndr-booking-complete') {
            dataLayer.push({
                event: 'ghl_booking_complete',
                inputs: inputData
            });
        }
    }
  });
})();
</script>

Fluent form

<script>
(function($) {
	var $form = $('form.frm-fluent-form');
	$form.on('fluentform_submission_success', function() {
		var formId = this.getAttribute('data-form_id');
	   	var formData = new FormData(this);
		var inputValues = {};

		formData.forEach(function (value, key) {
			var key = key.replace(/]$/g, '').replace(/[\\[\\]]/g, '_');
		    inputValues[key] = value;
		});

		window.dataLayer = window.dataLayer || [];
		dataLayer.push({
			event: 'fluent_form_submit',
			form_id: formId,
			inputs: inputValues
		});
	});
})(jQuery);
</script>

Variable

  1. form_id

  2. subjet

Tag

  1. cHtML tag create

Trigger

  1. Custom trigger

WP Form

<script>
(function() {
    // Ajax Form
    var ajaxForm = document.querySelectorAll('form.wpforms-ajax-form');
    if(ajaxForm.length) {
        var origXMLHttpRequest = XMLHttpRequest;
        XMLHttpRequest = function() {
            var requestURL;
            var requestMethod;
            var requestBody;

            var xhr = new origXMLHttpRequest();
            var origOpen = xhr.open;
            var origSend = xhr.send;

            xhr.open = function(method, url) {
                requestURL = url;
                requestMethod = method;
                return origOpen.apply(this, arguments);
            };

            xhr.send = function(data) {
                if (/.+\\/admin-ajax\\.php/.test(requestURL)) {
                    xhr.addEventListener('load', function() {
                        if (xhr.readyState === 4) {
                            if (xhr.status === 200) {
                                var response = JSON.parse(xhr.responseText);

                                if (response.success && (data instanceof FormData)) {
                                    requestBody = {};
                                    data.forEach(function(value, key) {
                                        if(key) {
                                            key = key.replace(/\\[|\\]/g, '_').replace(/_+/g, '_').replace(/^_|_$/g, '');
                                            requestBody[key] = value;
                                        }
                                    });

                                    if(requestBody.action === "wpforms_submit") {
                                        window.dataLayer = window.dataLayer || [];
                                        var wpFormData = Object.assign({}, requestBody);
                                        delete wpFormData['wpforms_nonce'];
                                        dataLayer.push({
                                            event: 'wpform_submit',
                                            formId: wpFormData['wpforms_id'],
                                            inputs: wpFormData
                                        });
                                    }
                                }
                            }
                        }
                    });
                }

                return origSend.apply(this, arguments);
            };

            return xhr;
        };
    }

    // Non Ajax Form
    var forms = document.querySelectorAll('form[id^="wpforms-form-"]:not(.wpforms-ajax-form)');
    forms.forEach(function(form) {
        var formId = form.getAttribute('data-formid');

        form.addEventListener('submit', function(event) {

            event.preventDefault();

            var form = this;
            var formData = new FormData(this);
            var wpFormData = {};

            var errorRequired = false;

             formData.forEach(function (value, key) {
                if(key) {
                    var inputField = form.querySelector('[name="'+key+'"]');

                    if(inputField) {
                        var fieldType = inputField.getAttribute('type');

                        var isRequiredField = inputField.classList.contains('wpforms-field-required');

                        if(isRequiredField) {
                            if(inputField.tagName === 'SELECT') {
                                var selectedOptionVal = inputField.options[inputField.selectedIndex].text;
                                if(!selectedOptionVal) {
                                    errorRequired = true;
                                }
                            } else if((inputField.getAttribute('type') === 'email') && (!value || !value.includes('@'))) {
                                 errorRequired = true;
                            }
                            else if(!value) {
                                errorRequired = true;
                            }
                        }
                    }

                    var formattedKey = key.replace(/\\[|\\]/g, '_').replace(/_+/g, '_').replace(/^_|_$/g, '');
                    wpFormData[formattedKey] = value;
                }
             });

             // required checkbox and radio button check 
             var requiredFieldSets = form.querySelectorAll('ul.wpforms-field-required');
             requiredFieldSets.forEach(function(fieldSet){
                if(fieldSet.querySelector('input[type="radio"]') || fieldSet.querySelector('input[type="checkbox"]')) {
                   if(!fieldSet.querySelector('input:checked')) {
                     errorRequired = true;
                   }
                }
             });   

            if(!errorRequired) {
                window.dataLayer = window.dataLayer || [];
                delete wpFormData['wpforms_nonce'];
                dataLayer.push({event: 'wpform_submit', formId: formId, inputs: wpFormData});
            }

        });
    });
})();
</script>

HubSpot Form


<script>
(function () {
  window.addEventListener("message", function(event) {
    if (!(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted')) return;

    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'hubspot_form_submit',
      formId: event.data.id,
      conversionId: event.data.data.conversionId,
      formGuid: event.data.data.formGuid,
      inputs: event.data.data.submissionValues
    });
  });
})();
</script>

or

<script type="text/javascript">
window.addEventListener("message", function(event) {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
window.dataLayer.push({
'event': 'hubspot-form-data',
'hs-form-guid': event.data.id,
'hs-formData': event.data.data
});
}
});
window.addEventListener("message", function(event) {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
window.dataLayer.push({
'event': 'hubspot-form-success',
'hs-form-guid': event.data.id
});
}
});
</script>