Form submits with ajax loaded content

forms

#1

I am building a site where we are using the HubSpot tracking code. The initial load of the site is server-side rendered html, then page loads after that are performed via ajax (javascript), sort of like a single-page app.

My problem is this: when the user submits a form on the first page, the fields are captured correctly and saved in the hubspot dashboard. If a user clicks to a different page, javascript loads the content and updates the DOM. If the user submits a form on the updated DOM, the result is not saved in the hubspot dashboard.

Is there something I can do to allow the ajax-loaded forms to add submissions to the dashboard?


#2

That should work, do you have some code we can look at?
I just tested using the following javascript to dynamically add a form and it worked fine.

$('.form-holder').empty().append($('<script />', {html: "hbspt.forms.create({css: '',portalId: '55555',formId: '123456789-123456789'})"}));

#3

@Tim_Joyce It’s not quite as simple as that. The forms are at various different places in the layout(s) and the ajax content replaces the whole primary content area in the layout. I’m also not doing anything with hubspot to create the inital form. It is rendered on the server. I’m wondering if the tracking code has a method to “update” and find the newly added forms on the page.

The site is here: https://basicagency.com/

You can see the hubspot tracking code just before the closing tag.


#4

That code was actually tested in an angularjs app. Angular doesn’t allow javascript tags in the html views so my work around was to create a new script element then add the code inside the script element. Could the same approach work for you? Minus the hubspot embed code in between the tags?

Could you use the code above to re-embed the tracking code whenever a new view is loaded?


#5

@Tim_Joyce I’m going to give that a try. I was apprehensive to go that route at first, as I didn’t want to have to pull the js every page, but that’s ok. I will try to update with how it goes.

Thank you for your help!