Gatsby

Add form submissions to your Gatsby site using React. Works with Gatsby's static and SSR rendering modes.

Quick start

You can use the react-onsubmit package or submit directly with fetch:

bash

npm install react-onsubmit

tsx

// src/pages/contact.tsx
import { OnSubmitForm } from 'react-onsubmit';

export default function ContactPage() {
  return (
    <OnSubmitForm
      formId="YOUR_FORM_ID"
      successMessage="Thanks! We'll be in touch."
    >
      <input name="name" placeholder="Your name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" />
      <button type="submit">Send</button>
    </OnSubmitForm>
  );
}

Your form ID is available in the onsubmit.dev dashboard after creating a form.

With React state

For more control, use the useOnSubmit hook:

tsx

import { useState } from 'react';
import { useOnSubmit } from 'react-onsubmit';

export default function ContactForm() {
  const { handleSubmit, isLoading, isSuccess, error } = useOnSubmit({
    formId: 'YOUR_FORM_ID',
  });

  if (isSuccess) return <p>Thanks! We'll be in touch.</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" required />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Sending…' : 'Send'}
      </button>
      {error && <p>{error}</p>}
    </form>
  );
}

File uploads

File inputs are handled automatically. When the form contains a file field, the data is sent as multipart/form-data. Otherwise, JSON is used.