# 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:** 13\
**Page:** 4

<div class="post-metadata">

**Author:** ![freenudge](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/freenudge/32/998_2.png) [@freenudge](https://community.hubspot.com/u/freenudge)\
**Post date:** [March 5, 2021, 11:30pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/61 "2021-03-05T23:30:09Z")

</div>

May we deploy your solution in WordPress or does it need to be a HubSpot Landing Page?

---

<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:47pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/62 "2023-11-08T14:47:46Z")

</div>

Links don’t work. Get a 404 for one and it goes to some other website for the other.

---

<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:** [October 14, 2020, 2:07pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/63 "2020-10-14T14:07:26Z")

</div>

@thesnappingdog

two problems

1) i’m using the “old” method (not your generator) to use a multi (3) step form on my website. In some cases the last few days and weeks, the second form didnt send the hidden email - so hubspot recognized the form from a new contact and every workflows broke 😞

2) when i use your generator instead, it only works with “render as raw html” - but then the styling is broken 😞

do you have any solution for that?

---

<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, 8:31pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/64 "2020-10-14T20:31:46Z")

</div>

Answering 2). I was able to style the generated multistep forms in my CSS using the ID selector and either the HTML elements and Hubspot classes. It is a little extra work, but worth having the multi-step feel.

---

<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:** [October 15, 2020, 12:21pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/65 "2020-10-15T12:21:47Z")

</div>

@joshbjames are you able to share those stylings? i am not sure about field names, classes etc.

---

<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 15, 2020, 12:57pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/66 "2020-10-15T12:57:44Z")

</div>

Hopefully this gives you a pattern to easily decipher. I included mine in my CSS file. You can put this in your html with \<style\>\</style\>, but that is not best practice and should be avoided.

```lia-code-sample
#multistep-form form {
	font-family: Poppins;
 margin: 20px;
}

#multistep-form h1, #multistep-form h5 {
	text-align: center;
}

.embed-form-super-wrapper form, .alt-form-3 form {
 margin: 0;
}

#multistep-form form .hs-field-desc {
	color: rgba(255, 255, 255, .75);
 margin: 15px 0 15px 0;
}

.embed-form-super-wrapper form, .alt-form-3 form {
 margin: 0;
}

#multistep-form form fieldset, .embed-form-super-wrapper form fieldset, .alt-form-3 form fieldset {
	max-width: none;
	text-align: left;
}

#multistep-form form label, .embed-form-super-wrapper label, .alt-form-3 label {
	color: white;
	font-size: 1rem;
}

#multistep-form form input, 
.embed-form-super-wrapper .hs-form input, 
.alt-form-3 .hs-form input, 
#multistep-form form select, 
.embed-form-super-wrapper .hs-form fieldset.form-columns-1 .hs-input, 
.alt-form-3 .hs-form fieldset.form-columns-1 .hs-input {
	background-color: rgba(255, 255, 255, .85);
	color: var(--primary);
	border-radius: 50px;
	margin-bottom: 15px;
	margin-top: 8px;
	padding-left: 15px;
	width: 100%;
	box-sizing: border-box;
	margin-left: 5px;
	margin-right: 5px;
 outline: none;
 color:#002a44;

}

#multistep-form form input[type="submit"], .embed-form-super-wrapper form input[type="submit"], .alt-form-3 form input[type="submit"] {
	font-family: "Poppins", Arial !important;
	letter-spacing: 2px !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	color: #fff !important;
	background: #3ca267 !important;
	border-top-width: 0px !important;
	border-bottom-width: 0px !important;
	border-left-width: 0px !important;
	border-right-width: 0px !important;
	border-radius: 75px !important;
	border-style: solid !important;
	border-color: #53b8fb !important;
	border-radius: 75px !important;
	-moz-border-radius: 75px !important;
	-webkit-border-radius: 75px !important;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 20px;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
	-khtml-transition: all 0.2s linear;

}

#multistep-form form input[type="submit"]:hover, .embed-form-super-wrapper input[type="submit"]:hover, 
.alt-form-3 input[type="submit"]:hover {
	background: #3ca267 !important;
	color: #ffffff !important;
	border-color: rgba(30, 61, 82, 0) !important;
	-webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	cursor: pointer;
}

#multistep-form form li {
	text-align: left;
}

[type="checkbox"]+span:not(.lever):before, [type="checkbox"]:not(.filled-in)+span:not(.lever):after {
	border: 1px solid #ffffff;
}

[type="checkbox"]:checked+span:not(.lever):before {
	border-right: 2px solid var(--secondary);
 border-bottom: 2px solid var(--secondary);
}

```

