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.
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.
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.
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.
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.
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.
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.
We have created one it is now available in the Hubspot Marketplace:
https://marketplace.hubspot.com/products/larmahil/multi-step-form-2
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.
Is this application still available? This is exactly what I’m looking to do as I’m in the middle of building an onboarding form for our sales team to use with new clients.
For Creating Multi step form in hubspot either you can customize the CSS and js or another option is to use a third party app like https://formmaker.co.in/
also attaching demo video of this app so you will get an idea how this form works https://www.youtube.com/watch?v=s1fDvrcNJks
for more information contact me on info@ecoweb.ca
Hi @jason1242000,
This is now possible in HubSpot and in public beta!
Forms
Multi-Step Forms
August 6, 2024
What is it?
Multi-Step Forms tackles the problem of form abandonment by breaking down longer forms into manageable parts, providing visitors with a sense of accomplishment and encouraging completion.
Why does it matter?
Website visitors are more likely to complete shorter segments of a form than a long, daunting single page. This incremental approach can significantly improve conversion rates.
How does it work?
You will be able to create forms with a single step, add a step, remove a step.
And move fields and moved contents between steps.
Who gets it?
Content Enterprise, Marketing Starter, Marketing Pro, Marketing Enterprise, Marketing+ Pro, Marketing+ Enterprise, Sales Starter, Sales Pro, Sales Enterprise, Service Starter, Service Pro, Service Enterprise
Learn More:
Learn more on the Knowledge Base
You can find the beta here:
Best regards!
