Refresh/attach page forms on pages loaded by AJAX

SOLVE
Highlighted
Occasional Contributor

Hi,

 

I'm currently integrating hubspot forms on a website that uses barbajs which is a common plugin to fetch the new pages with AJAX and replaces the content inside a wrapper, thus not needing to re-fetch header and footer on each page load.

Although this breaks the scripts from finding the new page forms.

The forms are loaded this way inline in the html.

 

<div class="textwidget">
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: 000000,
formId: "xxx",
shortcode: "wp",

});
</script>
</div>

I have been checking the docs and inspecting the window.hbspt object but I haven't found any ways to make forms re-attach to the new html content. I have already found solutons for many other embedded services like youtube, vimeo with their api's. But nothing yet for HubSpot.

 

Does anyone have any suggestions or ideas of what I could do?

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Occasional Contributor
/**
* Evaluate HubSpot elements containing hbspt.forms.create
* @param {Element} el
*/
function dynLoadHubSpotForms (el) {
if (el) {
const widgetScript = el.querySelector('script:nth-of-type(2)') // the second script element contains the init method
if (!widgetScript) return
const widgetContent = widgetScript.textContent
// eslint-disable-next-line no-eval
eval(widgetContent)
}
}

Array.from(document.querySelectorAll('.hubspot-form-el')).forEach(el => dynLoadHubSpotForms(el))

Hi @Derek_Gervais 

This code is basically what I came up with. It works but I only use it from trusted server content, eval should never be used on any page element that can serve user generated content.

 

I think it would be great to have a refresh or re-eval function for hubspot js library, it would allow it to be used better together with frameworks that serve dynamic pages/SPA's with frameworks such as React or VueJS.

4 Replies 4
Community Manager

Hey @Carl_ ,

 

I'm not very familiar with Barba.js or the problem you're describing, but after doing a bit or digging I was able to find some resources that sound related to what you're working through:

It seems like you'll need to take advantage of some lifecycle events that Barba.js provides to load the forms whenever a transition is completed. I hope these are helpful! 

Reply
0 Upvotes
Occasional Contributor

Hi @Derek_Gervais thanks for your reply!

 

I've looked at those issue threads at github as well. The eval thing is a possible solution although a very inefficient and very dangerous solution because I would evaulate raw HTML from the server response. What I was looking for more if the hubspot js api had some method like ".update()", ".refresh()" or anything similar for it to find any new form elements on the page. Although I guess I need to find some way to use eval in a "secure" way for this. When/if I come up with a solution I'll post it here for anyone else that might have the same problem in the future

Community Manager

Hey @Carl_ ,

 

I totally understand; at this time, there isn't a refresh functionality like you're describing. I look forward to seeing any solution you might find!

 

Additionally, I'd encourage you to post your idea to the HubSpot Ideas Forum. While I'm happy to pass this feedback along internally, the Ideas Forum is where the product team aggregates and monitors feedback on existing/new features like this.

Reply
0 Upvotes
Occasional Contributor
/**
* Evaluate HubSpot elements containing hbspt.forms.create
* @param {Element} el
*/
function dynLoadHubSpotForms (el) {
if (el) {
const widgetScript = el.querySelector('script:nth-of-type(2)') // the second script element contains the init method
if (!widgetScript) return
const widgetContent = widgetScript.textContent
// eslint-disable-next-line no-eval
eval(widgetContent)
}
}

Array.from(document.querySelectorAll('.hubspot-form-el')).forEach(el => dynLoadHubSpotForms(el))

Hi @Derek_Gervais 

This code is basically what I came up with. It works but I only use it from trusted server content, eval should never be used on any page element that can serve user generated content.

 

I think it would be great to have a refresh or re-eval function for hubspot js library, it would allow it to be used better together with frameworks that serve dynamic pages/SPA's with frameworks such as React or VueJS.