From 0c6e3f51219a9dfd5bcf08ac78683a58ba859d04 Mon Sep 17 00:00:00 2001 From: Jamie Wilson Date: Mon, 2 Oct 2017 15:49:20 -0500 Subject: [PATCH] revising polyfills --- README.md | 36 ++++++++++++++++++++++++++++-------- demo/index.html | 5 +++-- index.html | 3 --- 3 files changed, 31 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 7cd6ab3..f0db7eb 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Submit a Form to Google Sheets -#### How to create an HTML form that stores the submitted form data in Google Sheets. Using plain 'ol JavaScript, [Google Apps Script](https://developers.google.com/apps-script/), the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), along with the [Promise Polyfill](https://github.com/taylorhakes/promise-polyfill) and GitHub's [Fetch Polyfill](https://github.com/github/fetch). +#### How to create an HTML form that stores the submitted form data in Google Sheets using plain 'ol JavaScript (ES6), [Google Apps Script](https://developers.google.com/apps-script/), [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData). Demo at https://form-to-google-sheets.surge.sh @@ -105,9 +105,6 @@ Open the file named `index.html`. On line 12 replace ` - - ``` -As you can see, this script uses the the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), a fairly new promise-based mechanism for making web requests. It makes a "POST" request to your script URL and passes our form data as URL paramters. +As you can see, this script uses the the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), a fairly new promise-based mechanism for making web requests. It makes a "POST" request to your script URL and uses [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) to pass in our data as URL paramters. -Because Fetch is new, we'll need to first include a couple of polyfills to make sure it works on older browsers. The first is the [Promise Polyfill](https://github.com/taylorhakes/promise-polyfill) and and the second is [GitHub's fetch polyfill](https://github.com/github/fetch). +Because Fetch and FormData aren't fully supported, you'll likely want to include their respective polyfills. [See section #8](#8-related-polyfills). > **Fun fact!** The ``, ``, and `body` tags are actually among a handful of optional tags, but since the [rules around how the browser parses a page are kinda complicated](https://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags), you'd probably not want to omit them on real websites. @@ -145,6 +142,29 @@ Then create new headers with the exact, case-sensitive `name` values: |---|:---------:|:-----:|:---------:|:--------:|:---:| | 1 | timestamp | email | firstName | lastName | | +## 8. Related Polyfills +Some of this stuff is not yet fully supported by browsers or doesn't work on older ones. Here are some polyfill options to use for better support. + +- [Promise Polyfill](https://github.com/taylorhakes/promise-polyfill) +- [Fetch Polyfill](https://github.com/github/fetch) +- [FormData Polyfill](https://github.com/jimmywarting/FormData) + +Since the FormData polyfill is published as a Node package and not in a way in which browsers can work, a good option for including these is using [Browserify's CDN called wzrd.in](https://wzrd.in/). This service compiles, minifies and serves it for us. + +You'll want to make sure these load before the main script handling the form submission. + +```html + + + + + +``` + # Have feedback/requests/issues? Please [create a new issue](https://github.com/jamiewilson/form-to-google-sheet/issues). PRs are definitely welcome, but please run your ideas by me before putting in a lot of work. Thanks! @@ -158,7 +178,7 @@ Please [create a new issue](https://github.com/jamiewilson/form-to-google-sheet/ #### Documentation - [Google Apps Script](https://developers.google.com/apps-script/) - [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) -- [Promise Polyfill](https://github.com/taylorhakes/promise-polyfill) -- [Fetch Polyfill](https://github.com/github/fetch) +- [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) - [HTML `
` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) - [Document.forms](https://developer.mozilla.org/en-US/docs/Web/API/Document/forms) +- [Sending forms through JavaScript](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript) diff --git a/demo/index.html b/demo/index.html index 99a98df..05caf98 100644 --- a/demo/index.html +++ b/demo/index.html @@ -32,8 +32,9 @@ View the Google Sheet View on GitHub - - + + + - -