Hey everyone, I’m trying to figure out how to send data from my own form to HubSpot without using their embed code or third-party tools. My website is built with Webflow, and I’ve got a form that matches the fields in my HubSpot form. I want to keep my site’s look and avoid HubSpot branding.
I’ve tried to copy some code from HubSpot’s embedded form, but it didn’t work. There’s got to be a way to make my form act like HubSpot’s when submitting data, right? I’m looking for a vanilla JavaScript solution.
Has anyone done this before? Any tips or code snippets would be super helpful. Thanks in advance!
In my recent experience working with custom form submissions to HubSpot, I discovered that using the HubSpot Forms API is indeed the best route. You can capture your form data with a simple JavaScript function on submission, format it as a JSON object to match HubSpot’s requirements, and then send it as a POST request. It is important to prevent the default submission, ensure proper error handling, and provide user feedback. This approach also helps maintain your site’s design and avoid unwanted HubSpot branding while ensuring data security and compliance.
you gotta use hubspot api. grab ur portal id and guid, then use fetch in vanilla js to send ur form data as json. bit tricky but works. lmk if u need more info!
I’ve actually implemented this for a client recently. Here’s what worked for us:
First, you’ll need to get your HubSpot portal ID and form GUID. These are crucial for the API calls.
Then, create a JavaScript function to handle the form submission. Use preventDefault() to stop the default form behavior. Collect all the form data into an object.
Next, make a POST request to HubSpot’s Forms API endpoint. The tricky part is constructing the request body - it needs to match HubSpot’s expected format exactly.
Don’t forget to handle responses and errors. We added a loading state and success/error messages to improve UX.
One gotcha: make sure your field names match exactly with HubSpot’s. Even a slight mismatch can cause issues.
It took some trial and error, but once set up, it works seamlessly. Let me know if you need more specific guidance!