Share Your Work

Niharika
Member | Platinum Partner
Member | Platinum Partner

How to create the multistep form in hubspot

Hello Everyone,

 

Today I want to share the direct code that would help you to create the multistep form in hubspot.

 

1) First you have to create the separate form for each step. Make sure each form would contain the email address.

2) Keep the email address field hidden in each form except the first form.

3) Also for each form, on STYLE & PREVIEW -> Enable the 'Set as a raw HTML form' option.

4) Then add the below code at landing page level.

 

 

<div id="demo-form"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/v2.js"></script>
<script>

const forms = [
"Add first form ID",
"Add second form ID",
"Add third form ID"
];
const portalId = 'Add PORT ID Extract from Form Embed code';
const target = '#demo-form';


const data = [];
const options = [];

const generateFormOptions = (form, index) => {
return {
portalId,
formId: form,
target,
onFormReady: function(form) {
if (index !== 0) {
form.find('input[name="email"]').val(data[0].value).change();
}
},
onFormSubmit: function(form) {
if (data.length === 0) {
const incoming = $(form).serializeArray();
data.push(incoming[0]);
}
},
onFormSubmitted: function() {
if (index !== forms.length - 1) {
$(target).empty();
hbspt.forms.create(options[index + 1]);
}
}
}
}

const multiStepForm = () => {
forms.forEach((form, index) => {
options.push(generateFormOptions(form, index));
})
hbspt.forms.create(options[0]);
}

multiStepForm();
</script>

 

Enjoy your multistep form.

 

Hope ths post would helpful for everyone.

 

Thanks

Niharika Goyal

1 Reply 1
Jaycee_Lewis
Community Manager
Community Manager

How to create the multistep form in hubspot

Hey, @Niharika! Thank you for sharing 🙌

 

Best,

Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes