-
-
Save thesnappingdog/44e470c160e13d3208ad5cf613027a47 to your computer and use it in GitHub Desktop.
| <h1>2 Step Form</h1> | |
| <div id="demo-form"></div> | |
| <script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/v2.js"></script> | |
| <script> | |
| var data = [] | |
| hbspt.forms.create({ | |
| portalId: "YOUR_PORTAL_ID_HERE", | |
| formId: "STEP_ONE_FORM_ID_HERE", | |
| target: "#demo-form", | |
| onFormSubmit: function(form) { | |
| var incoming = $(form).serializeArray(); | |
| data.push(incoming); | |
| }, | |
| onFormSubmitted: function(form) { | |
| $('#demo-form').empty(); | |
| hbspt.forms.create({ | |
| portalId: "YOUR_PORTAL_ID_HERE", | |
| formId: "STEP_TWO_FORM_ID_HERE", | |
| target: "#demo-form", | |
| onFormReady: function(form) { | |
| form.find('input[name="email"]').val(data[0].value).change(); | |
| } | |
| }) | |
| } | |
| }); | |
| </script> |
Can you elaborate a bit more? Not sure where to start debugging. also there are some conditions on hubspots side to get this working.
- email field needs to be first on both forms
- 'render as raw html' needs to be enabled
- jquery loaded
i also made a generator for these, maybe this one works for you: https://github.com/thesnappingdog/hubspot-multistep-form-generator
I happened to use the above code only and missed out on jQuery, that is the reason why it didn't work.
Super! Happy to hear
Hello Richard,
how can i add a 3-steps form?
Thanks in advance
Hi @Temona007 try using the generator i built -- it should allow you to make infinite step forms: https://github.com/thesnappingdog/hubspot-multistep-form-generator
Hi @Temona007 try using the generator i built -- it should allow you to make infinite step forms: https://github.com/thesnappingdog/hubspot-multistep-form-generator
Great thanks and have a sunny day!
Hi, how can we add a progress bar in this multi step form?
This is not working.
This ends up showing the message.