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

[danhammari]

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>

[dennisedson]

Thanks for sharing @danhammari 

All is working well now?