Making a Google Form which has a table for answer submission

10,624

I understand the OP has probably long moved on from this problem. I however have done something along these lines in the past and thought I'd share my approach with the community.

I'll start with the premise Google forms are just good ol' plain HTML forms that users programmatically generate with their form builder. Therefore it's possible to traverse the as-built form and extract both submit location and all field names:

document.querySelectorAll('form').forEach((x) => {console.log(x.action)})```
document.querySelectorAll('[name^="entry."]').forEach((x) => {console.log(x.name + '=' + x.closest('[role="listitem"]').querySelector('[role="heading"]').innerText)})

The above snippet will give you an idea of what the components are.

All that's left after is to build a front end to your requirements with the framework of your choice (I used AngularJs at the peak of its popularity) and incorporate as much or as little UI and validations into it as you desire.

Here you've got the flexibility to either submit the whole thing as one JSON, or to parse it into individual fields and submit entries one by one, for purposes of this demo I opted for the easiest way but this thing surely's got the potential.

Share:
10,624
MikeyB
Author by

MikeyB

A Process Improvement Engineer with a keen interest in how more widespread programming knowledge can lead to more efficient processes and more effective decision making. I'm trying to learn JavaScript for use with Google Apps, with a view to developing mobile apps as my skills progress.

Updated on June 21, 2022

Comments

  • MikeyB
    MikeyB almost 2 years

    I'd like to replace a parts requisition process at my workplace with a simple (and cheap to implement) electronic process, initiated using a Google Form. The problem is that I would like users to be able to enter multiple parts (along with associated info, e.g. quantities required, booking references etc.), but I want to do so without having to have multiple repeated questions.

    I have researched this extensively and cannot find anything which fits the bill - my thoughts are to use Google Apps Script to create a table in the form which a user can fill-in. The closest I have found is something like this: Creating Form Elements Dynamically

    The original paper form looks like the below - I would like the table to request the information as shown below in a similar format:

    enter image description here

    Thanks in advance!

    EDIT! To make it clear, I'm happy to consider other solutions to run this process through an online interface - I have gone for Google Sheets/Forms in the first instance as they are already well integrated within my company and I have experience of them (setting-up triggers etc is pretty simple)