Javascript code to intercept hubspot forms on drag and drop builder websites

interceptForm.html

<!-- Header Code -->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>

<!-- Footer Code -->
<!-- Minified use this in production -->
<script>
$('form[action^="https://api.hsforms.com"]').each((function(e){$(this).find("input[type=checkbox]").val("true"),$(this).submit((function(e){e.preventDefault();const n=[...new FormData(e.target).entries()].map((e=>({name:e[0],value:e[1]}))),t=n.find((e=>"goToWebinarWebinarKey"===e.name))?.value,i=n.find((e=>"sfdcCampaignId"===e.name))?.value,o=document.cookie.replace(/(?:(?:^|.*;\s*)hubspotutk\s*\=\s*([^;]*).*$)|^.*$/,"$1")||void 0;console.log(o);const s=$(this).find("[id*='gdpr-processing-prompt']"),a=n.filter((e=>e.name.includes("LEGAL_CONSENT"))).map((e=>{const n=$(`#${e.name.replace(/(:|\.|\[|\]|,|=|@)/g,"\\$1")}`)[0],t=$("span[for='"+$(n).attr("id").replace(/(:|\.|\[|\]|,|=|@)/g,"\\$1")+"']");return{value:n.checked,text:t.text(),subscriptionTypeId:parseInt(e.name.split("LEGAL_CONSENT.subscription_type_")[1])}})),r=["cc-num","cc-number","gdpr","LEGAL_CONSENT","goToWebinarWebinarKey","sfdcCampaignId"],c={fields:n.filter((e=>!r.find((n=>e.name.includes(n))))),context:{pageUri:window.location.href,pageName:document.title,sfdcCampaignId:i,goToWebinarKey:t,hutk:o},...s?{legalConsentOptions:{consent:{...s?{consentToProcess:!0,text:s.text()}:{},...a?{communications:a}:{}}}}:{}},l=JSON.stringify(c);$.ajax({url:e.target.action,method:"POST",data:l,contentType:"application/json",success:function(n){if(n)if(n.inlineMessage){const t=$(e.target).parent();t.children("form").css("display","none"),t.children(".w-form-done").css("display","block").html(n.inlineMessage)}else n.redirectUri&&(window.location.href=n.redirectUri);else console.log("response but no inlineMessage or redirectUri")},error:function(){console.log("error on the form submitting"),$(e.target).css("display","none").siblings(".w-form-fail").css("display","block")}})}))}));
</script>

