# 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:** 3

<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, 4:18pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/41 "2020-09-16T16:18:44Z")

</div>

thx @squatchcreative

it worked for me - except of the form.find thing … i had to use the orginal code from @thesnappingdog

---

<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 17, 2020, 6:20am UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/42 "2020-09-17T06:20:51Z")

</div>

that’s awesome @squatchcreative @rwolupo ! I was thinking about this yesterday, and specifically how @squatchcreative you probably had to do a lot of copypasting with a 6 step form.. I’m gonna try to make a multi-step generator so that you guys only need to edit a formId array, target and portal id.

At the end of the day hbspt.forms.create() just needs an object with info and it should be possible to make that programmatic (first step options, inbetween, last form options)

---

<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 17, 2020, 1:24pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/43 "2020-09-17T13:24:33Z")

</div>

hey @Jonnydk @rwolupo @squatchcreative @elanashama can I ask you to be pilots for something.

Long story short, I made a generator that does all the work you’d have to do with my previous code. It will create as many steps as you have forms.

Now you just need to edit:

- forms = [form1, form2, etc]

- target = ‘container id’

- portalId = ‘your portal id’

It worked flawlessly for me on a Chrome browser, each steps’ submission was recorded in the CRM. I tried with 3 forms, then with 4. It’s written in more modern javascript so if this works well I could see what the code would be in old timey script.

> **[GitHub - thesnappingdog/hubspot-multistep-form-generator: Custom embed code to generate TypeForm like forms...](https://github.com/thesnappingdog/hubspot-multistep-form-generator)**
>
> Custom embed code to generate TypeForm like forms for HubSpot

Please see the README.md before implementing and please let me know if there’s bugs / errors either here or on github 🙏

---

<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 17, 2020, 6:23am UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/44 "2020-09-17T06:23:13Z")

</div>

I remember running into this problem as well when building the proto:

```lia-code-sample
var incoming = $(form).serializeArray();
data.push(incoming);
form.find('input[name="email"]').val(data[0][0].value).change();

```

I think it started happening if i $(form).serializeArray multiple times, then the data var ended up having other arrays in it :S

---

<div class="post-metadata">

