Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Two-Step form in HubSpot
<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>
@golchha21

This comment has been minimized.

Copy link

@golchha21 golchha21 commented Jan 11, 2021

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

@thesnappingdog

This comment has been minimized.

Copy link
Owner Author

@thesnappingdog thesnappingdog commented Jan 13, 2021

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

@golchha21

This comment has been minimized.

Copy link

@golchha21 golchha21 commented Jan 13, 2021

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

@thesnappingdog

This comment has been minimized.

Copy link
Owner Author

@thesnappingdog thesnappingdog commented Jan 13, 2021

Super! Happy to hear

@Temona007

This comment has been minimized.

Copy link

@Temona007 Temona007 commented Jan 27, 2021

Hello Richard,

how can i add a 3-steps form?

Thanks in advance

@thesnappingdog

This comment has been minimized.

Copy link
Owner Author

@thesnappingdog thesnappingdog commented Jan 27, 2021

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

@Temona007

This comment has been minimized.

Copy link

@Temona007 Temona007 commented Jan 28, 2021

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!

@Sakshibansal1995

This comment has been minimized.

Copy link

@Sakshibansal1995 Sakshibansal1995 commented Apr 3, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment