Question from Reddit user:
Hi Everyone,
Is there any way we can integrate Hubspot Forms API on our website developed on REACT node.js?Also, please provide details of how and where Hubspot Forms API can be used, kindly provide in-depth details.
And, how do you recommend using Hubspot Forms API when websites are not being developed on Hubspot?
Thanks, waiting for a quick reply.
Answer from Nabil:
The short answer is:
Yes, you absolutely can integrate the HubSpot Forms API with your website built on React and Node.js by having your React form submit data to a secure Node.js backend endpoint, which then acts as a proxy to send the data to the HubSpot Forms API using the Submit data to a form endpoint, thereby keeping your HubSpot authentication tokens secure and out of the client-side React code.
The long answer is:
The recommended and most secure way to integrate a custom React form with the HubSpot Forms API is by utilizing your Node.js server as a middleman, also known as a backend proxy.
Your React component will handle the form’s user interface and state, gathering the user’s input, but when the user clicks submit, the data should be sent to a custom API endpoint on your Node.js server.
For example, your React application would make a POST request to /api/submit-form on your Node.js server, passing the form data in the body.
The Node.js server, using a library like Express, receives this data and then securely constructs a new request to the actual HubSpot Forms API endpoint.
You will need to create a form within your HubSpot account first to get the necessary portalId (your HubSpot ID) and formId (the unique ID for the specific form), which your Node.js server will use in its request.
Crucially, any private app tokens or API keys used to authenticate with HubSpot must be stored securely on your Node.js server, typically in environment variables, and never exposed in the client-side React code.
The major benefit of using the HubSpot Forms API this way is that it allows for complete design freedom on the frontend with React, as you are not limited by HubSpot’s default form styling or embed code, while still leveraging HubSpot’s powerful CRM features.
The submissions appear in your HubSpot form dashboard just as if they came from a native form, allowing you to trigger workflows, create contacts, and manage lead tracking seamlessly.
Furthermore, you gain control over the submission process, enabling you to implement custom validation or connect to other internal services before or after sending data to HubSpot.
A combined solution using the HubSpot API, Node.js API, React APIs, Google Tag Manager, and a container server like Stape or Google Cloud Platform is an excellent and often cheaper way to handle tracking and further integrations.
This architecture enables a robust server-side tracking setup.
When the React form submits to your Node.js API, that Node.js code can be designed to do two things simultaneously: send the form data to the HubSpot Forms API for CRM ingestion, and also send a server-side event to a web analytics platform.
You would use a Server-Side Google Tag Manager (SS-GTM) container hosted on a stable cloud service like Stape or Google Cloud Platform to receive this server-side data from your Node.js backend.
This setup provides superior data quality and resilience compared to traditional client-side tracking, as it’s not affected by ad blockers or browser restrictions.
For example, your Node.js code could send a server-side event with a custom name like custom_form_submission to your SS-GTM endpoint.
SS-GTM can then transform and route this one event to multiple downstream marketing tools, such as Google Analytics 4 via a purchase or generate_lead event, the Meta Conversions API, and other tracking pixels.
This consolidated approach gives you maximum data accuracy for attribution and remarketing while centralizing your tracking logic, thereby offering a highly scalable, flexible, and cost-effective marketing technology stack.
About The Author
