ez-gform

Build your own form UI and submit it straight to a Google Form. No backend. Responses land in your Google Form and its Sheet.

Get startedTry the playground
ContactForm.tsx
import { useGoogleForm } from "@ez-gform/react";

function ContactForm() {
  const { register, submit, status } = 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">Send</button>
      {status === "sent" && <p>Thanks!</p>}
    </form>
  );
}

How it works

1

Get your field ids

Every question in a Google Form has an id like entry.111. Paste your form's URL into the playground or the CLI to list them.

2

Build your form

Any markup, any styling. Wire it up with the useGoogleForm hook, or have codegen write the component for you.

3

Submit

Answers go directly from the browser to Google. Nothing to host, nothing to pay for.

Why not embed the Google Form?

Google's embed is an <iframe> you can't restyle. With ez-gform the form is yours (markup, validation, UX) and Google Forms is just where the answers go.

One thing to know

Browsers aren't allowed to read Google's response, so a submission ends as "sent", not "confirmed". To check your setup, the CLI can make a real submission and show you Google's answer.