Two-Step form in HubSpot

hubspot-2step-form.html

<h1>2 Step Form</h1>
<div id="demo-form"></div>
<script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/v2.js"></script>
<script>
  var data = []

  hbspt.forms.create({
  portalId: "YOUR_PORTAL_ID_HERE",
  formId: "STEP_ONE_FORM_ID_HERE",
  target: "#demo-form",
  onFormSubmit: function(form) {
    var incoming = $(form).serializeArray();
    data.push(incoming);
  },
  onFormSubmitted: function(form) {
    $('#demo-form').empty();
    hbspt.forms.create({
      portalId: "YOUR_PORTAL_ID_HERE",
      formId: "STEP_TWO_FORM_ID_HERE",
      target: "#demo-form",
      onFormReady: function(form) {
        form.find('input[name="email"]').val(data[0].value).change();
      }    
    })
  }
});
</script>

This is not working.
This ends up showing the message.

Can you elaborate a bit more? Not sure where to start debugging. also there are some conditions on hubspots side to get this working.

• email field needs to be first on both forms
• 'render as raw html' needs to be enabled
• jquery loaded

i also made a generator for these, maybe this one works for you: https://github.com/thesnappingdog/hubspot-multistep-form-generator

I happened to use the above code only and missed out on jQuery, that is the reason why it didn't work.

Super! Happy to hear

Hello Richard,

how can i add a 3-steps form?

Thanks in advance

Hi @Temona007 try using the generator i built -- it should allow you to make infinite step forms: https://github.com/thesnappingdog/hubspot-multistep-form-generator

Hi @Temona007 try using the generator i built -- it should allow you to make infinite step forms: https://github.com/thesnappingdog/hubspot-multistep-form-generator

Great thanks and have a sunny day!

Hi, how can we add a progress bar in this multi step form?