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>

@joziahg Boom, the updated code indeed works, can't thank you enough!

If I could pick your far more knowledgable brain some more...do you mean i should include that span tag within an html embed in webflow, within the form?

I'm currently only connecting my webflow forms to ones that I've built in HubSpot, but will soon be utilizing non-hubspot forms as well. What's the purpose of including this span tag in that use case?

On each page hubspot looks for an element with that id, if it exists it doesn’t load the JavaScript to track non hs forms, like the ones created using this code.

it allows you to use the tracking code site wide but ignore manually created hubspot connected forms

Great! @joziahg

But I can't get this script working with dropdowns in Webflow such as 'Inbound Lead Source' or 'Company Size'. If I remove them and use regular text fields the submission is posted to Hubspot (Sales Hub Professional). Property names are matching and values as well (COMPANY.inbound_lead_source in Webflow).

Are there limitations, or should dropdowns work as well?

Hi. Didn't get this to work for some reason, nevertheless thank you for a great tutorial and the time spent creating this.

Would you be available for consulting/freelancing to help me, and also helping me setting up an additional thing that is related to this?

Update: Third attempt and now it is working like a charm. Thank you very much.

However, I didn't get it work along with Hubspot tracking code. Where exactly you mean I should embed the span code?
<span id="CollectedForms-YOUR_HUBSPOT_PORTAL_ID"></span>

Hey guys, I followed the tutorial and copied the header and footer codes but when I click submit on my webflow form it gives me this error. This error is usually there when contentType is not set to application/js. But seeing the above code contentType is being set to application/js. So why am I getting this error?

Thanks!

Any help on this? ^

you are probably missing header script

Added the script given above.
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></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