adding demo

dorndickence · Oct 1, 2017 · 87b1ea2 · 87b1ea2
1 parent 7c4c428
commit 87b1ea2
Show file tree

Hide file tree

Showing 4 changed files with 201 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
 # 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, [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). 
+
+Demo at https://form-to-google-sheets.surge.sh
 
 ## 1. Create a new Google Sheet
 

diff --git a/demo/CNAME b/demo/CNAME
@@ -0,0 +1 @@
+https://form-to-google-sheets.surge.sh
diff --git a/demo/favicon.png b/demo/favicon.png
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Form To Google Sheets Demo</title>
+  <meta name="description" content="Store HTML form submissions in Google Sheets">
+  <link href="./favicon.png" rel="shortcut icon">
+  <script src="https://unpkg.com/[email protected]/prefixfree.min.js"></script>
+</head>
+<body>
+
+  <div class="form-container">
+    <form name="submit-to-google-sheet">
+      <input name="email" type="email" placeholder="Email" required>
+      <input name="firstName" type="text" placeholder="First Name">
+      <input name="lastName" type="text" placeholder="Last Name">
+      <button type="submit">Subscribe</button>
+    </form>
+
+    <div class="loading js-loading is-hidden">
+      <div class="loading-spinner">
+        <svg><circle cx="25" cy="25" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/></svg>
+      </div>
+    </div>
+
+    <p class="js-success-message is-hidden">Success!</p>
+    <p class="js-error-message is-hidden">Error!</p>
+  </div>
+
+  <a href="https://docs.google.com/spreadsheets/d/16vDPkBwtMNNMzgbmKfxfOEqGZhtfJha097ZKB23dZdc/edit?usp=sharing" target="_blank">View the Google Sheet</a>
+  <a href="https://github.com/jamiewilson/form-to-google-sheets" target="_blank">View on GitHub</a>
+
+  <script src="https://unpkg.com/promise-polyfill/promise.min.js"></script>
+  <script src="https://unpkg.com/whatwg-fetch/fetch.js"></script>
+
+  <script>
+    const scriptURL = 'https://script.google.com/a/stylesheets.co/macros/s/AKfycbzl3hk6JfWqMkVz8S1p5Txky_fscyNWJUCuQQHGHfVP5YLH99A/exec'
+    const form = document.forms['submit-to-google-sheet']
+    const loading = document.querySelector('.js-loading')
+    const successMessage = document.querySelector('.js-success-message')
+    const errorMessage = document.querySelector('.js-error-message')
+
+    form.addEventListener('submit', e => {
+      e.preventDefault()
+      showLoadingIndicator()
+      fetch(scriptURL, { method: 'POST', body: new FormData(form)})
+        .then(response => showSuccessMessage(response))
+        .catch(error => showErrorMessage(error))
+    })
+
+    function showLoadingIndicator () {
+      form.classList.add('is-hidden')
+      loading.classList.remove('is-hidden')
+    }
+
+    function showSuccessMessage (response) {
+      console.log('Success!', response)
+      setTimeout(() => {
+        successMessage.classList.remove('is-hidden')
+        loading.classList.add('is-hidden')
+      }, 500)
+    }
+
+    function showErrorMessage (error) {
+      console.error('Error!', error.message)
+      setTimeout(() => {
+        errorMessage.classList.remove('is-hidden')
+        loading.classList.add('is-hidden')
+      }, 500)
+    }
+  </script>
+
+  <style>
+    :root {
+      --accent: #F18260;
+      --purple: #252431;
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      background: #eee;
+      color: var(--purple);
+      padding: 10% 5%;
+      font-family: system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      line-height: 1.4;
+    }
+
+    .form-container {
+      position: relative;
+      background: #fff;
+      padding: 2rem;
+      border-radius: 6px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      width: 350px;
+      height: 300px;
+      margin: 0 auto;
+      box-shadow: 0 10px 50px 0 #ccc;
+      margin-bottom: 2rem;
+    }
+
+    input, button {
+      appearance: none;
+      border: none;
+      font-size: inherit;
+      background: #eee;
+      border-radius: 3px;
+      padding: 1rem;
+      width: 100%;
+    }
+
+    input {
+      margin-bottom: 1rem;
+    }
+
+    input:focus {
+      outline: 1px solid var(--accent);
+    }
+
+    button {
+      color: #fff;
+      cursor: pointer;
+      background-color: var(--purple);
+    }
+
+    button:hover {
+      background-color: var(--accent);
+    }
+
+    .is-hidden {
+      display: none !important;
+    }
+
+    a {
+      display: block;
+      width: max-content;
+      margin: 0 auto;
+      color: var(--accent);
+      text-decoration: none;
+      margin-bottom: 0.5rem;
+    }
+
+    @keyframes rotate {
+     100% { transform: rotate(360deg); }
+    }
+
+    @keyframes dash {
+     0% { stroke-dasharray: 1,200; stroke-dashoffset: 0; }
+     50% { stroke-dasharray: 89,200; stroke-dashoffset: -35; }
+     100% { stroke-dasharray: 89,200; stroke-dashoffset: -124; }
+    }
+
+    .loading {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .loading-spinner {
+      width: 50px;
+      height: 50px;
+    }
+
+    .loading-spinner svg {
+      position: relative;
+      animation: rotate 2s linear infinite;
+      height: 50px;
+      width: 50px;
+    }
+
+    .loading-spinner circle {
+      stroke: var(--accent);
+      stroke-dasharray: 1,200;
+      stroke-dashoffset: 0;
+      stroke-linecap: round;
+      animation: dash 1.5s ease-in-out infinite;
+    }
+  </style>
+
+</body>
+</html>