asked on

Execute jQuery after Function

Hello,

I am embedding a form from HubSpot with this code:

<script>
  hbspt.forms.create({ 
    css: '',
    portalId: 'XXXXXXX',
    formId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
  });
</script>

Open in new window

On page load, this injects a DIV with a form in it. This DIV has an identifying class "hbspt-form" (which I cannot control the name of, or adding ID's, etc.) To style it, I am trying to execute this line of code after the above code:

jQuery('[name="firstname"]').addClass( "wpcf7-form-control wpcf7-text" );

Open in new window

Which doesn't work because its executing BEFORE the hbspt.forms.create function (as far as I can tell.) If I run the jQuery line in the console, after all has loaded, the line works perfectly. Can you help me create the code necessary to append those two classes at the correct time?

Thanks!

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Elizabeth Shaules

ASKER

That API documentation was able to point me to "onReady" which let me figure out the rest of the solution:

hbspt.forms.create({ 
    css: '',
    portalId: 'xxxxxxxx',
    formId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    onFormReady: function($form) {

         document.getElementById('firstname-xxxxxxxxxxxxxxxxxxxxxxxxxxx').className += ' wpcf7-form-control wpcf7-text';

        } 
  });

Open in new window

The annoying part is that you can't wrap it in jQuery - it breaks the HubSpot code so it injects after the closing HTML tag, lol.

Elizabeth Shaules

ASKER

Thanks!

Julian Hansen

You are welcome.