Gatsby

Gatsby renders React on the client, so the @formstork/react hook drops straight into any page or component. No API routes or serverless functions needed.

Add the form component

npm install @formstork/react

// src/components/contact-form.tsx
import { useFormstork } from "@formstork/react";

export function ContactForm() {
  const { submit, isSubmitting, isSuccess, message } = useFormstork({
    accessKey: "YOUR_ACCESS_KEY",
  });

  if (isSuccess) return <p>Thanks, {message}</p>;

  return (
    <form onSubmit={submit}>
      <input type="text" name="name" required />
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button disabled={isSubmitting}>
        {isSubmitting ? "Sending..." : "Send"}
      </button>
    </form>
  );
}

Drop <ContactForm /> into any page in src/pages, for example src/pages/contact.tsx.

Step by step

1. Install the hook: npm install @formstork/react.
2. Create your free access key in the Formstork dashboard at https://app.formstork.com and replace YOUR_ACCESS_KEY with it.
3. Add the component above under src/components.
4. Render <ContactForm /> inside a Gatsby page in src/pages.
5. Run gatsby develop and submit a test message.
6. Check your Formstork inbox for the entry.

The hook gathers the form fields, posts them to https://api.formstork.com/submit with your hidden access_key, and flips isSuccess once the submission lands. The access key is safe to expose in client code, so no extra config is required. The free plan covers 250 submissions a month.