CMS Development

benji_thecroc
投稿者 | Gold Partner
投稿者 | Gold Partner

Form embed not rendering on jQuery .after()

解決

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 いいね!
1件の承認済みベストアンサー
benji_thecroc
解決策
投稿者 | Gold Partner
投稿者 | Gold Partner

Form embed not rendering on jQuery .after()

解決

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

元の投稿で解決策を見る

0 いいね!
1件の返信
benji_thecroc
解決策
投稿者 | Gold Partner
投稿者 | Gold Partner

Form embed not rendering on jQuery .after()

解決

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'
      });
      
    });
  });
0 いいね!