Weflow not passing Hubspot form ID

59 Views Asked by At

I am passing form submission from Webflow to Hubspot, and I need to pass the Hubspot form ID so it will be linked to a specific form in Hubspot. Same is implemented on all pages but it doesn't work only on one page, and I can't figure out why. Here is the code in before body tag that passes the information (I replace the domain in the code with example.com). The Hubspot form id is placed in the form with custom attribute "data-hubspot-form-id" and the value as the form number.

<!-- [Attributes by Finsweet] CMS Filter -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script>

<!-- [Attributes by Finsweet] CMS Load -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js"></script>

<script>
    // unbind webflow form handling (keep this if you only want to affect specific forms)
    $(document).off('submit');

    $('form').submit(function (e) {
        e.preventDefault();

        const $form = $(this); // The submitted form
        const $submit = $('[type=submit]', $form); // Submit button of form
        const buttonText = $submit.val(); // Original button text
        const buttonWaitingText = $submit.attr('data-wait'); // Waiting button text value
        const formMethod = $form.attr('method')||'POST';  // Form action (GET/POST)
        const formAction = $form.attr('action');//  onSalesTeamContact URL
        const formRedirect = $form.attr('data-redirect'); // Form redirect location
        const activeType = $submit.attr( 'active-type')|| 'sales'
        const formName=$form.attr('name')

        let formData = {}; // Form data
        const _formElements = $form.find('[name]');

        if (_formElements.length) {
            _formElements.each(function () {
                formData[window.$(this).attr('name')] = window.$(this).val();

            });
        }
        function getContent(data) {
            var content = '';
            for (var key in data) {
                if (data.hasOwnProperty(key)) {
                    content += '<b>' + key + '</b>: ' + data[key] + ' <br><br>';
                }
            }
            return content;
        }
        function getCookie(name) {
            let matches = document.cookie.match(new RegExp(
                "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
            ));
            return matches ? decodeURIComponent(matches[1]) : undefined;
        }
        // Set waiting text
        if (buttonWaitingText) {
            $submit.val(buttonWaitingText);
        }
        
        window.$.get('https://ifconfig.rest/select/country', function (data) {
          var userCountry = data.countries['this'] && data.countries['this'].name;

          onSalesTeamContact(formData, userCountry);
        });

        function sendEmail(nextFormData) {
            var content = getContent(nextFormData);

            window.$.ajax({
                url: 'https://example.com',
                type: formMethod,
                headers: {'content-type': 'application/json'},
                dataType: 'json',
                data: JSON.stringify({
                    content: content,
                    email: '[email protected]'
                }),
                success: function () {
                    $form
                        .hide() // optional hiding of form
                        .siblings('.w-form-done').show() // Show success
                        .siblings('.w-form-fail').hide(); // Hide failure
                },
                complete: function(){
                    // Reset text
                    $submit.val(buttonText);
                }
            });
        }

        function onSalesTeamContact(formData, userCountry) {
            var hubspotutk = ('; '+document.cookie).split(`; hubspotutk=`).pop().split(';')[0]  || '';
            var hubspot_form_id = document.querySelector('form').dataset.hubspotFormId || '';
            var commonFormData = Object.assign(formData, {
              country_name: userCountry,
              hubspotutk,
              hubspot_form_id,
              landing_page: window.location.href,
              querystring: window.location.search || getCookie('querystring'), 
            });

            var SFDCLeadData = Object.assign(commonFormData, {
              referrer: document.referrer,
              source: 'Website', // used to categorise lead as coming from custom landing page part of marketing campaing
            });

            window.$.ajax({
                url: formAction,
                type: formMethod,
                headers: {
                    'content-type': 'application/json'
                },
                data: JSON.stringify({
                    user: SFDCLeadData
                }),
                dataType: 'json',
                complete: function(data) {
                  sendEmail(commonFormData);
                }
            });
        }

        function onTechTeamContact(activeType, nextFormData, formData) {
            fetch(
                'https://example.com/api/contact/' + activeType,
                {
                    method: formMethod,
                    body: JSON.stringify({contact: nextFormData})
                }
            )
                .then(function (response) {
                    return response.json();
                })
                .then(function (response) {
                    response = response || {};

                    xSwitchToText();

                    if (response.status === 'success') {
                        if (window.Air360) {
                            window.Air360.identify(formData.email);
                            window.Air360.setUserProperties({
                               'firstname': formData.first_name,
                                'lastname': formData.last_name,
                                'email': formData.email,
                                'website': formData.website,
                                'message': formData.text,
                                'company': formData.company,
                                'phone': formData.phone
                            });

                            window.Air360.track('contact', {'type': activeType});
                        }
                    } else {
                        if(response.msg){
                           $form.siblings('.w-form-fail').text(response.msg)
                        }

                        $form
                            .siblings('.w-form-done').hide() // Hide success
                            .siblings('.w-form-fail').show(); // show failure
                    }
                });
        }

    });
</script>```

[enter image description here](https://i.stack.imgur.com/xLWoD.png)

I copy/ pasted exactly the same code from another page where all is working correctly but still, when the form is submitted, the hubspot-form-id is  empty.
0

There are 0 best solutions below