**Author:** ![SimonKay](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/simonkay/32/98942_2.png) [@SimonKay](https://community.hubspot.com/u/SimonKay)\
**Post date:** [November 19, 2020, 6:45pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/45 "2020-11-19T18:45:50Z")

</div>

Thanks for this - I’m running your code above (and have elongated it to 5 forms) and it’s showing them sequentially front end (on my Wordpress site). However the data is only being captured in HubSpot for the first form submission – it’s as though it’s not linking the other 4 forms that follow to the Contact record.  
I’ve replaced the $ (dollar sign) with “jQuery” as suggested by @thesnappingdog in his original article and have played aorund with both the original array level and your suggested depper array @squatchcreative.

Is there anything else I should look at to ensure that the email is being handed off correctly between forms?  
(Evidentally, I’m not a JS pro, so appreciate the help!)

---

<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:** [November 23, 2020, 3:38pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/46 "2020-11-23T15:38:06Z")

</div>

@SimonKay It’s impossible to troubleshoot your issue without seeing your code. Were you having success with it working as 2 steps before you turned it into 5 steps? I would start there before you added to the complexity of the form. Begin with two forms, use @thesnappingdog example, and see if that works. Find out if it is handing off the email to the next form with just 2. If it doesn’t, post _ **that** _ code, and any errors in your console when it doesn’t work. If it does work, try 3, and so on.

My example and his example traverse down a Javascript array differently, so which one are you using? Did you try the other? Try outputting the email variable to your console log -- see what it says. Is it blank? Does it output the email correctly? When you go to the 2nd step, inspect your email field… did it place the email value in there for you? You need to check all of these things to make sure you are actually passing the email variable.

Good luck.

---

<div class="post-metadata">

**Author:** ![SimonKay](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/simonkay/32/98942_2.png) [@SimonKay](https://community.hubspot.com/u/SimonKay)\
**Post date:** [November 23, 2020, 3:48pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/47 "2020-11-23T15:48:19Z")

</div>

I appreciate that, thanks @squatchcreative. Code below this.

I tried scaling from 2, to 3,4,5 forms. On all fronts, the form progressed through the sequence (i.e. on submit, I was able to see and complete the next form), however HubSpot is only recording the data submitted from the FIRST form. As though it’s not attributing the following forms with that Contact – and therefore isn’t passing the email variable.  
I tried with both array options. I also altered the JS script link (as mentioned in the thread) and played with switching the “$” vs. “jQuery” variables (you’ll see I landed on the latter in my code below, since this actually allowed the forms to appear one after another).  
So it would appear the issue is the email hand-off.

Thanks for your help – much appreciated.

```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: "XXXX",
		formId: "XXXX",
		target: "#form-container",
		onFormSubmit: function(form) {
			var incoming = jQuery(form).serializeArray();
			data.push(incoming);
		},
		onFormSubmitted: function(form) {
			jQuery('#form-container').empty();
			hbspt.forms.create({
				portalId: "XXXX",
				formId: "XXXX",
				target: "#form-container",
				onFormReady: function(form) {
					form.find('input[name="email"]').val(data[0].value).change();
				},
				onFormSubmitted: function(form) {
					jQuery('#form-container').empty();
					hbspt.forms.create({
						portalId: "XXXX",
						formId: "XXXX",
						target: "#form-container",
						onFormReady: function(form) {
							form.find('input[name="email"]').val(data[0].value).change();
						},
						onFormSubmitted: function(form) {
							jQuery('#form-container').empty();
							hbspt.forms.create({
								portalId: "XXXX",
								formId: "XXXX",
								target: "#form-container",
								onFormReady: function(form) {
									form.find('input[name="email"]').val(data[0].value).change();
								},
								onFormSubmitted: function(form) {
									jQuery('#form-container').empty();
									hbspt.forms.create({
										portalId: "XXXX",
										formId: "XXXX",
										target: "#form-container",
										onFormReady: function(form) {
											form.find('input[name="email"]').val(data[0].value).change();
										}
									})
								}
							})
						}
					})
				}
			})
		}
	});
</script>

```

---

<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:** [March 29, 2022, 11:48am UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/48 "2022-03-29T11:48:27Z")

</div>

How can i get to this HTML interface in hubspot ,do i have to create a form Module and write this code?

---

<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 29, 2022, 12:00pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/49 "2022-03-29T12:00:59Z")

</div>

I did it by inserting the code directly into the page template, without the form module.

---

<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:** [March 29, 2022, 12:18pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/50 "2022-03-29T12:18:58Z")

</div>

thank you, i managed to create a page and embded the script with in the body,however it doesnt flow on to the next form, it is stuck on form one only.

any reason ?

---

<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 29, 2022, 12:26pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/51 "2022-03-29T12:26:22Z")

</div>

Is this the code you embedded?

\<div id=“demo-form”\>\</div\>

\<script\>

var data = []

