- Make sure your Google Form is set up to save results to spreadsheet
- Follow the instructions from Tabletop.js to make the spreadsheet loadable (short version: publish to web, then make it public with link).
- Copy the example below (you'll need the tabletop script tag, the embedded javascript below it, and an element with an id for displaying the signers)
- Change
publicSpreadsheetUrlin the example above to use the share link for your spreadsheet - Change
nameFieldto be the name of the column you want to display
Last active
May 7, 2018 16:19
-
-
Save jkriss/0c9e0417e9e7160af2516a2b1326289d to your computer and use it in GitHub Desktop.
Simple Google Forms petition
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Petition Test</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js"></script> | |
| <script type="text/javascript"> | |
| function showSigners(opts) { | |
| if (!opts.publicSpreadsheetUrl || !opts.nameField || !opts.rootElementId) { | |
| alert("Couldn't load spreedsheet: must provide publicSpreadsheetUrl, nameField, and rootElementId") | |
| } else { | |
| var root = document.getElementById(opts.rootElementId) | |
| if (!root) { | |
| console.log("Couldn't find root element", opts.rootElementId) | |
| } else { | |
| Tabletop.init({ | |
| key: opts.publicSpreadsheetUrl, | |
| simpleSheet: true, | |
| callback: function(data, tabletop) { | |
| var list = document.createElement('ul') | |
| for (var i=0; i<data.length; i++) { | |
| var el = document.createElement('li') | |
| el.innerText = data[i][opts.nameField] | |
| list.appendChild(el) | |
| } | |
| root.innerHTML = '' | |
| root.appendChild(list) | |
| } | |
| }) | |
| } | |
| } | |
| } | |
| window.addEventListener('DOMContentLoaded', function() { | |
| showSigners({ | |
| publicSpreadsheetUrl: 'https://docs.google.com/spreadsheets/d/1aNb7cy2GkbZ2SgzWyz-nJ8UBh9gTtdL-MtTKJz1wegY/edit?usp=sharing', | |
| nameField: "What's your name?", | |
| rootElementId: 'signers' | |
| }) | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Some site</h1> | |
| <p>Some content</p> | |
| <div id="signers"> | |
| Loading signers... | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment