Create Multi-Step Page Form On Hubspot

[RMechergui]

Hi, If anyone looks to create a 2-page form using Hubspot, this is the solution for this, the only down side the this script is that must to ask for the email on the first page form:

<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({

    portalId: "test****",
    formId: "test****",


onFormSubmit: function($form){
         var email = $form.find('input[name="email"]').val();

          window.location = "URLHERE?email=" + encodeURIComponent( email);
    }
  });
</script>

Steps:

1- Create two pages that you want to link to each other.

2- Make sure you ask for the email address on the first form because you will get that variable (value) on the link of the second form.

3- Make sure you add the 'HIDDEN FIELD' Email on the second page (form) to get that synchronized between the two pages.

Very Important Note: THIS SOLUTION IS ONLY FOR PEOPLE WHO WANT TO CREATE ONLY 2 PAGES AND THEY MUST ASK FOR THE EMAIL ADDRESS ON THE FIRST-PAGE FORM TO SUCCESSFULLY LINK THE TWO PAGES TO EACH OTHER.

My Message To The Hubspot Developers Nerds: I want to upgrade this code to make it flexible for other people because not all the people have Hubspot Developers backgrounds, I still have some questions about the script, can you please help me?

My questions:

1- What if the person if he has 3 or 4 forms how he could do it with the script above?

2- How we could take multiple variables (values) with the email, like name, last name, country, and phone number?

3- In the script that I have is to take the email variable (value) only, but in some form, it doesn't ask for the email, is there any alternative solution for this, like taking another (variable) or (value)?

Guys, I really appreciate it if you could edit directly the code above the questions in this way everyone could benefit from it and at the same time it will be clear as well, I'm counting on you, Thank you So Much For Your Help.

[miljkovicmisa]

Hello there @RMechergui , so basically you would like the fields of the form to be on different pages if I understand correctly, right? 

Could you elaborate more on the usecase for this? Like what are the benefits of implementing a lead capture in this way? Also, are there any real world example of this to take a look?

I'm thinking a lot of ways to achieve this but all have pros and cons, one possible solution is a module based approach where you actually take one input on each page, store every pages field in session and pass them concatenated in the next page, then on the final page you output the form, hide it and add a submit button to send the form programmatically, though none of this is tested, it theoretically should work.

I'm very open to get this conversation started.

[RMechergui]

Hi, @miljkovicmisa 

Yes, I want the fields of the form to be on different pages, but doing something like this is need a good developer to create this, but I'm a marketer I do not have strong knowledge of code, so we split the one form that has 15 questions into two forms on Hubspot, Let's say the 15 questions form has been split it into 'Form 1' & 'Form 2' on Hubspot and create a page for each one of them on the website and use the script above this message to link them to each other.

The benefit of capturing leads in this way is the user experience, most of the people when you show them a form with 15 questions unlikely you won't get a lot of people that will fulfill a long form that first, and the second thing is most of the forms start with asking for the name email and phone number if we just get this information on Hubspot we can reach out later to that person later through email or phone to complete that sell but if you give him a long-form he/she needs to complete a full form and confirm that access to this information, right, so the better way is the split that one form into pages and gets this important information to keep the conversation with your potential client, the other benefits are if he/she completes the full form with this way we could know that person is a HOT lead, that's mean is ready to become one of our customers because he/she complete the full form, the idea of having multi-page forms is for keep it friendly & simple, verifier users which are Cold and Hot Lead.

So this is my explanation of why having split long form into pages is very important, please, let me know what you think @miljkovicmisa I'm looking for a way to make the idea of having multi-step pages available through HubSpot in different scenarios, I will really appreciate your touch on the script.

Thank you.

[Jaycee_Lewis]

Hi, @RMechergui 👋 Thank you very much for adding your solution. I remember getting requests for this exact thing when I was in support here. 

Hey, @JBeatty @miljkovicmisa @MatthiasWeber, do you have any suggestions or optimizations for what @RMechergui shared?

Thank you! — Jaycee

[RMechergui]

Hi, @Jaycee_Lewis 

Thank you for sharing, Let's do it and make it possible for a lot of people who don't have a lot of knowledge of coding to create this by themself, I hope Hubspot adds this feature soon as well, that will help a lot.

Thank you again.