A React component to render HubSpot forms.
With npm:
npm install --save react-hubspot-form
Or with Yarn:
yarn add react-hubspot-form
import HubspotForm from 'react-hubspot-form'
...
<HubspotForm
portalId='your_portal_id'
formId='your_form_id'
onSubmit={() => console.log('Submit!')}
onReady={(form) => console.log('Form ready!')}
loading={<div>Loading...</div>}
/>
The underlying Hubspot script depends on jQuery for the onSubmit
callback to work. If you don't want to add jQuery to your site you have two options.
To work around this you can listen to hubspot global form events
useEffect(() => {
const handler = event => {
if (
event.data.type === "hsFormCallback" &&
event.data.eventName === "onFormSubmit"
) {
// handler stuff
}
};
window.addEventListener("message", handler);
return () => {
window.removeEventListener("message", handler);
};
}, []);
Polyfil jQuery, guide here
You can also set any additional options that HubSpot provides as properties in the component.