hubspot-multistep-form is a lightweight, zero-backend, multi-step form builder designed to sync user input directly to HubSpot forms. Ideal for lead capture, surveys, onboarding flows, and more.
npm install hubspot-multistep-formbash
npm install hubspot-multistep-form
``
---
✨ Features
* 🎯 Multi-step static form logic
* 🔄 Syncs all inputs (input, textarea, select, checkbox, radio) to HubSpot
* ✅ Customizable required field validation
* 📊 Animated progress bar support
* ⏳ Buffer loading logic for delayed HubSpot embed forms
* 🔁 Retry attempts if HubSpot form takes time to load
* 🔍 Customizable thank-you message + loader display
* 📦 Zero dependencies
---
🧠 Usage Example
$3
`html
`
---
$3
#### 🔁 With NPM:
`js
import { initHubspotMultistepForm } from 'hubspot-multistep-form';
initHubspotMultistepForm({
wrapperSelector: '.formWrapper',
hubspotFormSelector: '.HubspotForm form',
thankYouSelector: '.thankyouMessage',
nextPreviousSelector: '.nextPrevious',
submitMessageSelector: '.submitted-message',
progressBarSelector: '.progressBar',
loaderSelector: '.formLoader',
hubspotLoadBuffer: 2000,
submitResponseTimeout: 6000,
validationRules: {
email: (val) => /\S+@\S+\.\S+/.test(val)
},
skipValidation: ['website'],
onSuccessSubmit: () => console.log('Submitted successfully!'),
onFailedSubmit: () => alert('Form submission failed.'),
onError: () => alert('HubSpot form failed to load.')
});
`
#### 🌐 Or with CDN:
`html
`
Replace {version} with the latest published version.
---
🔧 API: Configuration Options
| Option | Type | Default | Description |
| ----------------------- | ---------- | -------------------- | ---------------------------------------------------------- |
| wrapperSelector | string | .formWrapper | Static form container selector |
| hubspotFormSelector | string | .HubspotForm form | Embedded HubSpot form selector |
| thankYouSelector | string | .thankyouMessage | Selector for post-submit success message |
| progressBarSelector | string | .progressBar | Progress bar element selector |
| loaderSelector | string | .formLoader | Loader element shown during submission |
| nextPreviousSelector | string | .nextPrevious | Container for next/previous buttons |
| submitMessageSelector | string | .submitted-message | HubSpot's post-submit confirmation element |
| skipValidation | string[] | [] | Field names to skip validation |
| validationRules | object | {} | Add custom validation rules (optional/future-ready) |
| hubspotLoadBuffer | number | 1500 | Delay (ms) before checking if HubSpot form is loaded |
| submitResponseTimeout | number | 5000 | Timeout (ms) to stop polling for HubSpot’s success message |
| onSuccessSubmit | function | () => {} | Callback when form is successfully submitted |
| onFailedSubmit | function | () => {} | Callback if form was submitted but HubSpot didn’t respond |
| onError | function | () => {}` | Callback if HubSpot form fails to load in time |