Submitting custom HTML form to HubSpot using pure JavaScript without embedding or third-party tools

Other Questions Zapier
1

I’m trying to connect a custom form on my Webflow site with HubSpot. The goal is to avoid using HubSpot’s branded embedded form or tools like Zapier. Here’s what I’ve done so far:

  1. Created a custom form that matches my site’s design
  2. Made sure form field names match HubSpot’s field IDs
  3. Attempted to copy parts of the embedded form’s post request (didn’t work)

Is there a way to mimic HubSpot’s form submission process using vanilla JavaScript? I’m looking for a solution that doesn’t require upgrading my HubSpot plan or using their embedded form.

Has anyone successfully sent form data to HubSpot without their official tools? Any tips or code examples would be super helpful. Thanks!

2

hey alex, i used hubspot’s api too. get your portal id and form guid then use fetch() to post the data. watch for cors problems. validate your entries before sending. best of luck!

3

I have faced a similar challenge, and it is possible to use HubSpot’s Forms API with vanilla JavaScript. In my experience, you first need to retrieve both the HubSpot portal ID and the form GUID. Next, attach an event listener to intercept the form submission and call preventDefault so you can handle the data. Gather the form information and then post it to HubSpot using the Fetch API. Keep in mind that CORS issues might require a server-side proxy. It’s important to validate the data thoroughly on the client side before sending it.

4

I’ve actually tackled this exact problem recently for a client. Here’s what worked for us:

We used the HubSpot Forms API, but instead of sending the data directly from the client-side, we set up a small serverless function (AWS Lambda in our case) to act as a proxy.

This approach solved the CORS issues and gave us more control over the data before sending it to HubSpot. We could sanitize inputs, add custom fields, and even implement rate limiting.

The client-side code remained simple - just a standard form submission to our API endpoint. The serverless function then handled the communication with HubSpot.

It took a bit more setup initially, but it’s been running smoothly for months now. Plus, it keeps the HubSpot integration completely invisible to the end-user.

Hope this helps! Let me know if you want more details on the implementation.