Thanks @thesnappingdog this solution is awesome!
How can I add dedicated form titles to each of the different forms? e.g. if I want to number the steps: step 1 of 2, step 2 of 2, etc.
The code you sent includes one general title to all forms.
hey @elanashama , if i understood you correctly then that can be easily done in the actual form builder. You can just add a header text or a rich text and simply write it in.
add header
edit header
End result
Thanks @thesnappingdog , I will do that.
Hey @thesnappingdog First, I like this solution. I want to insert a progressive bar for multi-step forms. Please have a look into above image. Can you help with this ?
Hello @Mutyalarao wanted to share this Community post with more information about this matter here.
Kindly,
Pam
wow, thx for the code!
i tried for a few hours now but i didnt get it work with a third form-step
may you explain how to do that?
- Figure out why code breaks when ‘Set as a raw HTML form’ is disabled
The form is probably being rendered in an iframe
@tjoyce that’s the thing though - with the manual object compilation (the walkthrough i made) even iframe rendering worked fine. But in the generator, (and the forEach) it somehow pulls in the ID of the iframe to target option, instead of the div i specify :S
I am testing your multistep form generator with an array of 5 form ids. I have functionality between the first form and the second form, however, when I submit the second form the console throws the following error “Not submitting form because we are already submitting handleSubmit”. Do you have an guidance?
hey @joshbjames are all of your forms a) set to “render as raw html” and b) all forms use “display thank you message” except the last one? Feel free to message me on here or linkedin though, id like to learn what’s going wrong so i can improve the code
Hello @thesnappingdog
I have created 3 seperate forms in hubspot and marge them using your codebase. But after submission of final step I got 3 seperate email response in my mailbox with submitted data which I have already submitted. I want a single mail for all the steps. Can you please help me?
This solution chains seperate forms together, so if you have an email notification set up for each form it will send multiple emails. I only enabled email notifications on the first form and turned off email notifications on my forms 2 - n.
Hello @thesnappingdog
If I have only HTML form with multistep funcanality can I submit the HTML form data to hubspot using API?
hey @soumyadipdutta8 im not sure i understand the question. please elaborate. You mean like if you have an actual <form></form> which is not a hubspot rendered form?
If yes, looks like its possible, but youd still need a form ID from hubspot
https://legacydocs.hubspot.com/docs/methods/forms/submit_form
Hey @soumyadipdutta8 and @thesnappingdog, did you know how to do something like this? descubre.capitalizarme.com/ab/7f01231e
I know.. is very ugly.. but i need to make this function on hubspot first.. after that i will find the way to make it pretty pretty 
This is great work! Really glad I found it. Thank you so much!
Hi @thesnappingdog ,
Is there a way to add a “previous” button to the second form, so that someone can go back to the first form? Also, when doing so, would the user lose all data inserted into the second form?
Hi ,can you help on this i have tried mutipage form as below ,however it is not loading at all.
<!--
templateType: page
isAvailableForNewContent: true
-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
{{ standard_header_includes }}
</head>
<body>
{% dnd_area "dnd_area"
label="Main section"
%}
{% dnd_section %}
{% dnd_column %}
{% dnd_row %}
{% dnd_module path="@hubspot/logo" %}
{% end_dnd_module %}
{% end_dnd_row %}
{% dnd_row %}
{% dnd_module path="@hubspot/rich_text" %}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
{% end_dnd_area %}
{{ standard_footer_includes }}
<div id="demo-form"></div>
<script>
var data = []
hbspt.forms.create({
portalId: "XXXXXX",
formId: "XXXXXX",
target: "#demo-form",
onFormSubmit: function(form) {
var incoming = $(form).serializeArray();
data.push(incoming);
},
onFormSubmitted: function(form) {
$('#demo-form').empty();
hbspt.forms.create({
portalId: "XXXXXX",
formId: "XXXXXXX",
target: "#demo-form",
onFormReady: function(form) {
form.find('input[name="email"]').val(data[0].value).change();
}
})
}
});
</script>
</body>
</html>
wow, thx for the code!
i tried for a few hours now but i didnt get it work with a third form-step
may you explain how to do that?
This is the code that worked for me to make it 3-step. You only need to capture the email “onFormSubmit” once, and basically you swap a form “onFormSubmitted” after it’s done. Like @thesnappingdog said though, you can probably break this up into functions to make it a little cleaner and expand the flexiblity.
<div id="form-container"></div>
<script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/v2.js"></script>
<script>
var data = [];
hbspt.forms.create({
portalId: "####",
formId: "FORM1####",
target: "#form-container",
onFormSubmit: function(form) {
var incoming = $(form).serializeArray();
data.push(incoming);
},
onFormSubmitted: function(form) {
$('#form-container').empty();
hbspt.forms.create({
portalId: "####",
formId: "FORM2####",
target: "#form-container",
onFormReady: function(form) {
form.find('input[name="email"]').val(data[0][0].value).change();
},
onFormSubmitted: function(form) {
$('#form-container').empty();
hbspt.forms.create({
portalId: "####",
formId: "FORM3####",
target: "#form-container",
onFormReady: function(form) {
form.find('input[name="email"]').val(data[0][0].value).change();
}
})
}
})
}
});
</script>
One thing that was a little off for me is that the email was being stored with:
var incoming = $(form).serializeArray();
data.push(incoming);
form.find('input[name="email"]').val(data[0][0].value).change();
which is a level deeper in the array than what @thesnappingdog had in his example. Not sure why… just how the array seemed stored for me.