Hubspot's Form integration in Vue.js

Lou_Rectoret
by:
Participant

I struggled a bit to integrate my first HS form in my project. Here's the code I came up with:

 

 

 

<template>
  <h1>
    HubSportForm
    <div id="hubspotForm" v-once></div>
  </h1>

</template>

<script>
  export default {
    mounted() {
    const script = document.createElement("script");
    script.src="https://js.hsforms.net/forms/v2.js";
    document.body.appendChild(script);
    script.addEventListener("load", () => {
      if (window.hbspt) {
        window.hbspt.forms.create({
          portalId: "your-portal-id",
          formId: "your-form-id",
          target: "#hubspotForm"
        })
      }
    })
  }
}
</script>

 

 

 

 

 

3 Comments
prosa
Top Contributor

Nice implementation.  is this a single page application? I've done it but I included the script at the header of the page in the page that was going to use the form. And with the mounted method too. 

Lou_Rectoret
Participant

Yep @prosa it's a SPA indeed.

 

According to your needs your approach is still ok. Glad I can bu tunned and used around ! ^^

JGanawed
Participant

Thanks for this idea 🙂