CMS Development

Stephanie-OG
Key Advisor

Can I trigger inserting the form into the DOM?

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

0 Upvotes
3 Replies 3
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Can I trigger inserting the form into the DOM?

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!

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 Upvotes
Stephanie-OG
Key Advisor

Can I trigger inserting the form into the DOM?

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

0 Upvotes
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Can I trigger inserting the form into the DOM?

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 😞

 

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 Upvotes