Using Google Forms for Quick Website Feedback and Bug Reports

Intro

When building a new website or application (SPA, PWA, etc.), one of the things you think about before launching is a way for users to leave feedback and/or report issues. For large-scale releases and long-term setups, you really should use a professional feedback and bug reporting system; something like Usersnap, or a custom solution built in-house.

However, if you are building a demo, MVP, or personal project, a great temporary, or even long-term solution, can be using Google Forms with Google Sheets.

Google Forms for User Feedback and Bug Reports

The simple overview of how Google Forms works is that:

1. You use the Google Forms builder to visually build out a form to your liking. It is super easy to use; drag-and-drop fields, easily add validation logic, etc.
2. Once you have the form to your liking, you can pick how you want to add it to your site:
   • Have it open in a new tab: Click Send, then the link icon, then copy the URL. Now you can paste that URL into the href of a standard link element, router system, etc.
   • Embed it directly in your site: Click Send, then the embed icon, then copy the iframe embed code. Now you can paste that code into a static HTML file, React component, etc.
3. Once someone submits the form, their response will be saved with the form, and visible to the form creator inside Google Drive.
   • Optionally, you can also connect the form to a Google Sheet file, so each response automatically creates a new row in a spreadsheet
   • You can also set up email alerts, and advanced automations (see below sections)

Simple Integration

As covered above, the most simple approach to integration is either dropping a link to the form in the code of your site/app, or embedding directly via the iframe option. Both work with almost any website or app, including most WYSIWYG builders like Wix or Squarespace.

Advanced Integration

One of the lesser known features of Google Forms, and what makes it an actual suitable solution for small use-cases, is that it supports pre-filling / auto-filling form fields with URL query string parameters. This means that you can do things like:

• Autofill a username field based on logged-in info
• Autofill a where did this happen? field with the current webpage URL
• Map existing form elements on your page to the Google Form and pre-fill the values
• Etc.

I recommend following the tips from these three pages to get started on using URL pre-filling:

• cagrimmett.com/til/2016/07/07/autofill-google-forms.html
• support.google.com/a/users/answer/9308781
• support.google.com/docs/thread/3341555

If you want to see a live example, I use the prefill trick to auto-fill the URL field in my feedback form on cheatsheets.joshuatz.com. For example, go to this page, hit the question mark icon in the upper right, then the Feedback button, and then notice how the form, which opens in a new tab, has the URL field pre-filled with the URL of the page that you were just on! The feedback button and its corresponding URL is actually generated and rendered in React.

Limitations

There are a lot of limitations with Google Forms, which make it unsuitable for many professional and/or large-scale setups. Google Forms was not built for bug reporting or large-scale user feedback collection, so most of these limitations are understandable given the intended user-base. Here is a sampling of some of the major limitations:

• Lack of native hidden fields
  • This is a big limitation, because this is often how user feedback forms collect automated information (such as user-agent string) without cluttering the form for the user or allowing for accidental field editing
• Lack of official integrations
  • There are lots of ways that you can jury-rig connections between Google Forms and other systems, often by using something like Zapier, but these require manual setup and maintenance, and are liable to break if Google changes things
  • In comparison, many other user feedback and bug reporting SaaS platforms have native integrations with other systems like Jira or PagerDuty
• Lack of plug-n-play visual integration
  • The two integration options, a standard web link or iframe embed, do not always visually blend well with an existing site. It might require a bunch of custom coding to incorporate nicely.
  • In comparison, many feedback SaaS products offer copy-and-paste embed codes that seamlessly blend with your site or app, including advanced UI widgets like floating invite buttons and scroll animations

Google Forms Automation

One perk of using Google Forms is that it is integrated nicely into the whole Google Apps Script (GAS) ecosystem. In addition to having its own service layer, if you are piping responses from Forms into Sheets, you could also use the Google Sheet scripting service to build your own integrations or automations.

Google Apps Script is a highly extensible and powerful scripting platform that is tightly integrated with many of Google’s services. Connecting Forms to GAS unlocks an almost endless number of customized possibilities.