APIs & Integrations

danhammari
Contributor

Vue: Modifying HubSpot Form Embed Code to Include Latest jQuery Library

While embedding my HubSpot forms into my external site that runs on Vue JavaScript, I ran into some trouble getting HubSpot's default form embed code to play nice with my custom jQuery methods. After some troubleshooting, I was able to alter the embed script and import the latest jQuery from a CDN before importing the HubSpot Form JS.

 

Here is the default suggested embed code:

<script
charset="utf-8"
type="text/javascript"
src="//js.hsforms.net/forms/v2.js">
</script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "XXXXXXX",
formId: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
});
</script>

This is how the script looked after putting it into my Vue template:

<template>
<!-- vue template stuff -->
<div id="hubspotForm"></div>
</template>
<script>
export default {
layout: 'unauthenticated',
auth: 'guest',
title () {
return 'HubSpot Form Title'
},
async mounted() {
// load jquery library from latest CDN
await this.$loadScript("https://code.jquery.com/jquery-3.6.0.min.js")
// load hubspot library
await this.$loadScript("https://js.hsforms.net/forms/v2.js")
if (window.hbspt === undefined) {
throw Error("Unable to load HubSpot JS")
}
window.hbspt.forms.create({
portalId: "XXXXXXX",
formId: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
target: "#hubspotForm",
onFormReady: function( $form ){
// put custom jquery methods here
}
})
}
}
</script>

 

1 Reply 1
dennisedson
Community Manager
Community Manager

Vue: Modifying HubSpot Form Embed Code to Include Latest jQuery Library

Thanks for sharing @danhammari 

All is working well now?

Thanks,

Dennis




HubSpot Community Developer ShowMake sure to subscribe to our YouTube channel
where you can find the HubSpot Community Developer Show
0 Upvotes