---

<div class="post-metadata">

**Author:** ![cloudfox](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cloudfox/32/83363_2.png) [@cloudfox](https://community.hubspot.com/u/cloudfox)\
**Post date:** [October 21, 2021, 2:17pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/67 "2021-10-21T14:17:57Z")

</div>

Hi @thesnappingdog firstly, thanks for the code, it was precisely what I was looking for. Unfortunately, I can’t get it to work in any Hubspot hosted pages using themes.

Two issues encountered:

1. Options variable already declared in chrome dev tools. Changing the javascript to options2 cleared it.
2. _Couldn’t find target container #multistep-form for HubSpot Form 5412a705-e3d9-461c-a114-02381dffc828. Not rendering form onto the page_

I think issue 2 is due to the **const target = ‘#multistep-form’;** in the javascript. The ID generated by the theme appears to change on every refresh and I can’t find a way to make the form id static.

You can see what I mean on the [demo-multi-step-form](http://hubspot-demo-account-cloudfox-19912473.hs-sites.com/demo-multi-step-form) I’ve created using the Atlas Theme in the marketplace.

Any help appreciated.

Setup:

3 forms added

1st form adds email, forms 2 and 3 email is hidden

all forms set to raw html

all forms show thank you message  
javascript source added to page using these [instructions](https://knowledge.hubspot.com/design-manager/add-a-javascript-file-to-hubspot)

---

<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 22, 2024, 7:40am UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/68 "2024-01-22T07:40:25Z")

</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:** ![DavidVoigt](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/davidvoigt/32/47231_2.png) [@DavidVoigt](https://community.hubspot.com/u/DavidVoigt)\
**Post date:** [June 26, 2024, 1:05pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/69 "2024-06-26T13:05:56Z")

</div>

Now in private beta:  
[Multi-Step Forms in the new Forms Editor](https://app.hubspot.com/product-updates/l/?query=multi&update=13925235)

---

<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:** [June 26, 2024, 2:24pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/70 "2024-06-26T14:24:19Z")

</div>

This just goes to a 404 error page.

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [June 28, 2024, 9:47pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/71 "2024-06-28T21:47:00Z")

</div>

Hey, @chaddiller, It looks like that link is from their portal’s Product Update section and cannot be accessed by other users who aren’t in that portal. I found the details in my portal by going to the drop-down that’s under my profile picture (upper right), selecting Product Updates, and then searching for “Multi”.

 ![5a676d1a-d4e3-4142-a50d-206b48ed131a.default.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/0/f0e9d5634c3ff8293fa53648fafb7c1be6e236dd.png)

This one is still in Private Beta, so you, or an admin, will need to request access.

Best,

Jaycee

---

<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:39am UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/72 "2024-08-07T04:39:36Z")

</div>

Hi @Jonnydk and everyone,

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.

 ![karstenkoehler_2-1723005389356.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/e/9eb9fc1388d2eed102fb0d2b08b5a683c61ddc7c.jpeg)

> ### **How does it work?**
> 
> You will be able to create forms with a single step, add a step, remove a step.

 ![karstenkoehler_3-1723005396357.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/4/7/47b2cfb6b9a7f85bf7b4a4ed46328da7bdef7e1c.jpeg)

> 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/7/e/7e5c78c3381eabfda0484e7d256f2c55aefa85f6.png)

Best regards!

---

<div class="post-metadata">

**Author:** ![rmarkey](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rmarkey/32/49876_2.png) [@rmarkey](https://community.hubspot.com/u/rmarkey)\
**Post date:** [September 12, 2024, 2:52pm UTC](https://community.hubspot.com/t/multi-step-forms-possible/11000/73 "2024-09-12T14:52:18Z")

</div>

Off topic here, but is there a way to move the alignment of the buttons on the beta? I can’t seem to find a way to move the alignment, or adjust the width (preferably full container width).

Beyond that, I’m not seeing where you can convert them to an html form to do the styling on the web side via CSS. Any input on that? Thanks!

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