Contact forms on Netlify: the built-in option and the portable one

Two good options, different shapes

Neither of these is the “right” answer in general. Pick on data custody and portability, not on features — both cover the basics well.

When Netlify Forms is the better choice

You’re staying on Netlify, you want zero JavaScript, and you want submissions in the same dashboard as your deploys. It also handles a plain non-JS form post with a redirect, which is genuinely useful if you care about the no-JavaScript case.

When an external endpoint fits better

The site might move. Agency work gets migrated. When it does, host-native forms are the piece that quietly breaks, and the submission history has to be exported before the account is closed.

The client should own the data. Handing over a Google Sheet in the client’s own Drive is a cleaner boundary than sharing access to your Netlify account, and it doesn’t depend on your billing relationship continuing.

You want it working in local dev. Netlify’s form detection happens at deploy time, so you can’t exercise the real path on localhost without a deploy. A fetch to an endpoint behaves identically everywhere.

You maintain many sites. One integration pattern that’s identical across every project — regardless of host or framework — is worth a lot when you’re maintaining a dozen of them.

Wiring up an external endpoint on Netlify

1. 1

   Create the RG Forms project

   Sign in with Google, define your fields, and copy the endpoint URL.

2. 2

   Store the URL as an environment variable (optional)

   In Site configuration → Environment variables, add e.g. VITE_FORM_ENDPOINT or PUBLIC_FORM_ENDPOINT depending on your framework’s prefix convention. This isn’t about secrecy — the URL ends up in the client bundle regardless — it’s so a rebuild can repoint the form without a code change.

3. 3

   Add the form

   Note there’s no netlify attribute and no data-netlify — you’re deliberately opting out of the build-time detection.

   <form id="contact-form">
     <label>Name <input name="name" required /></label>
     <label>Email <input type="email" name="email" required /></label>
     <label>Message <textarea name="message" required></textarea></label>
   
     <!-- Honeypot: humans never see it, bots fill it in -->
     <input type="text" name="_hp" tabindex="-1" autocomplete="off"
            style="position:absolute;left:-9999px" aria-hidden="true" />
   
     <button type="submit">Send</button>
     <p id="form-status" role="status"></p>
   </form>
   
   <script>
     const ENDPOINT = "https://script.google.com/macros/s/AKfycb.../exec";
     const form = document.getElementById("contact-form");
     const status = document.getElementById("form-status");
   
     form.addEventListener("submit", async (event) => {
       event.preventDefault();
       status.textContent = "Sending…";
   
       const res = await fetch(ENDPOINT, {
         method: "POST",
         // text/plain avoids the CORS preflight Apps Script can't answer
         headers: { "Content-Type": "text/plain" },
         body: JSON.stringify({
           tab: "contact",
           fields: Object.fromEntries(new FormData(form)),
         }),
       });
   
       const data = await res.json();
       status.textContent =
         data.result === "success" ? "Thanks — we'll be in touch." : "Something went wrong.";
       if (data.result === "success") form.reset();
     });
   </script>

4. 4

   Deploy and submit a real message

   Confirm the row lands in your Sheet. If you’d rather test before deploying, hit the endpoint directly.

   curl -L -X POST "https://script.google.com/macros/s/AKfycb.../exec" \
     -H "Content-Type: text/plain" \
     -d '{"tab":"contact","fields":{"name":"Ada","email":"ada@example.com","message":"Hello"}}'
   
   # → {"result":"success"}   and a new row appears in your Google Sheet

Common questions

More answers in the full FAQ.