{"action":"created","issue":{"url":"https://api.github.com/repos/dwyl/html-form-send-email-via-google-script-without-server/issues/48","repository_url":"https://api.github.com/repos/dwyl/html-form-send-email-via-google-script-without-server","labels_url":"https://api.github.com/repos/dwyl/html-form-send-email-via-google-script-without-server/issues/48/labels{/name}","comments_url":"https://api.github.com/repos/dwyl/html-form-send-email-via-google-script-without-server/issues/48/comments","events_url":"https://api.github.com/repos/dwyl/html-form-send-email-via-google-script-without-server/issues/48/events","html_url":"https://github.com/dwyl/html-form-send-email-via-google-script-without-server/issues/48","id":172804514,"number":48,"title":"Solution to problem with Spreadsheets August 2016","user":{"login":"BigKangu","id":21202970,"avatar_url":"https://avatars.githubusercontent.com/u/21202970?v=3","gravatar_id":"","url":"https://api.github.com/users/BigKangu","html_url":"https://github.com/BigKangu","followers_url":"https://api.github.com/users/BigKangu/followers","following_url":"https://api.github.com/users/BigKangu/following{/other_user}","gists_url":"https://api.github.com/users/BigKangu/gists{/gist_id}","starred_url":"https://api.github.com/users/BigKangu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/BigKangu/subscriptions","organizations_url":"https://api.github.com/users/BigKangu/orgs","repos_url":"https://api.github.com/users/BigKangu/repos","events_url":"https://api.github.com/users/BigKangu/events{/privacy}","received_events_url":"https://api.github.com/users/BigKangu/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2016-08-23T20:55:57Z","updated_at":"2016-09-27T22:00:47Z","closed_at":"2016-09-27T21:52:36Z","body":"It seems that recently Google has updated its way to create forms, so now the names of the fields are in hidden inputs below the normal ones (https://github.com/heaversm/google-custom-form).\r\n\r\nI have also tried the @nelsonic approach, and it emails the answers in JSON format properly, but it doesn't load them into the Google Spreadsheet, at least for me. That's why I wanted to combine two methods to always save the users data in case of more obfuscation changes are taken in the future by Google.\r\n\r\nSo I recommend you to have a webpage with a `iframe` inside of it. This iframe would contain your own custom form, from another webpage or –as in my example for convenience reasons– from itself using the `srcdoc` attribute. \r\n\r\nThen, you copy the **`names` of those hidden inputs** as well as the **`action`** form url from your **Google Form Preview Page** and paste them into the custom form.\r\n\r\nAnd finally, with Ajax we can easily send one copy of the form data to the normal Google Spreadsheet, and the other to our mail with the @nelsonic script solution.\r\n\r\nThis way, with the iframe and the Ajax, we are avoiding the url redirection to the 'Response registered' page when the form is submitted to Google, but we can hide the iframe from the parent view to be 100% sure.\r\n\r\nI post here all my code for you to test it:\r\n\r\nGoogle Spreadsheet with @nelsonic solution: https://docs.google.com/spreadsheets/d/1LUcidZln8fk-VymjyOXX4gfVusmCf8-G-SghraOPNyA/edit?usp=sharing\r\n\r\nCustom Form:\r\n\r\n```\r\n<!doctype html>\r\n    <html lang=\"en\">\r\n    <head>\r\n      <meta charset=\"utf-8\">\r\n      <title>Custom Form to Google SpreadSheets</title>\r\n    </head>\r\n\r\n    <body>\r\n      <script type=\"text/javascript\">\r\n        function hideIframeAndShowThankYouMessage(){\r\n          document.getElementById('iframe').style.display = \"none\";\r\n          document.getElementById('thankyou').style.display = \"block\";\r\n        }\r\n      </script>\r\n       <iframe id=\"iframe\" width=\"760\" height=\"500\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" srcdoc=\"<html><head></head><body>\r\n       <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>\r\n       <script type='text/javascript'>\r\n\r\n        $(document).ready(function(){\r\n          \r\n          $('#form').submit(function(e) {\r\n\r\n            // You could also here, for example, valid an email address input\r\n\r\n            // It shouldn't appear, but just in case the iframe loads the Google Forms 'Answer registered' page, we hide the iframe from parent js:\r\n\r\n            window.top.hideIframeAndShowThankYouMessage();\r\n\r\n            // Now we send the same form to two different locations: the first is the ordinary Google Spreadsheet, the second is the Google Apps Script which allows us to receive an email with the form info in JSON format\r\n\r\n            var url_sheet = 'https://docs.google.com/forms/d/e/1FAIpQLSdxucfxPO2TgTh4DOKTty6VCykJ6v4RX0nbKjsz1Pc5fLR9gA/formResponse';\r\n\r\n            var url_script = 'https://script.google.com/macros/s/AKfycby2xOphkRsr8Uf3mD44-H68yC0U3bUqvKV0bxXrTISTQ7QKDxw/exec';\r\n\r\n            $.ajax({\r\n              type: 'POST',\r\n              url: url_sheet,\r\n              data: $('#form').serialize(),\r\n              success: function(data){}\r\n            });\r\n\r\n            $.ajax({\r\n              type: 'POST',\r\n              url: url_script,\r\n              data: $('#form').serialize(),\r\n              success: function(data){}\r\n            });\r\n\r\n            e.preventDefault();\r\n\r\n          });\r\n        });\r\n          \r\n\r\n        </script>\r\n\r\n        <!--\r\n            *** TO-DO!! ***        \r\n            1. Copy your form ACTION url from your Google Form Preview Page\r\n            \r\n            2. Replace value of var url_sheet with that form ACTION url in line 31\r\n\r\n            3. Copy your Spreadsheet WEB APP url from Google Script Editor\r\n\r\n            4. Replace value of url_script with that WEB APP url in line 33\r\n\r\n            3. Look into the source of your Google Form Preview Page and search for the names of the HIDDEN fields which are each one close to the normal input type (... <input type='hidden' name='entry.314619096' jsname='L9xHkb'> ...). We don't need the jsname, only the name\r\n\r\n            4. Replace the NAMES fields of every field of the custom form below\r\n         --> \r\n\r\n       <form id='form' method='POST'>\r\n\r\n          <label for='name'>Name: </label>\r\n          <input type='text' name='entry.314619096' placeholder='This is easy!' />\r\n          <br/>\r\n          <label for='message'>Message:</label>\r\n          <input type='text' name='entry.2039301116' placeholder='Tell me something! ;)'/>\r\n          <br/>\r\n          <input type='submit' value='Submit'>\r\n      </form></body></html>\">Loading...</iframe>\r\n      <h1 id=\"thankyou\" style=\"display: none\">Thank you!</h1>\r\n    </body>\r\n    </html>\r\n```\r\n\r\nHope it could help someone!"},"comment":{"url":"https://api.github.com/repos/dwyl/html-form-send-email-via-google-script-without-server/issues/comments/250012176","html_url":"https://github.com/dwyl/html-form-send-email-via-google-script-without-server/issues/48#issuecomment-250012176","issue_url":"https://api.github.com/repos/dwyl/html-form-send-email-via-google-script-without-server/issues/48","id":250012176,"user":{"login":"mckennapsean","id":1406149,"avatar_url":"https://avatars.githubusercontent.com/u/1406149?v=3","gravatar_id":"","url":"https://api.github.com/users/mckennapsean","html_url":"https://github.com/mckennapsean","followers_url":"https://api.github.com/users/mckennapsean/followers","following_url":"https://api.github.com/users/mckennapsean/following{/other_user}","gists_url":"https://api.github.com/users/mckennapsean/gists{/gist_id}","starred_url":"https://api.github.com/users/mckennapsean/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mckennapsean/subscriptions","organizations_url":"https://api.github.com/users/mckennapsean/orgs","repos_url":"https://api.github.com/users/mckennapsean/repos","events_url":"https://api.github.com/users/mckennapsean/events{/privacy}","received_events_url":"https://api.github.com/users/mckennapsean/received_events","type":"User","site_admin":false},"created_at":"2016-09-27T22:00:46Z","updated_at":"2016-09-27T22:00:46Z","body":"Also, another issue could be not following Step 5 correctly to set the script's access to \"anyone, even anonymous\". See #47"}}
{"actor":{"display_login":"mckennapsean"}}