<!-- Documented, dont use this in production. Copy and paste into a minifier to get the minified version above -->
<script type="text/javascript">
$('form[action^="https://api.hsforms.com"]').each(function (i) { // intercept forms whos action goes to hubspot
    $(this).find("input[type=checkbox]").val("true")
    $(this).submit(function (e) { // when the form submits
        e.preventDefault() //stop the form from submitting to webflow
        const formData = new FormData(e.target) // get the form data
        const parsedFormData = [...formData.entries()].map(dataObject => ({ // convert data to array
            name: dataObject[0], // make sure the name of the input is the same as the hubspot input name
            value: dataObject[1]  // the value of the input
        }))
        const goToWebinarWebinarKey = parsedFormData.find(input => input.name === 'goToWebinarWebinarKey')?.value // looks for an input with the name goToWebinarWebinarKey
        const sfdcCampaignId = parsedFormData.find(input => input.name === 'sfdcCampaignId')?.value// looks for an input with the name sfdcCampaignId
        const hutk = document.cookie.replace(/(?:(?:^|.*;\s*)hubspotutk\s*\=\s*([^;]*).*$)|^.*$/, "$1") || undefined // looks for an input with the name hutk, the hubspot user token
        console.log(hutk)
        const processingPrompt = $(this).find("[id*='gdpr-processing-prompt']")// looks for an element with the id gdpr-processing-prompt
        const communicationConsent = parsedFormData.filter(item => item.name.includes('LEGAL_CONSENT')).map(item => { // finds LEGAL_CONSENT options and stores them
            const element = $(`#${item.name.replace(/(:|\.|\[|\]|,|=|@)/g, "\\$1")}`)[0] // checks if they've checked the checkbox to consent
            const label = $("span[for='" + $(element).attr('id').replace(/(:|\.|\[|\]|,|=|@)/g, "\\$1") + "']") // gets the label of the checkbox
            return {
                value: element.checked,
                text: label.text(),
                subscriptionTypeId: parseInt(item.name.split("LEGAL_CONSENT.subscription_type_")[1]) // the subscription the user is consenting to
            }
        })
        const ignoredFields = ["cc-num", "cc-number", "gdpr", "LEGAL_CONSENT", "goToWebinarWebinarKey", "sfdcCampaignId"]
        const data = { // the data we send to hubspot
            "fields": parsedFormData.filter(item => !ignoredFields.find(ignoredField => item.name.includes(ignoredField))), // set the form data but ignore certain fields
            "context": {
                "pageUri": window.location.href, // log the current url
                "pageName": document.title, // log the pages title
                "sfdcCampaignId": sfdcCampaignId, // salesforce campaign id
                "goToWebinarKey": goToWebinarWebinarKey, // go to meeting key
                "hutk": hutk, // hubspot user token
            },
            ...(!processingPrompt) ? {}
                : {
                    "legalConsentOptions": {
                        "consent": {
                            ...(!processingPrompt) ? {}
                                : {
                                    "consentToProcess": true,
                                    "text": processingPrompt.text(),
                                },
                            ...(!communicationConsent) ? {}
                                : {
                                    "communications": communicationConsent
                                }
                        }
                    }
                }
        }
        const final_data = JSON.stringify(data) // turn that javascript object into a json string
        $.ajax({
            url: e.target.action,
            method: "POST",
            data: final_data,
            contentType: "application/json",
            success: function (response) {
                if (response) {
                    if (response.inlineMessage) {
                        const parent = $(e.target).parent()
                        parent.children("form").css("display", "none") // hide form
                        parent.children(".w-form-done").css("display", "block").html(response.inlineMessage) // replace .w-form-done with your own form done section
                    } else if (response.redirectUri) {
                        window.location.href = response.redirectUri
                    }
                } else {
                    console.log('response but no inlineMessage or redirectUri')
                }
            },
            error: function () {
                console.log("error on the form submitting")
                $(e.target).css('display', 'none').siblings('.w-form-fail').css('display', 'block') // replace .w-form-fail with your own form done section
            }
        })
    })
})
 </script>

Does this code work with a raw HTML form?
It does not bring information from hidden fields such as utm_source, utm_medium, utm_campaign, utm_content, utm_term, gclid, ruid, uid

Does this code work with a raw HTML form? It does not bring information from hidden fields such as utm_source, utm_medium, utm_campaign, utm_content, utm_term, gclid, ruid, uid

Yes, It should. I used raw HTML to test and develop it as I didn't have access to webflow codeblocks at the time.
As far as the hidden fields go, this wrapper should send those aswell. You'll want to make sure the field names are the same as whats in hubspot. If the value of the field doesn't belong to either Contact, Company, or a Custom Property already setup in hubspot I don't think it will work. It's been a while since I've worked on this so I can't say for sure right now

Hi there! Amazing stuff and I'm so close to getting it to work!!
The submissions are going through however the hidden fields aren't being populated.
I am getting this error on the submissions: The cookie needed to link form submissions to existing contacts isn't being sent. You'll need to ask your developer to update the integration for this form.

The hidden fields are being populated by another cookie we've implemented (Attributer.io).
Can you make out what's happening here? I'm not sure if it's a problem with the code, Hubspot or Attributer.io 🙁
Thanks!

Amazing bro thank you for this.

Hi @joziahg awesome job. Loaded up followed video instructions and bam worked like a treat. However as soon as I wanted to add a company field (ie. COMPANY.xxx) it through a 400 error. Little bit of digging showed that the COMPANY.xx no longer seems to work and you need to use 0-2/. Damn can't add / in Webflow as its automatically replaced with a hyphen.

Debosmit Ray on your Youtube vid commented that he added some footer code to modify the array
const parsedFormData=unprocessedParsedFormData.map(a=>"COMPANY.name"===a.name?{...a,name:"0-2/name"}:a);

When I go to add it and minify the code it throws an error. Not sure why. Any chance you can update the video/code to address this change?

Thanks, author.

Unfortunately, this doesn't work for me for the Webflow site. With and without hidden input - it doesn't send user cookie to HubSpot and creates separate contacts.

Is there any updates of the code up to date?

Appreciate