I’m integrating a HubSpot form in a React app using hbspt.forms.create.
When I open the first tab and access the page with the form, everything works fine. However, when I open another tab and navigate to a different page (which also contains a HubSpot form), I encounter an issue.
Has anyone experienced this before, and is there any way to fix it?
Hi @Jason-trinh and welcome, we are so glad to have you here!
Thanks for reaching out to the HubSpot Community!
I’m sharing here some resources as it might help:
- HubSpot forms
- Forms reference
- Legacy forms
Now, let’s connect you with some of our Top Experts: Hi @sylvain_tirreau, @Anton and @SteveHTM do you have suggestions to help @Jason-trinh, please?
Have a lovely day and thank you so much!
Bérangère
@Jason-trinh - a couple of questions for clarification.
- This is a ‘legacy’ form - correct?
- Is the form that you wish to render the same on each page of your app?
- Is the form constructed in ‘raw’ mode?
I don’t use React, but I regularly use customized versions of this form script application in a tabbed context on a landing page. So I’m pretty sure that tabbed constructs work just fine if the JS is constructed properly.
This is my go to page for such customized form applications: Legacy forms - HubSpot docs
I wish there was an updated version for the new form setups!
Hope this is helpful.
Steve
Moderator note: While this solution may not address the original poster’s specific situation, it could be helpful for other community members facing similar challenges.
@SteveHTM This is a legacy form, and we’ve already turned off the ‘Set as raw HTML form’ setting for it. Could this be the issue?
All I can say is that many form customization approaches tend to rely on the form NOT being rendered in an iframe i.e. raw. Your mileage may vary.
