hubspot-multistep-form/dist/index.iife.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.

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