How to re-initialize hubspot form

This post will let you know how to reinitialize the hubspot form in your website. And for sure you’ll be surprised that it was really that simple.

In this step we are going to use the hubspot form embed code instead of hubl tag for hubspot form as you could only create a callback globally and cannot carry the options used on that form.

Here’s the code how to can achieve it. Our example is to reinitialize the form after a successful submission. First is we need an element where we will append the form.

<div id="hs_custom_form"> </div>

Next is just to play around hubspot form embed code.

<!--[if lte IE 8]><script charset="utf-8" src="https://js.hsforms.net/forms/v2-legacy.js"></script><![endif]-->
<script src="/_hcms/forms/v2.js"></script>
<script>
var options_form_a = {
    portalId: {{ portal_id }}, 
    pageId: {{content_id}},
    css: "",
    formId: "put_your_form_id_here",
    target: "#hs_custom_form",
    onFormSubmitted: function(){
      hbspt.forms.create(hs_custom_form);
    }
};
hbspt.forms.create(hs_custom_form);
</script></div>

This scripts are all coming from hubspot and is self explanatory.

<!--[if lte IE 8]><script charset="utf-8" src="https://js.hsforms.net/forms/v2-legacy.js"></script><![endif]-->
<script src="/_hcms/forms/v2.js"></script>

While this code is for the options of what the hubspot create function should use.

var options_form_a = {
    portalId: {{ portal_id }}, 
    pageId: {{content_id}},
    css: "",
    formId: "put_your_form_id_here",
    target: "#hs_custom_form",
    onFormSubmitted: function(){
      hbspt.forms.create(hs_custom_form);
    }
};

This is the reason why we choose to use an embed code instead of hubl so we can create a unique javascript variable incase we needed to reinitialize the form and required to have multiple hubspot form in single page.

So everytime we want to reinitialize the form is by just creating it again!

hbspt.forms.create(hs_custom_form);

And that’s it! The code above just re-created the form using the options appended to the variable which in our case is hs_custom_form.

Tagged with