I have a HubSpot form integrated into my website but I need to keep it invisible because it doesn’t match my site’s visual design. Instead of showing the actual form, I want users to click on a custom styled button that will submit the HubSpot form data in the background. Is there a way to achieve this programmatically? I’m looking for a JavaScript solution that can capture form data and send it to HubSpot without displaying their default form styling. Any help would be appreciated!
I solved this with HubSpot’s JavaScript API but took a different route. Instead of hiding the form, I stuck it in a zero-dimension iframe positioned off-screen. HubSpot still tracks everything and handles the backend stuff normally. When someone clicks my custom button, I use postMessage to populate the iframe form and trigger submission. You keep all HubSpot’s features like progressive profiling and smart fields, but get full control over your UI. Just remember to listen for the onFormSubmit callback so you can handle success states on your main page.
another way is to go with hubspot’s embed form, just hide it using css (like display: none) then fill it with js and trigger the submit via document.querySelector(‘#your-form’).submit(). it’s a bit of a hack but avoids the whole api and cors hassle.
I’ve done this exact thing with HubSpot forms. Skip trying to mess with their embedded form - just hit their Forms API directly. You’ll need the portal ID and form GUID, then POST to https://api.hsforms.com/submissions/v3/integration/submit/{portalId}/{formGuid}. Structure your payload with the field values and proper headers. Watch out for CORS issues - you might need to handle that on your backend. Way cleaner than hiding and manipulating their form elements, and you get full control over styling and UX.
Been there with the same constraints. I keep the HubSpot form loaded but hidden, then use JavaScript to populate it when my custom button gets clicked. I grab the form by its HubSpot ID, use setValue() for each field, then call the submit function. Just wait for the form to fully load first - HubSpot has callbacks for this. You keep all their validation and tracking while controlling the UI completely. Don’t forget to handle success/error callbacks so users know what happened.
This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.