Getting started

Three steps, about five minutes.

1. Make your form public

Your Google Form must accept answers without sign-in. See finding your form for the setting and for where to copy the form's URL.

2. Get your field ids

Every question has an id like entry.111. List them all:

terminal
npx @ez-gform/cli "https://docs.google.com/forms/d/e/1FAIpQLS.../viewform"

Or paste the URL into the playground.

3. Build the form

terminal
pnpm add @ez-gform/react
ContactForm.tsx
import { useGoogleForm } from "@ez-gform/react";

function ContactForm() {
  const { register, submit, status, isSubmitting } = useGoogleForm({
    formId: "https://docs.google.com/forms/d/e/1FAIpQLS.../viewform",
  });

  return (
    <form onSubmit={submit}>
      <input aria-label="Your name" {...register("entry.111")} />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Sending…" : "Send"}
      </button>
      {status === "sent" && <p>Thanks!</p>}
    </form>
  );
}

Swap in your form's URL and entry ids, and you're done. status becomes "sent" once the request goes out. Browsers can't read Google's reply, so there is no confirmed "ok".

Not using React?

A plain HTML form works with no JavaScript at all. Use each question's entry id as the input name:

form.html
<form action="https://docs.google.com/forms/d/e/1FAIpQLS.../formResponse" method="POST">
  <label>Your name
    <input type="text" name="entry.111">
  </label>
  <button type="submit">Submit</button>
</form>

Generate the whole thing with npx @ez-gform/cli <form-url> --format html, or from the playground's "html" tab.

Next steps