# Can I create a multi-step form?

**URL:** <https://community.hubspot.com/t/can-i-create-a-multi-step-form/3354>\
**Category:** CMS Development\
**Created:** [September 18, 2017, 4:46pm UTC](https://community.hubspot.com/t/can-i-create-a-multi-step-form/3354 "2017-09-18T16:46:08Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![jason1242000](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jason1242000/32/33328_2.png) [@jason1242000](https://community.hubspot.com/u/jason1242000)\
**Post date:** [September 18, 2017, 4:46pm UTC](https://community.hubspot.com/t/can-i-create-a-multi-step-form/3354/1 "2017-09-18T16:46:08Z")

</div>

Hello,

I have followed the steps in

[https://knowledge.hubspot.com/articles/kcs\_article/forms/can-i-create-a-multi-step-form](https://knowledge.hubspot.com/articles/kcs_article/forms/can-i-create-a-multi-step-form)

and created 6 multiple pages that redirect to each other. I have also included the email field in each of the forms.

My issue is that each page acts like an independent form sends me 6 seperate emails for each submission.

Is there a way to have all 6 forms as one email submission?

Thanks,

Jason.

---

<div class="post-metadata">

**Author:** ![Jsum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jsum/32/20405_2.png) [@Jsum](https://community.hubspot.com/u/Jsum)\
**Post date:** [September 18, 2017, 8:17pm UTC](https://community.hubspot.com/t/can-i-create-a-multi-step-form/3354/2 "2017-09-18T20:17:56Z")

</div>

@jason1242000,

I think you have 2 options here:

1. the Hubspot forms API

2. build all of the steps but the last yourself in html. pass the data yourself using javascript and hidden fields. On the last step use a Hubspot form with hidden fields and inject all of the data from the other steps into the hidden fields. when they submit it will pass all of the data in the same field.

---

<div class="post-metadata">

**Author:** ![jason1242000](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jason1242000/32/33328_2.png) [@jason1242000](https://community.hubspot.com/u/jason1242000)\
**Post date:** [September 24, 2017, 1:48pm UTC](https://community.hubspot.com/t/can-i-create-a-multi-step-form/3354/3 "2017-09-24T13:48:41Z")

</div>

@Jsum

Is there a guide or if you can show me the code to inject the values of a form to the hidden fields and submit the data?

I have built out the html but did not find any info / guide for this step.

Thanks,

Jason.

---

<div class="post-metadata">

**Author:** ![Jsum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jsum/32/20405_2.png) [@Jsum](https://community.hubspot.com/u/Jsum)\
**Post date:** [September 24, 2017, 11:00pm UTC](https://community.hubspot.com/t/can-i-create-a-multi-step-form/3354/4 "2017-09-24T23:00:09Z")

</div>

It isn’t going to be a Hubspot answer, it will be a Javascript answer. You would use the submit on the first forms to send the form info as part of the url, and on the last page you would inject the info in to an actual hubspot form. You need to know about passing form info as “GET” to different pages, turning those pieces of info in to variables on the next page, them setting them as values of the hidden inputs for those fields. The process would be the same whether 2 forms or 100 forms all of the way up to the Hubspot form. You can create hidden fields in the form interface.

I don’t have any tutorial references, you’d have to just piece it together yourself.

---

<div class="post-metadata">

**Author:** ![jason1242000](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jason1242000/32/33328_2.png) [@jason1242000](https://community.hubspot.com/u/jason1242000)\
**Post date:** [September 26, 2017, 1:30am UTC](https://community.hubspot.com/t/can-i-create-a-multi-step-form/3354/5 "2017-09-26T01:30:09Z")

</div>

@Jsum

I found what I need in a developer guide and figured out I needed the onformready function:

```auto
Update fields when page finishes loading:

$(window).load(function(){
 $('input[value="checkbox_1"]').prop('checked', true).change();
 $('input[name="firstname"]').val('Brian').change(); 
 });

Modified embed code to update fields when form builds:

 hbspt.forms.create({ 
 portalId: 'XXXXXX',
 formId: 'aa8b5b4a-62ac-461b-a387-XXXXXXXXXXX',
 onFormReady($form, ctx){
 		$('input[value="checkbox_1"]').prop('checked', true).change();
 	$('input[name="firstname"]').val('Brian').change(); 
 	}
 });

```

My question was for this guide.

Thanks,

Jason.

---

<div class="post-metadata">

**Author:** ![Jsum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jsum/32/20405_2.png) [@Jsum](https://community.hubspot.com/u/Jsum)\
**Post date:** [September 26, 2017, 4:29pm UTC](https://community.hubspot.com/t/can-i-create-a-multi-step-form/3354/6 "2017-09-26T16:29:50Z")

</div>

ah ok cool. Do the fields update immediately for you this way? usually it takes about 30 seconds for contact info to update so the info doesn’t populate in the fields unless you give a few seconds between form submit and page load.

---

<div class="post-metadata">

**Author:** ![jason1242000](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jason1242000/32/33328_2.png) [@jason1242000](https://community.hubspot.com/u/jason1242000)\
**Post date:** [September 26, 2017, 4:40pm UTC](https://community.hubspot.com/t/can-i-create-a-multi-step-form/3354/7 "2017-09-26T16:40:54Z")

</div>

@Jsum

The way I set it up, the form submits instantly after validation and I get the validation email right after that. Also the contacts get submitted and created in HubSpot Contacts.

The data does not submit to the hubspot form until the validation process at the end of my script. I have the variables updating for every onchange() function and loads in a jQuery and then run the onFormReady function at the end.

It doesnt give me the abandoned form start data but it seems to be the best way to get data to the hubspot form fields.

I tried to get the abandoned form data by submitting individual data to the ids however that does not work.

Thanks,

Jason.

---

<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:** [March 2, 2019, 9:55pm UTC](https://community.hubspot.com/t/can-i-create-a-multi-step-form/3354/8 "2019-03-02T21:55:47Z")

</div>

We have created one it is now available in the Hubspot Marketplace:

[https://marketplace.hubspot.com/products/larmahil/multi-step-form-2](https://marketplace.hubspot.com/products/larmahil/multi-step-form-2)

---

<div class="post-metadata">

**Author:** ![wchouwmx](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/wchouwmx/32/32458_2.png) [@wchouwmx](https://community.hubspot.com/u/wchouwmx)\
**Post date:** [March 8, 2019, 5:20pm UTC](https://community.hubspot.com/t/can-i-create-a-multi-step-form/3354/9 "2019-03-08T17:20:16Z")

</div>

Our company created a simple, intuitive, easy to use multi-step form creator for HubSpot users. We’re rolling it out to beta testers.[Check it out and see how this HubSpot multistepform wizard works yourself here.](https://www.webmechanix.com/tool-hubspot-multi-step-form-generator-dynamic-progressive-forms/)

---

<div class="post-metadata">

**Author:** ![AlyssaCervantes](https://avatars.discourse-cdn.com/v4/letter/a/ed8c4c/32.png) [@AlyssaCervantes](https://community.hubspot.com/u/AlyssaCervantes)\
**Post date:** [June 3, 2022, 6:09pm UTC](https://community.hubspot.com/t/can-i-create-a-multi-step-form/3354/10 "2022-06-03T18:09:12Z")

</div>

Is this application still available? This is exactly what I’m looking to do as I’m in the middle of building an onboarding form for our sales team to use with new clients.

---

<div class="post-metadata">

**Author:** ![karanjalendere](https://avatars.discourse-cdn.com/v4/letter/k/46a35a/32.png) [@karanjalendere](https://community.hubspot.com/u/karanjalendere)\
**Post date:** [January 13, 2024, 2:03pm UTC](https://community.hubspot.com/t/can-i-create-a-multi-step-form/3354/11 "2024-01-13T14:03:46Z")

</div>

For Creating Multi step form in hubspot either you can customize the CSS and js or another option is to use a third party app like [https://formmaker.co.in/](https://formmaker.co.in/)

also attaching demo video of this app so you will get an idea how this form works [https://www.youtube.com/watch?v=s1fDvrcNJks](https://www.youtube.com/watch?v=s1fDvrcNJks)

for more information contact me on info@ecoweb.ca

---

<div class="post-metadata">

**Author:** ![karstenkoehler](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/karstenkoehler/32/68554_2.png) [@karstenkoehler](https://community.hubspot.com/u/karstenkoehler)\
**Post date:** [August 7, 2024, 4:52am UTC](https://community.hubspot.com/t/can-i-create-a-multi-step-form/3354/12 "2024-08-07T04:52:02Z")

</div>

Hi @jason1242000,

This is now possible in HubSpot and in public beta!

_Forms_  
_Multi-Step Forms_  
_August 6, 2024_

_ **What is it?** _

_Multi-Step Forms tackles the problem of form abandonment by breaking down longer forms into manageable parts, providing visitors with a sense of accomplishment and encouraging completion._

_ **Why does it matter?** _

_Website visitors are more likely to complete shorter segments of a form than a long, daunting single page. This incremental approach can significantly improve conversion rates._

_ **How does it work?** _

_You will be able to create forms with a single step, add a step, remove a step._

_And move fields and moved contents between steps._

_ **Who gets it?** _

_Content Enterprise, Marketing Starter, Marketing Pro, Marketing Enterprise, Marketing+ Pro, Marketing+ Enterprise, Sales Starter, Sales Pro, Sales Enterprise, Service Starter, Service Pro, Service Enterprise_

_ **Learn More:** _  
_[Learn more on the Knowledge Base](https://knowledge.hubspot.com/forms/create-forms-using-the-new-forms-editor)_

You can find the beta here:

 ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/9/9925d9edf1f9cebff3cb43a85255f9cf3be6c601.png)

Best regards!
