topic Re: Embed new Beta Multi step form in Content Strategy & SEO

Embed new Beta Multi step form

camillanyberg — Fri, 27 Sep 2024 09:16:27 GMT

We are trying out the new multi step form but the new way to embed the forms seems to only have option to embed an iframe. We want to use external css from our site to style the form inputs.

Also the hubspot styling for the form doesnt seem to be included when using the iframe.

Re: Embed new Beta Multi step form

camillanyberg — Fri, 27 Sep 2024 09:35:47 GMT

Ok we got one step closer, I just hit "Save" but had to hit "Review and update" to get the latest styling changes in my embedded form if i use the iframe solution. But it would be nice to be able to implement an external css for the form input fields.

Re: Embed new Beta Multi step form

karstenkoehler — Fri, 27 Sep 2024 09:37:14 GMT

@camillanyberg the new forms beta unfortunately does not (yet) support a raw HTML embed code to then apply your own CSS to it. I assume this will be added over the coming weeks but as of now, it's not possible.

Re: Embed new Beta Multi step form

camillanyberg — Fri, 27 Sep 2024 09:49:20 GMT

Thank you for answering so quickly! 🙂 I will keep a look out for new updates regarding the forms and let our client know that atleast for now, it's not supported and unkown if/when.

Re: Embed new Beta Multi step form

ARez — Fri, 27 Sep 2024 10:53:39 GMT

Embed New Beta Multi-Step Form

Great news—we’re making progress! I just clicked “Save,” but I needed to hit “Review and Update” to see the latest styling changes in my embedded form when using the iframe solution. It would be fantastic to have the option to apply external CSS for customizing the form input fields as well.

Re: Embed new Beta Multi step form

ARez — Tue, 12 Nov 2024 16:03:30 GMT

Here are additional ideas for styling HubSpot’s multi-step form without relying on iframes or external links:

Apply CSS with JavaScript: After the form loads, use JavaScript to access the iframe’s content and inject your custom CSS. This way, you directly style the form elements once they are available.
Inline Styles via JavaScript: Use JavaScript to directly add inline styles to specific elements within the iframe. For instance, you can select specific form fields or buttons and apply your custom styling directly.
Leverage CSS Variables: If HubSpot allows, use CSS variables within their form editor to control styles. This could include defining colors, font sizes, and spacing directly in HubSpot’s interface. This method keeps your styling within HubSpot’s ecosystem and bypasses the limitations of the iframe.
Embed the Form as HTML Instead: If HubSpot provides a way to embed the form in HTML (without the iframe), you’ll gain more control over styling. This method allows you to include your custom CSS directly within the same page and style it more freely.
Request Beta Feedback from HubSpot: Since the multi-step form is in beta, you might want to reach out to HubSpot for additional embedding and styling options. Often, beta feedback can prompt developers to expand features or adjust limitations like iframe-only embeddin

Re: Embed new Beta Multi step form

RGobbi — Fri, 13 Dec 2024 11:17:20 GMT

Hi everyone,

We're embedding a multi-step form (beta, we know) into our website as an iframe.
Unfortunately the customization via javascript is not working since cross-origin problems, and the css-crossing (via js or vanilla css) is getting ignored.
Can anyone help me out?

Best regards,
Rachele

Re: Embed new Beta Multi step form

karstenkoehler — Mon, 28 Jul 2025 04:03:51 GMT

Hi @camillanyberg,

It should now be possible in all portals to generate the raw HTML embed code – the UI is slightly different then before and HubSpot has hidden this feature a bit.

After publishing your form (orange 'Review and update' button in the top right corner), you should see this. Follow the numbers to get the embed code:

Best regards!