Multi Step Forms - Possible??

[Jonnydk]

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 

[cloudfox]

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 

[rwolupo]

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

[joshbjames]

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]

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

[joshbjames]

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.

[Anonymous]

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]

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

[freenudge]

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

[wchouwmx]

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.

[chaddiller]

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

[Jonnydk]

Hi  @wchouwmx can we be a beta tester?

[thesnappingdog]

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]

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]

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. 

[Sandeld]

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!

[sboi]

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

[elanashama]

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

[sboi]

 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 ?

[elanashama]

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>

[sboi]

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

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