Lists, Lead Scoring & Workflows

Jonnydk
Top Contributor

Multi Step Forms - Possible??

SOLVE

Hi is it possible to achieve a "multi-step" form through hubspot. The first part of the form would be the basics, First Name, Last Name, Work Email and Company Name. Once the user clicks "Next" we would ask them to fill in more details. If they leave before or after next we will capture their info and assign them to a lifecycle stage and if they finish the next step we will qualify them for a sales call. Is this possible, if so how can I achieve this? TYIA Heart

2 Accepted solutions
thesnappingdog
Solution
Contributor

Multi Step Forms - Possible??

SOLVE

hey I don't know if anyone's still looking for a solution to this. 

 

I wrote a how to + shared the code for creating 2 step forms.

 

However with this method you can chain any amount of forms if you want, it's just nicer to split the code into neat functions rather than what is done in the how-to.

 

hopefully this helps someone!

 

how-to:

 https://hyper-typed-marketing.mailchimpsites.com/growth-multistep-forms-hubspot

code: https://gist.github.com/thesnappingdog/44e470c160e13d3208ad5cf613027a47

 

P.S. this works without hiccups except that... completing two step form counts as.. two form submissions 😄 

 

Edit: I made a multi step generator so nobody has to painfully copy paste code. see other reply for more details: 

 

https://github.com/thesnappingdog/hubspot-multistep-form-generator

View solution in original post

karstenkoehler
Solution
Hall of Famer | Partner
Hall of Famer | Partner

Multi Step Forms - Possible??

SOLVE

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.png

 

How does it work?

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

 

 
karstenkoehler_3-1723005396357.png

 

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

You can find the beta here:

 

karstenkoehler_4-1723005475280.png

 

Best regards!

Karsten Köhler
HubSpot Freelancer | RevOps & CRM Consultant | Community Hall of Famer

Beratungstermin mit Karsten vereinbaren

 

Did my post help answer your query? Help the community by marking it as a solution.

View solution in original post

72 Replies 72
karstenkoehler
Solution
Hall of Famer | Partner
Hall of Famer | Partner

Multi Step Forms - Possible??

SOLVE

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.png

 

How does it work?

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

 

 
karstenkoehler_3-1723005396357.png

 

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

You can find the beta here:

 

karstenkoehler_4-1723005475280.png

 

Best regards!

Karsten Köhler
HubSpot Freelancer | RevOps & CRM Consultant | Community Hall of Famer

Beratungstermin mit Karsten vereinbaren

 

Did my post help answer your query? Help the community by marking it as a solution.

rmarkey
Participant

Multi Step Forms - Possible??

SOLVE

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!

0 Upvotes
DavidVoigt
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Multi Step Forms - Possible??

SOLVE
0 Upvotes
Jaycee_Lewis
Community Manager
Community Manager

Multi Step Forms - Possible??

SOLVE

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”. 

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

 

Best,

Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes
chaddiller
Contributor | Gold Partner
Contributor | Gold Partner

Multi Step Forms - Possible??

SOLVE

This just goes to a 404 error page. 

0 Upvotes
karanjalendere
Member

Multi Step Forms - Possible??

SOLVE

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/

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

for more information contact me on info@ecoweb.ca

0 Upvotes
cloudfox
Participant | Partner
Participant | Partner

Multi Step Forms - Possible??

SOLVE

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 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 

0 Upvotes
rwolupo
Top Contributor

Multi Step Forms - Possible??

SOLVE

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

0 Upvotes
joshbjames
Participant

Multi Step Forms - Possible??

SOLVE

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.

#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);
}
rwolupo
Top Contributor

Multi Step Forms - Possible??

SOLVE

@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? 

0 Upvotes
joshbjames
Participant

Multi Step Forms - Possible??

SOLVE

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.

0 Upvotes
Anonymous
Not applicable

Multi Step Forms - Possible??

SOLVE

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. 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. https://www.larmahil.com/hubspot-asset-marketplace/multi-step-form

 

NO CODING REQUIRED!

chaddiller
Contributor | Gold Partner
Contributor | Gold Partner

Multi Step Forms - Possible??

SOLVE

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

0 Upvotes
freenudge
Participant | Partner
Participant | Partner

Multi Step Forms - Possible??

SOLVE

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

0 Upvotes
wchouwmx
Participant

Multi Step Forms - Possible??

SOLVE

That's why 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.

-With love, Will Chou
chaddiller
Contributor | Gold Partner
Contributor | Gold Partner

Multi Step Forms - Possible??

SOLVE

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

0 Upvotes
Jonnydk
Top Contributor

Multi Step Forms - Possible??

SOLVE

Hi  @wchouwmx can we be a beta tester?

0 Upvotes
thesnappingdog
Contributor

Multi Step Forms - Possible??

SOLVE

I was looking into this yesterday as well, managed by build a working prototype locally. 

 

Long story short I just create a new form in the old ones place with the "onSubmit" option in the embed code.

 

Then pass over the first forms values as hidden fields to the next one. That way I don't need to wait for hubspot to update the fields to the actual database.

 

The last one form then actually sends all of the info.

 

Still need to test it out on our actual website but looks promising and since it only needs some extra lines of javascript

 

 

rwolupo
Top Contributor

Multi Step Forms - Possible??

SOLVE

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? 

squatchcreative
Contributor

Multi Step Forms - Possible??

SOLVE

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.