Unable to embed Hubspot form embed code into React Component

forms

#1

Has anyone successfully injected and rendered a Hubspot form into a React Component? If so, how?

I’ve tried head, body, and the element id that is the target for the form. Here’s my utility function to inject a script into DOM.

function injectIntoElement(element, tagId, htmlTag, type, src, code) {
let tag = document.createElement(htmlTag);
tag.id = tagId;
tag.type = type;
tag.innerText = code;
tag.src = src;
tag.charset = ‘utf-8’;
console.log(‘document.getElementById’, document.getElementById(‘embedded-hubspot-envoy-free-trial’));
document.getElementById(‘embedded-hubspot-div’).appendChild(tag);
}

and here’s an example of what I try to do in the React Component’s componentDidMount():

componentDidMount() {
let element = ‘body’;
let htmlId = ‘hubspot-envoy-free-trial’;
let htmlTag = ‘script’;
let type = ‘text/javascript’;
let src = ‘js.hsforms.net/forms/v2.js’;
let code = hbspt.forms.create({portalId: '2566672', formId: 'f42b2f78-dc1b-4fbf-bb19-a08be3802e25', target: '#embedded-hubspot-form'});
Utils.injectIntoElement(element, htmlId, htmlTag, type, src, code);
}

Note that you need backtics around the code parameter value. The backticks not rendering here in the forum.