Get Contact Form Submissions on Google Forms with Email Notifications

Here's how to receive contact form submissions on your website using Google Forms as a backend.

Alternatively, you can setup Telegram Notifications instead.

Create a Google Form

  1. Create a new Google Form using forms.new

  2. Add questions to the form. Make sure to include all the fields you need for your contact form.

  3. Publish the form to enable responses.

  4. Enable email notifications for the form in Responses tab → Click ⋮ menu → Select Get email notifications for new responses.

  5. (Optional) Link the form to a Google Sheet to store and access the responses easily.

Obtain Required IDs

  1. Copy the Responders Link, which is in the format and contains the form's ID after the /d/e/ part.

    https://docs.google.com/forms/d/e/1FAIxxxx-xxxxQWWow/viewform

    Copy the form ID that follows /d/e/ and add it to .env.

    process.env.GOOGLE_FORM_ID = '<your-form-id-here>'

  2. Open the Responders Link in a new tab and access the Developer Tools on your browser using Ctrl/Cmd + Shift + I or F12.

  3. Press Ctrl/Cmd + F to open find and search for entry., which will display the field IDs for all the form fields.

  4. Copy the field IDs for all the form fields.

Create Contact Form

  1. Create a contact form with all the necessary fields.

  2. In the name attribute of each field, match and assign the field ID from the Google Form.

    <input name="entry.xxxx" id="name" />
<!---->
<input name="entry.yyyy" id="email" />
<!---->
<input name="entry.zzzz" id="message" />

  3. In the onSubmit handler, Append the submit form field with the value Submit to the formData.

    const formData = new FormData(e.target);
formData.append("submit", "Submit"); //required to submit response to google form

  4. Send the form data as JSON to the API route handler (which we will create next).

    const object = Object.fromEntries(formData);
 
const jsonData = JSON.stringify(object);
 
fetch(`/api/forms-integration`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: jsonData,
});

  5. Here's the complete code for the contact form.

export default function ContactForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
 
    const formData = new FormData(e.target);
 
    formData.append("submit", "Submit"); //required to submit response to google form
 
    const object = Object.fromEntries(formData);
 
    const jsonData = JSON.stringify(object);
 
    fetch(`/api/forms-integration`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: jsonData,
    })
      .then((data) => {
        console.log(data);
 
        // handle response
      })
      .catch((error) => {
        console.log(error);
 
        // handle error
      });
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name</label>
        <input
          type="text"
          maxLength={100}
          id="name"
          name="entry.xxxx"
          placeholder="Your Name"
          required
        />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input
          type="email"
          maxLength={200}
          id="email"
          name="entry.yyyy"
          placeholder="email@example.com"
          required
        />
      </div>
 
      <div>
        <label htmlFor="message">Message</label>
        <textarea
          maxLength={1000}
          id="message"
          rows="5"
          name="entry.zzzz"
          placeholder="Write your message here"
          required
        />
      </div>
 
      <div>
        <button type="submit">Send</button>
      </div>
    </form>
  );
}

Create an API Route Handler

  1. Create a new route handler like /api/forms-integration/route.js

  2. Add a POST request handler and send a GET request to the formResponse method with the form ID and the inputs as query parameters.

    export async function POST(request) {
  try {
    const data = await request.json();
    const params = new URLSearchParams(data).toString();
 
    await fetch(
      `https://docs.google.com/forms/d/e/${process.env.GOOGLE_FORM_ID}/formResponse?${params}`,
      {
        method: "GET",
        mode: "no-cors",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }
    );
 
    return new Response(JSON.stringify({ success: "true" }), {
      status: 200,
    });
  } catch (error) {
    console.log(error);
    return new Response(JSON.stringify(error), { status: 500 });
  }
}

    As the link we're using is not an official API, it doesn't return a response that we can use to know if the request was successful.

Submit the Contact Form

Apart from contact forms, you can also use this method to perform any other action you want.

  1. Submit the contact form and you will instantly receive the response on the Responses tab on the Google Form.

With this setup, you can access the form responses on all your devices seamlessly.

Similarly, you can also setup Telegram Notifications for contact form submissions.

On this page