Multi Step Forms - Possible??

SOLVE
Jonnydk
Top Contributor

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

50 Replies 50
soumyadipdutta8
Member

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?

0 Upvotes
joshbjames
Participant

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.

0 Upvotes
soumyadipdutta8
Member

Hello @thesnappingdog 

 

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

0 Upvotes
thesnappingdog
Contributor

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

JFarías
Member

Hey @soumyadipdutta8 and @thesnappingdog, did you know how to do something like this? 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 😂

0 Upvotes
DigitalKris
Participant | Partner

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

rwolupo
Top Contributor

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

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. 

rwolupo
Top Contributor

thx @squatchcreative 

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

thesnappingdog
Contributor

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)

thesnappingdog
Contributor

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.

 

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

 

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

thesnappingdog
Contributor

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

 

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 

0 Upvotes
SimonKay
Member

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

0 Upvotes
squatchcreative
Contributor

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

SimonKay
Member

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.

 

 

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

 

Larmahil
Top Contributor

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!

freenudge
Participant | Partner

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

0 Upvotes
rwolupo
Top Contributor

@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

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
rwolupo
Top Contributor

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

0 Upvotes
joshbjames
Participant

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);
}