embedding a google form directly into the html of a website

Question

I'm looking for a way to take specific fields from a Google Form and input it into an html page.

  <form>
      <input id="email" type="text" placeholder="email address" value="email">
      <button id="submit" type="submit">Submit</button>
  </form>

When I click submit, I want that data to submit to a specific Google form.

Thanks

Answer 1

If you want to build your own form, hosted separately from Google, and submit to a Google Form, you need to emulate the Google Form's POST request. First, you need to get the form data that's being sent to Google and then you need to submit it from your own page using AJAX.

To get the form data, open Chrome's Developer tools and click the Network tab. Then submit your Google-hosted form with dummy data. Click on the first item you see in the list - it should say "formResponse". Then you need to copy two things from the data on the right-hand pane: "Request URL" (where your own form will submit) and anything beginning with "entry." in the Form Data section (e.g., "entry.123456").

Next, build a form on your own page, and use AJAX to submit the data to Google. The way I've done it is to use jQuery to hijack the form submission so that your form doesn't try to submit to your own domain:

$('.my-form').on('submit', function() {
  e.preventDefault(); 
  $.ajax(
    type:"POST"
    url: "https://docs.google.com/forms/d/your-form-id/formResponse"
    data: {
      'entry.12345': $('.your-form-input').val()
    }
  );
}