Collect feedback or form submissions without any backend — using your Google Form as a hidden data collector.

Backendless Feedback Page

Collect Feedback Without a Backend – 100% Client-Side!
Version 1.0.0 • Developed by Amit Das

🧩 Overview

This project shows how to connect your website’s HTML form directly to a Google Form without needing a backend server.
Your custom HTML form silently submits user data to Google’s form endpoint, and responses appear in your linked Google Sheet.

🪜 Step 1 — Create a Google Form

Go to Google Forms and create your form.
Add a few questions — for example:
- “Why did you uninstall?”
- “Your email”
Once your form is ready, click the Send button (top right) → copy the link.
Important ⚙️: Under Settings → Responses, make sure the option
“Collect email addresses” is turned off — otherwise, your custom HTML form submissions will be rejected.

Your form link will look like this:


https://docs.google.com/forms/d/e/1FAIpQLSeCFkX_89yycL3oBaMmeDa8cZgBoWWMmKOa1ZqLJA9NG3vexg/viewform

Here, your Form ID is:


1FAIpQLSeCFkX_89yycL3oBaMmeDa8cZgBoWWMmKOa1ZqLJA9NG3vexg

🧩 Step 2 — Build the Form Endpoint

Once you have the Form ID, your submission URL should be:


https://docs.google.com/forms/d/e/1FAIpQLSeCFkX_89yycL3oBaMmeDa8cZgBoWWMmKOa1ZqLJA9NG3vexg/formResponse

Note the difference:

/viewform → is for filling the Google Form UI

/formResponse → is the endpoint you’ll use in your own website form

💻 Example HTML Code

Here’s an example of how to use that Form ID inside your custom HTML form:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Feedback Form Example</title>
  <style>
    .hidden { display: none; }
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 24px; }
    textarea, input[type="email"] { width: 100%; max-width: 600px; padding: 10px; margin: 6px 0 14px; }
    input[type="submit"] { padding: 10px 16px; cursor: pointer; }
  </style>
</head>
<body>
  <h2>We value your feedback 💬</h2>

  <div id="content">
    <!-- After submit message (hidden initially) -->
    <p id="after-submit" class="hidden">
      ✅ Thank you! Your feedback has been submitted.
    </p>

    <!-- Form container (shown initially) -->
    <div id="form-ctn">
      <form
        name="feedback-form"
        id="feedback-form"
        action="https://docs.google.com/forms/d/e/1FAIpQLSeCFkX_89yycL3oBaMmeDa8cZgBoWWMmKOa1ZqLJA9NG3vexg/formResponse?"
        method="POST"
        target="hidden_iframe"
      >
        <label for="entry.453182606">Why did you uninstall?</label><br />
        <textarea id="entry.453182606" name="entry.453182606" placeholder="Your answer..." required></textarea><br />

        <label for="entry.235840986">Your Email</label><br />
        <input type="email" id="entry.235840986" name="entry.235840986" placeholder="you@example.com" /><br />

        <!-- Hidden field for browser info -->
        <input type="hidden" name="entry.750067174" id="entry.750067174" />

        <input type="submit" value="Submit" />
      </form>

      <!-- Keep navigation inside the page by posting to a hidden iframe -->
      <iframe name="hidden_iframe" class="hidden"></iframe>
    </div>
  </div>

  <script>
    (function () {
      const form = document.getElementById('feedback-form');
      const uaField = document.getElementById('entry.750067174');
      const formCtn = document.getElementById('form-ctn');
      const afterSubmit = document.getElementById('after-submit');

      // Mirror your existing logic: set UA, then swap views shortly after submit
      form.addEventListener('submit', function () {
        uaField.value = navigator.userAgent;

        // Small delay to allow the POST to fire to the iframe
        setTimeout(function () {
          formCtn.classList.add('hidden');
          afterSubmit.classList.remove('hidden');
        }, 300);
      });
    })();
  </script>
</body>
</html>

🧠 Notes

Replace the entry IDs (entry.1727297528, entry.1112510081, etc.) with your own from the Google Form’s source.
Always use /formResponse instead of /viewform.
You can add hidden fields for browser info, page URL, or timestamp.

🔎 Getting Your Google Form entry IDs

Finding your form’s internal field IDs (like entry.1727297528) is now effortless with our Chrome extension 👇

How It Works

Open any Google Form.
Click the Google Form Entry ID Finder extension icon.
Instantly see all form fields with their corresponding entry IDs.
Click Copy next to any ID to use it in your HTML form.

🧩 This extension makes connecting your custom website forms to Google Forms simple — no backend, no guesswork, 100% client-side.

✅ Example Output

When a user submits the form, the data is instantly stored in your Google Form’s Responses → Spreadsheet tab.
No server, no API key, no database required.

🧾 License

Released under the MIT License — free to use and modify.

👨‍💻 Author


Amit Das

🧠 About Me

Hi there! I'm Amit Das, a passionate developer, designer, and tech innovator from India 🇮🇳.
I love building powerful tools, automation scripts, Chrome extensions, and APIs that simplify digital workflows.
When I’m not coding, you’ll find me experimenting with new technologies, learning design, or sharing knowledge through my projects.

🌐 Portfolio: https://amitdas.site
💬 Always open to collaborations, innovative ideas, and meaningful connections!

☕ Support My Work

If you like my projects and want to show support, you can buy me a coffee here

💬 Collect feedback directly in Google Sheets — no backend, no form embedding, 100% client-side.

AmitDas4321/Collect-Feedback-Without-a-Backend