Form embed not rendering on jQuery .after()

Develop, Build & Integrate CMS Development
, ,
1

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('<!--[if lte IE 8]><script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script><![endif]--><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.

2

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'
 });

 });
 });