HELP: Embed a form in a React component


#1

Hi all,

I’m having trouble embedding a hubspot form into a React component. JSX will consider the script tag as a React component itself and try to compile it as such. Have you guys tried to integrate a hubspot form with react before?

Any help would be appreciated! thanks!

fabrice


#2

Did you ever solve this problem? I’m encountering the same issue now and don’t know how to fix it…


#3

@Alena and @fabrice

I just spun something up really quickly. Here is my code so I hope this helps. You can’t unfortunately use script tags in a render function as noted above. Let me know if this solves your problem or not. The first part calls the HubSpot script from our servers and the second part will then use the contents of said script to place the form in your component. I had to use a later lifecylce stage to get it to work. I was hoping it would have worked with componentDidMount(){} but it seemed to be firing to fast before the WillMount() could full finish loading the script.

export default class Foo extends Component {
componentWillMount(){

const script = document.createElement("script");


    script.src = "https://js.hsforms.net/forms/v2.js";
    script.async = true;

document.body.appendChild(script);


  }
  componentDidUpdate(){
    //you will need to change the below to match your portal ID and your form ID
     hbspt.forms.create({ 
     portalId: '2323210',
     formId: 'd8232cf6-b9ed-4abc-a81e-585801849cea'
   });
  }
  render() {

…Your Render code below


#4

Hi @pmanca !

Thanks for that. I implemented it as per your instructions but unfortunately that still doesn’t work. It throws the error that hbspt doesn’t exist, when this runs as the library is probably not fully loaded yet when I’m calling the forms.create function.

I’ve solved it by hardcoding the first script part where the library is loaded onto my root HTML (in Rails) and then moving the function call into the componentDidMount.

Works for me although it feels dirty… :smiley:


#5

Still not working, I’m hacking it as @Alena did but it is really gross. Can you please provide a solution for this? Thanks


#6

Since we’re dealing with iframes anyway, I created another iframe pointing to a route that only had the hubspot div and script.

/contact

<iframe className="meetings-wrapper" src="/meetings"></iframe>

/meetings

<html>
  <body>
    <div style="max-width: 500px;" class="meetings-iframe-container" data-src="https://app.hubspot.com/meetings/youruser?embed=true"></div>
    <script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"></script>
  </body>
</html>

#7

I am new to react …but How should we use the render function in that case?
Basically what should be inserted in the render method so that it get the information from the componentDidUpdate method?


#8

Hi everyone, I struggled through this issue a bit, but after referencing a couple of different posts online I’ve come to a working solution. Please reference my code example: https://jsfiddle.net/2Lwq9zbg/

Hope this helps. Cheers!