HubSpot Forms in React: Submit a Form Using HubSpot API

If you're wondering how to submit a HubSpot form from a React website using the HubSpot API, you've come to the right place!

Avoid sketchy third-party packages, and HubSpot's messy copy-and-paste form solution (which doesn't play nice with React) by following the method below.

The Code

Before I go into too much detail I'll save you some time and just show you the code:

// lib/hubspot.js
import axios from 'axios';

export const submit_hubspot_form = async (email, firstname, lastname, message) => {
  const portalId = '<hubspot portal ID goes here>';
  const formGuid = '<hubspot form GUID goes here>';
  const config = { // important!
    headers: {
      'Content-Type': 'application/json',
    }
  }

  const response = await axios.post(`https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formGuid}`,
    {
      portalId,
      formGuid,
      fields: [
        {
          name: 'firstname',
          value: firstname,
        },
        {
          name: 'lastname',
          value: lastname,
        },
        {
          name: 'email',
          value: email,
        },
        {
          name: 'message',
          value: message,
        },
      ],
    },
    config
  );
  return response;
}

So what we're doing is submitting our form's data to the form submit endpoint from HubSpot's v3 API with the help of the axios library.

Some Helpful Details

Before you go ahead and copy/paste the code above there are some things you should be aware of, especially if you don't have much experience with HubSpot.

First of all, the fields array of your POST body must match the fields that already exist on the HubSpot form. You will likely run into issues if you're missing any fields, especially if they are marked as "required" by the form. The example above assumes that the fields firstname, lastname, email and message exist on the HubSpot form, but they may not for your form so be sure to check them out.

Second, do not forget to apply the config object to your POST request (as seen in the example). For some reason whenever I don't use that I run into issues getting the request to go through.

Third - if you're wondering where to find your HubSpot portal ID, you will see it on the top right of your portal when you log in to HubSpot. If you're wondering where to find your HubSpot form's formGuid, there's a helpful article on that here.

Finally, if you're concerned about revealing your HubSpot portal ID and form GUID, then it would be best to conceal them by making them environment variables and creating a custom API route to POST from. For example, you could make the submit_hubspot_form() function live inside of your pages/api folder if deploying through Vercel. If you work for a large company or have a massive audience then I would do this right away, but if you're just getting started there isn't much of a risk that someone is going to take the time to try and programmatically spam your email list signup. Either way, I prefer having my tutorials be backend-agnostic when possible, so make whatever decision you want there.

Full example

If you're looking for a complete (albeit simple) example of a HubSpot form submission setup using the above method, I'll include one now to finish up the post:

// components/Form.js
import React, { useState } from 'react';
import axios from 'axios';

export const Form = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault(); // prevent form submit default behavior
    if(!name || !email) return; // if an input field is empty, don't submit the form
    const hubspot_response = await submit_hubspot_form(email, name);
    console.log(hubspot_response); // make sure it succeeded!
  }

  const submit_hubspot_form = async (email, firstname) => {
    const portalId = '8765432'; // example portal ID (not real)
    const formGuid = '7654abcd-123a-231b-555c-12345678abc'; // example form GUID (not real)
    const config = { // important!
      headers: {
        'Content-Type': 'application/json',
      },
    }

    const response = await axios.post(`https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formGuid}`,
      {
        portalId,
        formGuid,
        fields: [
          {
            name: 'firstname',
            value: firstname,
          },
          {
            name: 'email',
            value: email,
          }
        ],
      },
      config
    );
    return response;
    }
  }

  return (
    <div style={{ padding: '16px' }}>
    <h1>HubSpot Test Form</h1>
      <form onSubmit={handleSubmit}>
        <input
          name='firstname'
          type='text'
          value={name}
          onChange={e => setName(e.target.value)}
        />
        <input
          name='email'
          type='email'
          value={email}
          onChange={e => setEmail(e.target.value)}
        />
        <input type="submit" value="Submit" />
      </form>
    </div>
  )
}

That's it! I hope this post was useful in showing you how to submit a HubSpot form from a React website using the HubSpot Forms API.

If you found this post useful, consider subscribing below to be notified of future ones! We pinky promise we'll never spam you 🤙 .