Can I create a multi-step form?

SOLVE
Occasional Contributor

Hello,

 

I have followed the steps in 

https://knowledge.hubspot.com/articles/kcs_article/forms/can-i-create-a-multi-step-form

and created 6 multiple pages that redirect to each other. I have also included the email field in each of the forms.

 

My issue is that each page acts like an independent form sends me 6 seperate emails for each submission.

 

Is there a way to have all 6 forms as one email submission?

 

Thanks,

 

Jason.

 

1 Accepted solution

Accepted Solutions
Occasional Contributor

@Jsum

 

I found what I need in a developer guide and figured out I needed the onformready function:

 

Update fields when page finishes loading:

$(window).load(function(){
    $('input[value="checkbox_1"]').prop('checked', true).change();
    $('input[name="firstname"]').val('Brian').change();     
    });

Modified embed code to update fields when form builds:

    hbspt.forms.create({ 
    portalId: 'XXXXXX',
    formId: 'aa8b5b4a-62ac-461b-a387-XXXXXXXXXXX',
    onFormReady($form, ctx){
   		$('input[value="checkbox_1"]').prop('checked', true).change();
    	$('input[name="firstname"]').val('Brian').change();   
   	}
  });

 My question was for this guide.

 

Thanks,

 

Jason.

Reply
0 Upvotes
8 Replies 8
Esteemed Advisor

@jason1242000,

 

I think you have 2 options here:

 

1. the Hubspot forms API

 

2. build all of the steps but the last yourself in html. pass the data yourself using javascript and hidden fields. On the last step use a Hubspot form with hidden fields and inject all of the data from the other steps into the hidden fields. when they submit it will pass all of the data in the same field. 

- Jonathan Sumner
Occasional Contributor

@Jsum

 

Is there a guide or if you can show me the code to inject the values of a form to the hidden fields and submit the data?

 

I have built out the html but did not find any info / guide for this step.

 

Thanks,

 

Jason.

Reply
0 Upvotes
Esteemed Advisor

It isn't going to be a Hubspot answer, it will be a Javascript answer. You would use the submit on the first forms to send the form info as part of the url, and on the last page you would inject the info in to an actual hubspot form. You need to know about passing form info as "GET" to different pages, turning those pieces of info in to variables on the next page, them setting them as values of the hidden inputs for those fields. The process would be the same whether 2 forms or 100 forms all of the way up to the Hubspot form. You can create hidden fields in the form interface. 

 

I don't have any tutorial references, you'd have to just piece it together yourself. 

- Jonathan Sumner
Reply
0 Upvotes
Occasional Contributor

@Jsum

 

I found what I need in a developer guide and figured out I needed the onformready function:

 

Update fields when page finishes loading:

$(window).load(function(){
    $('input[value="checkbox_1"]').prop('checked', true).change();
    $('input[name="firstname"]').val('Brian').change();     
    });

Modified embed code to update fields when form builds:

    hbspt.forms.create({ 
    portalId: 'XXXXXX',
    formId: 'aa8b5b4a-62ac-461b-a387-XXXXXXXXXXX',
    onFormReady($form, ctx){
   		$('input[value="checkbox_1"]').prop('checked', true).change();
    	$('input[name="firstname"]').val('Brian').change();   
   	}
  });

 My question was for this guide.

 

Thanks,

 

Jason.

Reply
0 Upvotes
Esteemed Advisor

ah ok cool. Do the fields update immediately for you this way? usually it takes about 30 seconds for contact info to update so the info doesn't populate in the fields unless you give a few seconds between form submit and page load.

- Jonathan Sumner
Reply
0 Upvotes
Occasional Contributor

@Jsum

 

The way I set it up, the form submits instantly after validation and I get the validation email right after that. Also the contacts get submitted and created in HubSpot Contacts.

 

The data does not submit to the hubspot form until the validation process at the end of my script. I have the variables updating for every onchange() function and loads in a jQuery and then run the onFormReady function at the end.

 

It doesnt give me the abandoned form start data but it seems to be the best way to get data to the hubspot form fields.

 

I tried to get the abandoned form data by submitting individual data to the ids however that does not work.

 

Thanks,

 

Jason.

Reply
0 Upvotes
Regular Contributor

We have created one it is now available in the Hubspot Marketplace:

 

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

Reply
0 Upvotes
Highlighted
Regular Contributor | Diamond Partner

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.

-With love, Will Chou