JavaScript lifecycle in a landing page


#1

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?


#3

Welcome, @WTWJamie!

Could you add your script to an onFormReady event in the form's embed code? The form would be loaded at that point.


#4

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?


#5

Hey, @WTWJamie.

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.

Let me know if I'm still misunderstanding you!


#6

That's perfect, all working now. Thanks a ton :smiley:


#7

Glad I could help, Jamie-Lee!