La fonction de suggestion automatique permet d'affiner rapidement votre recherche en suggérant des correspondances possibles au fur et à mesure de la frappe.
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
juil. 31, 202012:03 AM - modifié sept. 17, 202010:28 AM
Contributeur
Multi Step Forms - Possible??
Résolue
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.
Thanks for this - I'm running your code above (and have elongated it to 5 forms) and it's showing them sequentially front end (on my Wordpress site). However the data is only being captured in HubSpot for the first form submission – it's as though it's not linking the other 4 forms that follow to the Contact record.
I've replaced the $ (dollar sign) with "jQuery" as suggested by @thesnappingdog in his original article and have played aorund with both the original array level and your suggested depper array @squatchcreative.
Is there anything else I should look at to ensure that the email is being handed off correctly between forms?
(Evidentally, I'm not a JS pro, so appreciate the help!)
@SimonKay It's impossible to troubleshoot your issue without seeing your code. Were you having success with it working as 2 steps before you turned it into 5 steps? I would start there before you added to the complexity of the form. Begin with two forms, use @thesnappingdog example, and see if that works. Find out if it is handing off the email to the next form with just 2. If it doesn't, post that code, and any errors in your console when it doesn't work. If it does work, try 3, and so on.
My example and his example traverse down a Javascript array differently, so which one are you using? Did you try the other? Try outputting the email variable to your console log -- see what it says. Is it blank? Does it output the email correctly? When you go to the 2nd step, inspect your email field.... did it place the email value in there for you? You need to check all of these things to make sure you are actually passing the email variable.
I tried scaling from 2, to 3,4,5 forms. On all fronts, the form progressed through the sequence (i.e. on submit, I was able to see and complete the next form), however HubSpot is only recording the data submitted from the FIRST form. As though it's not attributing the following forms with that Contact – and therefore isn't passing the email variable.
I tried with both array options. I also altered the JS script link (as mentioned in the thread) and played with switching the "$" vs. "jQuery" variables (you'll see I landed on the latter in my code below, since this actually allowed the forms to appear one after another).
So it would appear the issue is the email hand-off.
sept. 17, 20202:20 AM - modifié sept. 17, 20202:27 AM
Contributeur
Multi Step Forms - Possible??
Résolue
that's awesome @squatchcreative@rwolupo ! I was thinking about this yesterday, and specifically how @squatchcreative you probably had to do a lot of copypasting with a 6 step form.. I'm gonna try to make a multi-step generator so that you guys only need to edit a formId array, target and portal id.
At the end of the day hbspt.forms.create() just needs an object with info and it should be possible to make that programmatic (first step options, inbetween, last form options)
Long story short, I made a generator that does all the work you'd have to do with my previous code. It will create as many steps as you have forms.
Now you just need to edit:
- forms = [form1, form2, etc]
- target = 'container id'
- portalId = 'your portal id'
It worked flawlessly for me on a Chrome browser, each steps' submission was recorded in the CRM. I tried with 3 forms, then with 4. It's written in more modern javascript so if this works well I could see what the code would be in old timey script.
juil. 31, 202012:03 AM - modifié sept. 17, 202010:28 AM
Contributeur
Multi Step Forms - Possible??
Résolue
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.
Is there a way to add a "previous" button to the second form, so that someone can go back to the first form? Also, when doing so, would the user lose all data inserted into the second form?
hey @soumyadipdutta8 im not sure i understand the question. please elaborate. You mean like if you have an actual <form></form> which is not a hubspot rendered form?
If yes, looks like its possible, but youd still need a form ID from hubspot
I have created 3 seperate forms in hubspot and marge them using your codebase. But after submission of final step I got 3 seperate email response in my mailbox with submitted data which I have already submitted. I want a single mail for all the steps. Can you please help me?