topic Re: Can't render hubspot form in react module in CMS Development

Can't render hubspot form in react module

Shatak1 — Tue, 15 Jul 2025 15:56:13 GMT

import React, { useState, useEffect } from 'react';

import './modal.scss';

import './hsForm.scss';

function Modal({ userBMI, modal, setopenModal, needLoose, needGain }) {

const [isFormLoading, setIsFormLoading] = useState(true);

useEffect(() => {

const formId = modal?.popup_form?.form_id;

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

script.src = 'https://js.hsforms.net/forms/v2.js';

script.async = true;

script.defer = true;

const handleScriptLoad = () => {

if (window.hbspt) {

window.hbspt.forms.create({

region: "na1",

portalId: portalId,

formId: formId, //if i use form_id dynamic its not working , only form button is rendering no form is showing

formId: 'when i use my form ID hardcoded here its working, form is rendering ',

target: '#hubspotFormContainer',

onFormReady: function($form) {

console.log('HubSpot form has successfully loaded.');

setIsFormLoading(false);

}

});

}

};

script.addEventListener('load', handleScriptLoad);

document.body.appendChild(script);

return () => {

script.removeEventListener('load', handleScriptLoad);

if (script.parentNode) {

script.parentNode.removeChild(script);

}

const formContainer = document.querySelector('#hubspotFormContainer');

if (formContainer) {

formContainer.innerHTML = '';

}

};

}, [formId]);

const closeModal = () => {

setopenModal(false);

};

return (

<h2>{modal.popup_title}</h2>

</div>

<div className='bmi-value'><h4>{userBMI}</h4></div>

</div>

<div className='status-text body-1'><p>Status:</p></div>

{userBMI > 0 && (

<p>

{userBMI < 18.5 ? modal.status[0].status :

userBMI < 25 ? modal.status[1].status :

modal.status[2].status}

</p>

)}

</h4>

</div>

{userBMI > 25 ?

<p>To achieve a BMI of 25: {modal.to_lose} {needLoose}kg</p> :

userBMI < 18.5 ?

<p>To achieve a BMI of 18.5: {modal.to_gain} {needGain}kg</p> :

'Your BMI is in a healthy range.'}

</div>

<p>{modal.description}</p>

</div>

<div

id="hubspotFormContainer"

className='form'

</div>

);

Problem : When i use dynamic form id that i pulled from module data, form is not rendering in my webpage, but if i use hardcoaded form_id in the formID it works. How to solve this issue

Re: Can't render hubspot form in react module

FaramarKolivand — Tue, 15 Jul 2025 19:32:13 GMT

Could it be timing? You're using a dynamic formId, maybe it's undefined or not available yet at the time your script is running.

Re: Can't render hubspot form in react module

Shatak1 — Wed, 16 Jul 2025 07:48:51 GMT

I also used the delay like 3-4s but only dynamic form button is loading in UI. No input feilds. Also I have another qeuestion that can we use custom css in my hubspot form in react module ?

Re: Can't render hubspot form in react module

FaramarKolivand — Wed, 16 Jul 2025 20:14:09 GMT

Does your actual code have two "formId" or did you include the second one to explain the issue here? If you have two instances in your code then the second one will overwrite the first one. Can you give this a try?

useEffect(() => { const portalId = 'your-portal-id'; // Make sure this is valid const formId = modal?.popup_form?.form_id; if (!formId || !portalId) return; // Don't proceed if not ready const createForm = () => { if (window.hbspt) { window.hbspt.forms.create({ region: 'na1', portalId, formId, target: '#hubspotFormContainer', cssClass: 'custom-hs-form', onFormReady: function ($form) { console.log('HubSpot form has successfully loaded.'); setIsFormLoading(false); } }); } }; // If hbspt already loaded if (window.hbspt) { createForm(); } else { const script = document.createElement('script'); script.src='https://js.hsforms.net/forms/v2.js'; script.async = true; script.defer = true; script.onload = createForm; document.body.appendChild(script); } return () => { const formContainer = document.querySelector('#hubspotFormContainer'); if (formContainer) { formContainer.innerHTML = ''; } }; }, [modal?.popup_form?.form_id]);

Regarding your CSS question, if the form is injected with iframe, then you cannot directly style inside an iframe from outside with plain CSS. Use the form settings, or try passing a cssClass to the outer form wrapper if it helps.