Form embed not rendering on jQuery .after()

SOLVE
benji_thecroc
Contributor | Gold Partner

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.

0 Upvotes
1 Accepted solution

Accepted Solutions
benji_thecroc
Solution
Contributor | Gold Partner

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

View solution in original post

0 Upvotes
1 Reply 1
benji_thecroc
Solution
Contributor | Gold Partner

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

View solution in original post

0 Upvotes