While trying to include a Hubspot embedded form on a page using a script, I encountered an issue. I utilized onMounted to ensure the form is displayed correctly. However, upon leaving and re-entering the component where the form is located, an additional blank space is added above the actual form. I attempted using onUnmounted and conditionals to address this problem but was unsuccessful. Below is the code snippet where I add the form:
onMounted(() => {
let script = document.createElement('script')
script.setAttribute('src', 'https://js.hsforms.net/forms/v2.js')
document.head.appendChild(script)
script.addEventListener("load", () => {
if (window.hbspt) {
window.hbspt.forms.create({
region: "",
portalId: "423423423",
formId: "65363456-456-23g22-3423-g34g3f363g",
target: "#content-form"
});
}
})
})
This is what the HTML looks like - the first iframe is empty but takes up space: https://i.sstatic.net/Nn88M.png