Lists, Lead Scoring & Workflows

Jonnydk
Top colaborador(a)

Multi Step Forms - Possible??

resolver

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 Coração

1 Solução aceita
thesnappingdog
Solução
Colaborador(a)

Multi Step Forms - Possible??

resolver

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

Exibir solução no post original

67 Respostas 67
joshbjames
Participante

Multi Step Forms - Possible??

resolver

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 Avaliação positiva
joshbjames
Participante

Multi Step Forms - Possible??

resolver

I am testing your multistep form generator with an array of 5 form ids. I have functionality between the first form and the second form, however, when I submit the second form the console throws the following error "Not submitting form because we are already submitting handleSubmit". Do you have an guidance?

0 Avaliação positiva
thesnappingdog
Colaborador(a)

Multi Step Forms - Possible??

resolver

hey @joshbjames are all of your forms a) set to "render as raw html" and b) all forms use "display thank you message" except the last one? Feel free to message me on here or linkedin though, id like to learn what's going wrong so i can improve the code

0 Avaliação positiva
tjoyce
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

Multi Step Forms - Possible??

resolver
  • Figure out why code breaks when 'Set as a raw HTML form' is disabled

The form is probably being rendered in an iframe

0 Avaliação positiva
thesnappingdog
Colaborador(a)

Multi Step Forms - Possible??

resolver

@tjoyce that's the thing though - with the manual object compilation (the walkthrough i made) even iframe rendering worked fine. But in the generator, (and the forEach) it somehow pulls in the ID of the iframe to target option, instead of the div i specify :S

0 Avaliação positiva
rwolupo
Top colaborador(a)

Multi Step Forms - Possible??

resolver

@thesnappingdog 

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? 

0 Avaliação positiva
squatchcreative
Colaborador(a)

Multi Step Forms - Possible??

resolver

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!

thesnappingdog
Colaborador(a)

Multi Step Forms - Possible??

resolver

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;
        }
elanashama
Top colaborador(a)

Multi Step Forms - Possible??

resolver

Thanks @thesnappingdog this solution is awesome!

How can I add dedicated form titles to each of the different forms? e.g. if I want to number the steps: step 1 of 2, step 2 of 2, etc.

The code you sent includes one general title to all forms.

thesnappingdog
Colaborador(a)

Multi Step Forms - Possible??

resolver

hey @elanashama , if i understood you correctly then that can be easily done in the actual form builder. You can just add a header text or a rich text and simply write it in. 

 

add headeradd headeredit headeredit headerEnd resultEnd result

Mutyalarao
Membro

Multi Step Forms - Possible??

resolver

Screenshot from 2021-02-04 09-35-27.png
Hey @thesnappingdog First, I like this solution. I want to insert a progressive bar for multi-step forms. Please have a look into above image. Can you help with this ?

0 Avaliação positiva
PamCotton
Gerente da Comunidade
Gerente da Comunidade

Multi Step Forms - Possible??

resolver

Hello @Mutyalarao wanted to share this Community post with more information about this matter here.

Kindly,

Pam

Você sabia que a Comunidade está disponível em outros idiomas?
Participe de conversas regionais, alterando suas configurações de idioma !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Avaliação positiva
elanashama
Top colaborador(a)

Multi Step Forms - Possible??

resolver

Thanks @thesnappingdog , I will do that.

Jonnydk
Top colaborador(a)

Multi Step Forms - Possible??

resolver

@thesnappingdog thanks! We will check it out Smiley feliz

Anonymous
Não aplicável

Multi Step Forms - Possible??

resolver

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

 

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

MFrankJohnson
Autoridade no assunto

Multi Step Forms - Possible??

resolver

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?

 

 

Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


www.mfrankjohnson.com
0 Avaliação positiva
Anonymous
Não aplicável

Multi Step Forms - Possible??

resolver

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.

0 Avaliação positiva
MFrankJohnson
Autoridade no assunto

Multi Step Forms - Possible??

resolver

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.

 

Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


www.mfrankjohnson.com
0 Avaliação positiva
MFrankJohnson
Autoridade no assunto

Multi Step Forms - Possible??

resolver

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)hubspot-simple-2-step-forms.png

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

 

Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


www.mfrankjohnson.com
Stephanie-OG
Conselheiro(a) de destaque

Multi Step Forms - Possible??

resolver

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 🙂 

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

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

rtoews
Participante

Multi Step Forms - Possible??

resolver

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

0 Avaliação positiva