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.
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".
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 😞