Hola! ¡Tenemos nuestra Comunidad en Español!

Can I trigger inserting the form into the DOM?

Regular Advisor

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! Smiley Happy 

 


Stephanie O'Gay Garcia

HubSpot CMS Design & Development

Website | Contact

Reply
0 Upvotes
3 Replies 3
Esteemed Contributor

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!

Reply
0 Upvotes
Regular Advisor

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

Reply
0 Upvotes
Highlighted
Esteemed Contributor

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 Smiley Sad

 

Reply
0 Upvotes