I'm trying to use a form within a template. I want to style this form using Materialize.css so that it can abide to our company's branding guidelines. This means that when the form loads, I need to execute this JavaScript
M.AutoInit();
to tell Materialize to initialize the form. My problem is that when I include this JavaScript before the closing body tag, it never seems to fire. I'm assuming this is either because
The Materialize dependency hasn't loaded in by this point
The form hasn't rendered by this point (I think the HubSpot forms embed React and render as their own thing?)
What I'm looking for is a hook to either catch my dependency loading, or the form itself loading, and follow it up with my JS call. Is there any such thing?
On making this less of a guessing game, is there also a way to prevent them pre-processing my JavaScript so that I can use Console.Log() for debugging?
Global form events like onFormReady are JavaScript events you can add to a form's embed code without using APIs.
You won't be able to access a form's embed code in either design manager or the page editor if you're using the default Form module. Instead, you'll have to embed the form in either a Custom HTML or Rich Text module and add the desired event.
Global form events like onFormReady are JavaScript events you can add to a form's embed code without using APIs.
You won't be able to access a form's embed code in either design manager or the page editor if you're using the default Form module. Instead, you'll have to embed the form in either a Custom HTML or Rich Text module and add the desired event.
Thanks Isaac, that looks perfect but I'm not creating the form via the API, I'm just referencing it in Design Manager. My end goal is to make a template for my boss that fits our design spec, is there a better tool for me to be making templates in? Or can I access the Form's embed code from within Design Manager?
.png "HubSpot Employee"){kind=icon}