hbspt.forms.create({

portalId: “INSERT\_PORTAL\_ID”,

formId: “INSERT\_FORM\_ID”,

target: “#demo-form”,

onFormSubmit: function(form) {

var incoming = $(form).serializeArray();

data.push(incoming);

},

onFormSubmitted: function(form) {

$(‘#demo-form’).empty();

hbspt.forms.create({

portalId: " INSERT\_PORTAL\_ID ",

formId: " INSERT\_FORM\_ID ",

target: “#demo-form”,

onFormReady: function(form) {

form.find(‘input[name=“email”]’).val(data[0].value).change();

}

})

}

});

\</script\>

---

<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:** [March 29, 2022, 12:44pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/52 "2022-03-29T12:44:48Z")

</div>

here is the html code of the page , which has the above in it.

```lia-code-sample
<!--
 templateType: "page"
 isAvailableForNewContent: true
-->
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="{{ html_lang }}" {{ html_lang_dir }}> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="{{ html_lang }}" {{ html_lang_dir }}> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="{{ html_lang }}" {{ html_lang_dir }}> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="{{ html_lang }}" {{ html_lang_dir }}> <!--<![endif]-->
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="author" content="{{ meta_author }}">
 <meta name="description" content="{{ page_meta.meta_description }}">
 <meta name="generator" content="HubSpot">
 {% if page_meta.html_title %}<title>{{ page_meta.html_title }}</title>{% endif %}
 {% if site_settings.favicon_src %}<link rel="shortcut icon" href="{{ site_settings.favicon_src }}" />{% endif %}

{{ required_head_tags }}

 {{ include_css("/hubspot_default/shared/responsive/layout.css") }}
 {{ user_head_overrides }}

</head>
<body class=" {{ builtin_body_classes }}" style="">
 <div class="header-container-wrapper">
 <div class="header-container container-fluid">

 </div><!--end header -->
</div><!--end header wrapper -->

<div class="body-container-wrapper">
 <div class="body-container container-fluid">

 </div><!--end body -->
</div><!--end body wrapper -->
<div id="demo-form"></div>
 <script>
 var data = []
 hbspt.forms.create({
 portalId: "INSERT_PORTAL_ID ",
 formId: "INSERT_FORM_ID",
 target: "#demo-form",
 onFormSubmit: function(form) {
 var incoming = $(form).serializeArray();
 data.push(incoming);
 },
 onFormSubmitted: function(form) {
 $('#demo-form').empty();
 hbspt.forms.create({
 portalId: "INSERT_PORTAL_ID ",
 formId: "INSERT_FORM_ID ",
 target: "#demo-form",
 onFormReady: function(form) {
 form.find('input[name="email"]').val(data[0].value).change();
 } 
 })
 }
 });
 </script>
<div class="footer-container-wrapper">
 <div class="footer-container container-fluid">

 </div><!--end footer -->
</div><!--end footer wrapper -->

 {{ standard_footer_includes }}

 <!-- Generated by the HubSpot Template Builder - template version 1.03 -->
</body>
</html>

```

---

<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 29, 2022, 12:54pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/53 "2022-03-29T12:54:59Z")

</div>

You need to insert your hubspot account portal ID and the relevant form IDs. Have you done that?

---

<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:** [March 29, 2022, 12:56pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/54 "2022-03-29T12:56:59Z")

</div>

Yes I have done that

---

<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 29, 2022, 1:25pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/55 "2022-03-29T13:25:21Z")

</div>

do you have jquery enabled on your pages?

---

<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:** [March 30, 2022, 5:44am UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/56 "2022-03-30T05:44:58Z")

</div>

I have enabled jQuery now , however i now get complete blank page in preview

---

<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 30, 2022, 6:25am UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/57 "2022-03-30T06:25:59Z")

</div>

This is the extent of my knowledge in this area. Sorry I can’t be of more help.

---

<div class="post-metadata">

**Author:** ![DavidSandel](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/davidsandel/32/97308_2.png) [@DavidSandel](https://community.hubspot.com/u/DavidSandel)\
**Post date:** [June 3, 2022, 10:54am UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/58 "2022-06-03T10:54:09Z")

</div>

Hey, this worked for me, thanks!  
I’m kind of a developer, but not really. (lol) So I’m wondering, how much do I have to worry about the data array index changing in the future? I know it’s out of our control and Hubspot isn’t going to send out a user-wide email, but if this custom code ever stops working, it might be difficult to catch.  
Also, if someone quits halfway through the forms, I know we can send them a reminder email to come back and fill it out using the HS automations, but is there a way to send them to the exact step on the original page? Otherwise, the workaround is to create individual pages corresponding to individual steps. Then updating the embed code to only include the forms from that point forward.

Thank you!

---

<div class="post-metadata">

**Author:** ![chaddiller](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/chaddiller/32/77566_2.png) [@chaddiller](https://community.hubspot.com/u/chaddiller)\
**Post date:** [November 8, 2023, 2:52pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/59 "2023-11-08T14:52:54Z")

</div>

Do you have a link to this in the marketplace? Did you update the styling of this?

---

<div class="post-metadata">

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

</div>

Officially there are several options for this now available in the Marketplace. We have 2 accepted solutions:

MultiFORM Module: This uses multiple forms within a single module, the advantage is you capture data at each step. [2007so太阳集团(中国区)官方网站-Online Platform](https://www.larmahil.com/hubspot-asset-marketplace/multiform-module)  
Multi-Step Form: This is a single form broken into multiple steps 150 installs in the last year. [2007so太阳集团(中国区)官方网站-Online Platform](https://www.larmahil.com/hubspot-asset-marketplace/multi-step-form)

NO CODING REQUIRED!

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

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