# Multi Step Forms - Possible??

**URL:** <https://community.hubspot.com/t/multi-step-forms-possible/11000>\
**Category:** Lists, Lead Scoring & Workflows\
**Created:** [November 22, 2018, 1:54pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000 "2018-11-22T13:54:59Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![elanashama](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/elanashama/32/48165_2.png) [@elanashama](https://community.hubspot.com/u/elanashama)\
**Post date:** [September 13, 2020, 3:02pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/21 "2020-09-13T15:02:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![thesnappingdog](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/thesnappingdog/32/46151_2.png) [@thesnappingdog](https://community.hubspot.com/u/thesnappingdog)\
**Post date:** [September 13, 2020, 4:50pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/22 "2020-09-13T16:50:25Z")

</div>

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.

 ![31610i711B9E551EBCC00B.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/a/5afc97747386eeccaebffebf8b2051d0b585a200.jpeg)  
add header  
 ![31611i39A647C1E126BDD2.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/e/2ed8a35738ba120349af7cc7e5061543387a1563.jpeg)  
edit header  
 ![31609iA19207794097C0F5.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/0/b0a0987a1e166cc819da8dabb1b3287180b83036.jpeg)  
End result

---

<div class="post-metadata">

**Author:** ![elanashama](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/elanashama/32/48165_2.png) [@elanashama](https://community.hubspot.com/u/elanashama)\
**Post date:** [September 15, 2020, 7:35am UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/23 "2020-09-15T07:35:29Z")

</div>

Thanks @thesnappingdog , I will do that.

---

<div class="post-metadata">

**Author:** ![Mutyalarao](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mutyalarao/32/70229_2.png) [@Mutyalarao](https://community.hubspot.com/u/Mutyalarao)\
**Post date:** [February 4, 2021, 4:54am UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/24 "2021-02-04T04:54:26Z")

</div>

![37461i57A647EF35EC18F7.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/a/8/a84e33a312f0372cbc944d00deb666a9344a524c.png)

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 ?

---

<div class="post-metadata">

**Author:** ![PamCotton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pamcotton/32/47916_2.png) [@PamCotton](https://community.hubspot.com/u/PamCotton)\
**Post date:** [February 4, 2021, 11:14pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/25 "2021-02-04T23:14:12Z")

</div>

Hello @Mutyalarao wanted to share this Community[post with more information about this matter here.](https://community.hubspot.com/t5/Lead-Capture-Tools/How-do-I-create-a-multi-step-form/td-p/218716)

Kindly,

Pam

---

<div class="post-metadata">

**Author:** ![rwolupo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rwolupo/32/65918_2.png) [@rwolupo](https://community.hubspot.com/u/rwolupo)\
**Post date:** [September 16, 2020, 3:30pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/26 "2020-09-16T15:30:14Z")

</div>

@thesnappingdog

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?

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [October 3, 2020, 8:18am UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/27 "2020-10-03T08:18:39Z")

</div>

- Figure out why code breaks when ‘Set as a raw HTML form’ is disabled

The form is probably being rendered in an iframe

---

<div class="post-metadata">

**Author:** ![thesnappingdog](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/thesnappingdog/32/46151_2.png) [@thesnappingdog](https://community.hubspot.com/u/thesnappingdog)\
**Post date:** [October 6, 2020, 8:41pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/28 "2020-10-06T20:41:39Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![joshbjames](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/joshbjames/32/47092_2.png) [@joshbjames](https://community.hubspot.com/u/joshbjames)\
**Post date:** [October 6, 2020, 8:20pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/29 "2020-10-06T20:20:53Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![thesnappingdog](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/thesnappingdog/32/46151_2.png) [@thesnappingdog](https://community.hubspot.com/u/thesnappingdog)\
**Post date:** [October 6, 2020, 8:40pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/30 "2020-10-06T20:40:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![soumyadipdutta8](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/soumyadipdutta8/32/9373_2.png) [@soumyadipdutta8](https://community.hubspot.com/u/soumyadipdutta8)\
**Post date:** [October 13, 2020, 9:40pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/31 "2020-10-13T21:40:56Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![joshbjames](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/joshbjames/32/47092_2.png) [@joshbjames](https://community.hubspot.com/u/joshbjames)\
**Post date:** [October 14, 2020, 1:06pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/32 "2020-10-14T13:06:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![soumyadipdutta8](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/soumyadipdutta8/32/9373_2.png) [@soumyadipdutta8](https://community.hubspot.com/u/soumyadipdutta8)\
**Post date:** [October 13, 2020, 9:45pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/33 "2020-10-13T21:45:00Z")

</div>

Hello @thesnappingdog

If I have only HTML form with multistep funcanality can I submit the HTML form data to hubspot using API?

---

<div class="post-metadata">

**Author:** ![thesnappingdog](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/thesnappingdog/32/46151_2.png) [@thesnappingdog](https://community.hubspot.com/u/thesnappingdog)\
**Post date:** [October 22, 2020, 6:32pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/34 "2020-10-22T18:32:06Z")

</div>

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](https://legacydocs.hubspot.com/docs/methods/forms/submit_form)

---

<div class="post-metadata">

**Author:** ![JFarias](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jfarias/32/102945_2.png) [@JFarias](https://community.hubspot.com/u/JFarias)\
**Post date:** [December 17, 2020, 1:07am UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/35 "2020-12-17T01:07:28Z")

</div>

Hey @soumyadipdutta8 and @thesnappingdog, did you know how to do something like this? [descubre.capitalizarme.com/ab/7f01231e](http://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 😂

---

<div class="post-metadata">

**Author:** ![DigitalKris](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/digitalkris/32/29368_2.png) [@DigitalKris](https://community.hubspot.com/u/DigitalKris)\
**Post date:** [May 27, 2021, 2:57pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/36 "2021-05-27T14:57:54Z")

</div>

This is great work! Really glad I found it. Thank you so much!

---

<div class="post-metadata">

**Author:** ![elanashama](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/elanashama/32/48165_2.png) [@elanashama](https://community.hubspot.com/u/elanashama)\
**Post date:** [March 20, 2022, 6:23pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/37 "2022-03-20T18:23:59Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![sboi](https://avatars.discourse-cdn.com/v4/letter/s/22d042/32.png) [@sboi](https://community.hubspot.com/u/sboi)\
**Post date:** [April 1, 2022, 1:43am UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/38 "2022-04-01T01:43:24Z")

</div>

Hi ,can you help on this i have tried mutipage form as below ,however it is not loading at all.

```lia-code-sample
<!--
 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>

```

---

<div class="post-metadata">

**Author:** ![rwolupo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rwolupo/32/65918_2.png) [@rwolupo](https://community.hubspot.com/u/rwolupo)\
**Post date:** [September 16, 2020, 3:22pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/39 "2020-09-16T15:22:06Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![squatchcreative](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/squatchcreative/32/42150_2.png) [@squatchcreative](https://community.hubspot.com/u/squatchcreative)\
**Post date:** [September 16, 2020, 3:35pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/40 "2020-09-16T15:35:21Z")

</div>

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.

```lia-code-sample
<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:

```lia-code-sample
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.

[Previous page](https://community.hubspot.com/t/multi-step-forms-possible/11000.md?page=1)

[Next page](https://community.hubspot.com/t/multi-step-forms-possible/11000.md?page=3)