hubspot-multistep-form/dist/index.js

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.

function $({wrapperSelector:v=".formWrapper",hubspotFormSelector:h=".HubspotForm form",thankYouSelector:g=".thankyouMessage",nextPreviousSelector:b=".nextPrevious",submitMessageSelector:q=".submitted-message",validationRules:E={},skipValidation:k=[],progressBarSelector:S=".progressBar",loaderSelector:L=".formLoader",hubspotLoadBuffer:y=1500,submitResponseTimeout:x=5e3,maxLoadAttempts:w=3,onSuccessSubmit:F=()=>{},onFailedSubmit:T=()=>{},onError:A=()=>{}}={}){console.log("HubspotMultistepForm initialized with config:",{wrapperSelector:v,hubspotFormSelector:h,thankYouSelector:g,nextPreviousSelector:b,submitMessageSelector:q,validationRules:E,skipValidation:k,progressBarSelector:S,loaderSelector:L,hubspotLoadBuffer:y,submitResponseTimeout:x,maxLoadAttempts:w,onSuccessSubmit:F,onFailedSubmit:T,onError:A});let d=document.querySelector(v),N=document.querySelector(g),a=d?.querySelectorAll(".step")||[],p=document.querySelector(b),H=p?.querySelector(".next"),M=p?.querySelector(".prev"),W=document.querySelector(S),l=document.querySelector(L),o=0,n,B=0;console.log("js loaded");let P=t=>{if(!W)return;let s=(t+1)/a.length*100;W.style.width=`${s}%`},m=t=>{a.forEach((s,u)=>s.classList.toggle("active",u===t)),M.style.display=t>0?"inline-block":"none",H.style.display=t<a.length-1?"inline-block":"none",P(t)};m(o),p&&(p.style.display="block"),H?.addEventListener("click",()=>{j(o)&&o<a.length-1&&(o++,m(o))}),M?.addEventListener("click",()=>{o>0&&(o--,m(o))});let I=()=>{if(n=document.querySelector(h),!n&&B<w)return B++,setTimeout(I,y);if(!n){console.error("HubSpot form failed to load after max attempts"),A();return}d?.querySelector('input[type="submit"]')?.addEventListener("click",e=>{e.preventDefault(),l&&(l.style.display="block"),n?.submit();let r=setInterval(()=>{document.querySelector(q)&&(l&&(l.style.display="none"),N.style.display="block",d.style.display="none",clearInterval(r),F())},300);setTimeout(()=>{clearInterval(r),l&&(l.style.display="none"),T()},x)});let s=e=>{let r=e.name;if(!r||!n)return;let c=n.querySelector(`[name="${r}"]`);if(!c)return;e.type==="checkbox"||e.type==="radio"?n.querySelectorAll(`[name="${r}"]`).forEach(D=>{D.value===e.value&&(D.checked=e.checked)}):c.value=e.value,(e.tagName==="SELECT"||e.type==="checkbox"||e.type==="radio"?["change","blur"]:["input","change","blur"]).forEach(i=>{c.dispatchEvent(new Event(i,{bubbles:!0}))});let f=e.closest(".field");if(!f)return;f.querySelectorAll(".hs-error-msgs").forEach(i=>i.remove());let C=c.closest(".hs-form-field")?.querySelector(".hs-error-msgs");if(C?.textContent?.trim()){let i=C.cloneNode(!0);f.appendChild(i),e.classList.add("error","invalid")}else e.classList.remove("error","invalid")};Array.from(d?.querySelectorAll("input, select, textarea")||[]).filter(e=>e.type!=="submit").forEach(e=>{e.addEventListener("input",()=>s(e)),e.addEventListener("change",()=>s(e))})};setTimeout(I,y);let j=t=>{let s=a[t]?.querySelectorAll("input, select, textarea")||[],u=!0;return s.forEach(e=>{let r=e.name;!k.includes(r)&&(e.required||E[r])&&!e.value.trim()?(e.classList.add("invalid"),u=!1):e.classList.remove("invalid")}),u}}typeof window<"u"&&(window.initHubspotMultistepForm=$);typeof module<"u"&&typeof module.exports<"u"&&(module.exports={initHubspotMultistepForm:$});export{$ as initHubspotMultistepForm};