Can I trigger inserting the form into the DOM?

[#1]

Background: I'm creating a blog for a client. The blog post has the option to enable a lead capture form below (using a Form tag) and it also automatically loads the next post when you reach the bottom of the page (using an Infinite Scroll plugin).

Problem: because I assume there's no DOM load for the second page (it just pulls in a container and adds it on to the existing document), the forms on the second post onward do not load. 

Question: is there a way to trigger loading the forms? Some sort of event listener that I can use to call for the forms to be loaded on the second post onward? Or perhaps someone has an alternative solution. 

Thank you!  

---

Stephanie O'Gay Garcia

HubSpot CMS Design & Development

Website | Contact

[#2]

Hey @Stephanie-OG 

I'm extremely interesed in what you're trying to do here! Could you provided the code you're working on? I'd love to troubleshoot this with you!

Looking forward to it!

[#3]

Hey, thanks for the reply!

I'm not sure how much my existing code will help, I'm using this infinite scroll plugin and I've got the following for the post template:

<div class="blog-section">
    <div class="blog-post-wrapper cell-wrapper blog-post-item">

      <!-- All my post HTML/HubL here -->

      {# Pagination #}
         {% if content.previous_post_slug %}
           <a class="previous-post-link" href="{{ group.absolute_url|replace('/blog', '') }}/{{ content.previous_post_slug }}"></a>
         {% endif %}                  
      {# End Pagination #} 

    </div>
</div>

Then for the plugin I have: 

var isPostPage = document.body.classList.contains('hs-blog-post');

if (isPostPage) {
  /* INFINITE SCROLL for Blog Posts */
  var postsInfScroll = new InfiniteScroll( posts, {
    path: '.previous-post-link',
    append: '.blog-post-item',
  });      
}

It works just fine but, because it doesn't actually seem to load the new page (just appends ".blog-post-item"), my forms won't load.

I'm hoping for something like "when postInfiniteScroll is triggered, trigger form load".

---

Stephanie O'Gay Garcia

HubSpot CMS Design & Development

Website | Contact

[#4]

Awesome!

So I'm not too familair with the form tag, but could you do something like this(see below):

{# Pagination #}
         {% if content.previous_post_slug %}
           <a class="previous-post-link" href="{{ group.absolute_url|replace('/blog', '') }}/{{ content.previous_post_slug }}"></a>

           {# form tag #}
             {% form "form" %}
             {% form "my_form" form_to_use='08bd9f0d-3be9-41c2-93b6-231a3a71b143', title='Free Trial' %}
           {# end form tag #}

         {% endif %}                  
      {# End Pagination #} 

You'll have to pardon my ignorance of the form tag, I have yet to use it