Vue JS Form Integration

[dub1]

Hello,

I'm looking for resources on embeding Hubspots form into my Vue JS web app. The only documentation I can find is around React. I created the example below but am unable to get the form to populate when I load the page. Anyone have expereince with Vue or an example I could work with?

const HubspotForm = {

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: "2323210",

formId: "d8232cf6-b9ed-4abc-a81e-585801849cea",

target: "#hubspotForm"

});

}

});

},

render() {

return (

<div>

<div id="hubspotForm" />

</div>

);

}

};

[Lou_Rectoret]

@dub1 Inspired by your own way I make it work, you were so close!

<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>

@cbarleythere you have a code example

[APello5]

Thanks, works fine for me

[Jon_McLaren · Accepted solution]

So when it comes to vue and the HubSpot forms, I try to completely avoid having the forms inside the actual vue instance if possible.

The reason is the HS forms require a script tag, which is kinda dangerous inside a vue instance(I think if there's an error in the hs form code it would possibly kill your vue instance as well)

Also the HS forms use react, React and Vue don't play nicely together because they both control the DOM, and store the state of all the fields and update them as well.

I would say if you HAVE to include the form inside your vue component, use v-once on it. (you may have to put a div wrapper around the script tag with v-once on that instead of the script tag itself, as the form code will manipulate the html inside.)

https://vuejs.org/v2/api/#v-once

This will cause vue to render the script then ignore it.

If you need to dynamically render the form, say you need to change which form gets rendered, I'd use jquery to embed the form outside of the VueJS instance(your vue component can have the jquery necessary to do this, so for example if you have a button trigger- you can trigger your jquery from within the instance.)

[cbarley]

Hey @Jon_McLaren , sorry for the ping here but I think I might have recalled you talking about using Vue.js with HubSpot in the HubSpot Developers Slack org. Since I don't have familiarity with Vue, would you have any examples of code you could share with @dub1  and the HubSpot Form embed code? @dub1 , if you aren't already a member, I'd highly recommend joining our developer slack org I linked above. Wonderful folks like Jon are in there all the time working together on things and helping each other out. No worries if you don't have any examples Jon, but thought I'd give pinging you a shot!