Embed new Beta Multi step form

[camillanyberg]

Hi

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. 

<p>
<script src="[script url]" defer="defer"></script>
</p>
<div class="hs-form-frame" data-region="eu1" data-form-id="[formId]" data-portal-id="[portalId]">&nbsp;</div>

[ARez]

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

1. 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.

2. 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.

3. 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.

4. 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.

5. 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

[camillanyberg]

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.

[karstenkoehler · Accepted solution]

@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.

[RGobbi]

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

[ARez]

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.

[camillanyberg]

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.