Form embed not rendering on jQuery .after()

benji_thecroc — Thu, 04 Feb 2021 12:39:10 GMT

I'm trying to develop a workaround for a site but I'm not sure if it's viable or not at this point and currently what I have doesn;t seem to be working.

We were hoping to put a form ID's into href attirbutes within a certain string which would then be used to inject the HubSpot form e.g. (<a href="#hs-embed:FORMIDHERE">)

The jquery would find these hrefs and take the relevant form ID and inject the embed code after the link. e.g.

$(window).load(function(){ $('a[href*="#hs-embed"]').each(function() { $(this).after('<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script><script>hbspt.forms.create({portalId: "2650439",formId: "' + formID + '",onFormReady: function($form) {console.log("ready");}});</script>'); }); });

The issue I'm having is the form is currnetly not rendering, even if I just palce the ID as is copied from embed code for testing purposes. The onFormReady is outputting the console.log just no form fields are appearing.

Re: Form embed not rendering on jQuery .after()

benji_thecroc — Thu, 04 Feb 2021 16:10:44 GMT

Solved it like so

$(window).load(function(){ $('a[href*="#hs-embed"]').each(function() { let formRef = $(this).attr('href').split('=')[1]; console.log(formRef); $(this).after('<div class="js-form-container" data-formid="' + formRef + '"><div class="inner-wrap"><h4>Speak to a member of our team</h4></div></div>'); hbspt.forms.create({ portalId: "PORTAL ID HERE", formId: formRef, target: '.js-form-container[data-formid="' + formRef + '"] .inner-wrap' }); }); });

topic Form embed not rendering on jQuery .after() in CMS Development

Form embed not rendering on jQuery .after()

Re: Form embed not rendering on jQuery .after()