topic Re: Multi Step Forms - Possible?? in Lists, Lead Scoring & Workflows

Multi Step Forms - Possible??

Jonnydk — Thu, 22 Nov 2018 13:54:59 GMT

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

Re: Multi Step Forms - Possible??

MFrankJohnson — Fri, 16 Aug 2019 09:34:42 GMT

Q: 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. ?

Short A: HubSpot forms don't have built-in multi-step functionality. And, most known workarounds are either clunky, unreliable, or require code customizations.

Longer A:

We can try to emulate this behavior by chaining forms together using the 'Redirect to another page' functionality upon form completion. Naturally, this workaround requires our forms are customized exclusively for this functionality since the submit button on form #1 would say something like 'Next' ...

(see image -- Step #1)

- source http://devlp.frankinbound.com/lp-example-2-step-hubspot-form-1-of-2-v1

That form on the page show above is step #1 of a 2-step form. Here's the problem, or should I say problemS!

- Only works if GDPR is turned off.

- Doesn't pre-populate reliably and therefore doesn't reliably hide previously submitted fields.

- Easily rendered ineffective if visitor opts out of cookies.

I'm sure there are other issues we're leaving out, but that should give you an idea of what you're facing if you try to do this within HubSpot.

Maybe the design guys have a more elegant solution, but that will undoubtedly require code. Our recommendation is to use a forms solution that integrates with HubSpot nicely AND already has this functionality buit-in. (Typeform?)

Re: Multi Step Forms - Possible??

Stephanie-OG — Thu, 22 Nov 2018 19:13:57 GMT

Thanks for tagging me Frank!

Unfortunately there's no native solution (aside from redirecting from one page to the next) or using a Typeform integration.

Any other solutions I've seen are custom coded. I created my own module which is easy to use and works quite well (details and demo). I've submitted it to the Template Marketplace and am hoping it'll be approved soon 🙂

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

Re: Multi Step Forms - Possible??

Anonymous — Mon, 18 Mar 2019 20:34:22 GMT

We have created one it is now available in the hubspot marketplace:

https://marketplace.hubspot.com/products/larmahil/multi-step-form-2

Re: Multi Step Forms - Possible??

MFrankJohnson — Sat, 02 Mar 2019 22:18:31 GMT

Nice looking ... and smooth operation. Particularly like the 'previous' and 'next' ability.

Please post about how much customization work is involved and what you're using to achieve this. Obviously a WP site with an ... HS embedded form? What else? .js?

Re: Multi Step Forms - Possible??

Anonymous — Sat, 02 Mar 2019 22:50:07 GMT

We just submitted it to the Hubspot marketplace for review. If it is approved it will be available to purchase there. Our site is a hubspot hosted site not wordpress, and the module does use a combination of css js and hubl code.

Re: Multi Step Forms - Possible??

MFrankJohnson — Sat, 02 Mar 2019 23:06:49 GMT

Nice. Builtwith reports your site as both HS AND WP ...weird (i guess)

We'll keep an eye out for a link to the Marketplace.

Again, nice work.

Re: Multi Step Forms - Possible??

wchouwmx — Fri, 08 Mar 2019 17:25:36 GMT

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.

Re: Multi Step Forms - Possible??

CFR — Tue, 23 Apr 2019 16:17:06 GMT

@Stephanie-OG that is beautiful. I went on the page but couldn't find the module so that I can add it to my template. Is it available for download anywhere?

On an unrelated note, it looks like there are few other gems on your site (the Add a "Forward to a Friend" Link to HubSpot Emails looks interesting) so I'll bookmark it.

Thanks for putting this together.

Re: Multi Step Forms - Possible??

Stephanie-OG — Tue, 23 Apr 2019 18:57:37 GMT

Thanks @CFR 🙂

Not yet, I've had issues publishing to the Marketplace (unrelated to the module itself) but I have sold it to a few people directly. Feel free to get in touch if you're interested!

Stephanie O'Gay Garcia

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

Re: Multi Step Forms - Possible??

chrissa0000 — Thu, 25 Apr 2019 04:29:22 GMT

@Stephanie-OG , Hi! May I know what it is the name of the module I would like to use it as well?

Re: Multi Step Forms - Possible??

Stephanie-OG — Thu, 25 Apr 2019 13:40:15 GMT

Hi @chrissa0000 - thanks for contacting me! I've replied to your message now.

Re: Multi Step Forms - Possible??

rtoews — Wed, 20 May 2020 17:05:09 GMT

This is EXACTLY what I need. Any news if I can use something like this in HubSpot? Or a tool that integrates with HubSpot?

Re: Multi Step Forms - Possible??

PamCotton — Wed, 20 May 2020 20:19:11 GMT

Hello @rtoews

At the moment we don't have functionality for multi-step forms within HubSpot yet.

What can be done in HubSpot if you work with a developer in your team is to create a customization using custom forms module.

Also looks like @Anonymous created a module where you can use multi-step forms here

Kindly,

Pam

Re: Multi Step Forms - Possible??

Jonnydk — Thu, 21 May 2020 11:19:40 GMT

Hi @wchouwmx can we be a beta tester?

Re: Multi Step Forms - Possible??

thesnappingdog — Tue, 14 Jul 2020 04:24:19 GMT

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

Re: Multi Step Forms - Possible??

thesnappingdog — Thu, 17 Sep 2020 14:28:32 GMT

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

Re: Multi Step Forms - Possible??

Jonnydk — Fri, 31 Jul 2020 06:35:27 GMT

@thesnappingdog thanks! We will check it out

Re: Multi Step Forms - Possible??

squatchcreative — Wed, 09 Sep 2020 16:25:25 GMT

huge kudos to @thesnappingdog for that detailed breakdown. It's a very effective method and I've successfully chained a 6-step form using this method. Awesome job!

Re: Multi Step Forms - Possible??

thesnappingdog — Thu, 10 Sep 2020 12:07:31 GMT

woohoo, thanks @squatchcreative 🙂 super stoked that it works for someone else than just us! We built a 3 step form for our demo request. I also added a reset button (for step 2,3) and some CSS3 animations on ours so that the form pops out a bit smoother and makes it feel a bit more.. like it's 1 form.

#demo form { -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 1s; /* Firefox < 16 */ -ms-animation: fadein 1s; /* Internet Explorer */ -o-animation: fadein 1s; /* Opera < 12.1 */ animation: fadein 1s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Firefox < 16 */ @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Internet Explorer */ @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Opera < 12.1 */ @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .return-off { display: none; } .return-on { display: inline; }