Automating form submission to Google Sheets via bookmarklet

Other Questions Google docs
1

I’m working on a bookmarklet that grabs info from a webpage and sends it to a Google Sheets spreadsheet using a form I made. Here’s the main part of my code:

let formElement = document.createElement('form');
formElement.action = 'https://sheets.google.com/formResponse?key=abc123';
formElement.method = 'POST';
formElement.id = 'data-form';
formElement.innerHTML = `
  <input name='entry.1' value='${date}'>
  <input name='entry.2' value='${userEmail}'>
  <input name='entry.3' value='${userId}'>
`;
formElement.submit();

The problem is nothing’s getting saved to the form when I use the bookmarklet. Is there a way to see what Google sends back in my code? I added jQuery to the bookmarklet if that helps.

I also tried looking at the Network tab in dev tools but it’s not picking up any activity from the bookmarklet. Maybe I should try using the ‘viewform’ method instead of ‘formresponse’?

Any tips on how to fill out and submit the form using JavaScript in my bookmarklet would be great. Thanks!

2

hey, have u tried using fetch instead of jquery? it’s built-in and might work better. something like:

fetch(‘https://docs.google.com/forms/d/e/your-form-id/formResponse’, {
method: ‘POST’,
body: new FormData(formElement)
})
.then(response => console.log(‘sent!’))
.catch(error => console.error(‘oops’, error));

this way u can see if there’s any errors too. good luck!

3

I’ve dealt with similar issues when automating form submissions to Google Sheets. One thing that helped me was using AJAX instead of a standard form submission. Here’s a snippet that worked for me:

$.ajax({
  url: 'https://docs.google.com/forms/d/e/your-form-id/formResponse',
  data: {
    'entry.1': date,
    'entry.2': userEmail,
    'entry.3': userId
  },
  type: 'POST',
  dataType: 'xml',
  statusCode: {
    0: function() {
      // Success message
    },
    200: function() {
      // Success message
    }
  }
});

This approach lets you handle responses and errors more easily. Also, make sure your form’s sharing settings allow anyone to submit responses. If you’re still having trouble, try using the ‘viewform’ URL instead of ‘formResponse’ to debug - it should show you the form with your data pre-filled.

4

I’ve encountered similar challenges when working with Google Forms and bookmarklets. One method that proved reliable for me is using the Fetch API with async/await, as it offers improved error handling and the ability to inspect responses effectively. In my implementation, I construct a FormData object by appending your required entries and then post it using fetch with the ‘no-cors’ mode. This usually bypasses CORS-related issues while still triggering the form submission. Replace ‘your-form-id’ with the actual ID of your form and verify that external submissions are enabled in your Google Form settings.