Creating a seamless, multi-step form using HubSpot for websites built on a CMS other than HubSpot can be a bit tricky, but with the right approach, it's absolutely achievable. In this post, we'll show you how to do it.
This approach is particularly beneficial for lengthy forms, as breaking them down into smaller, more manageable steps can greatly enhance user experience and increase form completion rates.
Step 1: Build a HubSpot form for each step
First, you need to create a series of HubSpot forms, with each form representing a step in your multi-step process. Each form must contain an email address field. This is crucial because it links the forms together, allowing HubSpot to associate each step's fields with the same contact.
Still in HubSpot, set the redirect action to display a thank you message for all but the last form in your multi-step flow. Set the text to "Waiting..." or something similar.
Step 2: Embed each form on its own page
Next, you'll need to embed each form on its own page on your website. Use the following embed code for all but the last form of your multi-step form.
Before pasting this code, make these changes:
- Replace {{your portal id}} and {{your form id}} with your specific HubSpot portal and form IDs
- Replace {{URL for form step 2}} with the actual URL where your next form resides
So, what are we doing here? This code modifies the standard HubSpot form embed code to grab the user's email and append it to the next form's URL. This way, the next form step will automatically populate the email field when the page loads.
Embed the last form in your multi-step flow with the standard HubSpot form embed code.
By following these steps, you can effectively create a multi-step form experience for your users, even if your website isn’t hosted on HubSpot's CMS.