It looks like Google recently updated its way to create forms, so now the field names are in hidden entries below the regular ones ( https://github.com/heaversm/google-custom-form ).
I also tried the @nelsonic approach and it sends the responses in JSON format correctly, but it does not upload them to the Google spreadsheet, at least for me. This is why I wanted to combine the two methods in order to always save user data in case of more obfuscation changes that will be made by Google in the future.
Therefore, I recommend that you have a webpage with an iframe inside it. This iframe will contain your own custom form, from another web page or, as in my example, for convenience, by itself, using the srcdoc attribute.
Then you copy the names hidden inputs as well as the action URL on the Google Form Preview page. > and paste them into your custom form.
And finally, with Ajax, we can easily send one copy of the form data to a regular Google spreadsheet, and another to our mail using the @nelsonic script solution.
Thus, with iframe and Ajax, we avoid redirecting URLs to the Registered Response page when the form is submitted to Google, but we can hide the iframe from the parent view to be 100% sure.
I have posted all my code here for verification:
Google Spreadsheet with @nelsonic solution: https://docs.google.com/spreadsheets/d/1LUcidZln8fk-VymjyOXX4gfVusmCf8-G-SghraOPNyA/edit?usp=sharing
Custom form:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Custom Form to Google SpreadSheets</title> </head> <body> <script type="text/javascript"> function hideIframeAndShowThankYouMessage(){ document.getElementById('iframe').style.display = "none"; document.getElementById('thankyou').style.display = "block"; } </script> <iframe id="iframe" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0" srcdoc="<html><head></head><body> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script> <script type='text/javascript'> $(document).ready(function(){ $('#form').submit(function(e) { // You could also here, for example, valid an email address input // It shouldn't appear, but just in case the iframe loads the Google Forms 'Answer registered' page, we hide the iframe from parent js: window.top.hideIframeAndShowThankYouMessage(); // 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 var url_sheet = 'https://docs.google.com/forms/d/e/1FAIpQLSdxucfxPO2TgTh4DOKTty6VCykJ6v4RX0nbKjsz1Pc5fLR9gA/formResponse'; var url_script = 'https://script.google.com/macros/s/AKfycby2xOphkRsr8Uf3mD44-H68yC0U3bUqvKV0bxXrTISTQ7QKDxw/exec'; $.ajax({ type: 'POST', url: url_sheet, data: $('#form').serialize(), success: function(data){} }); $.ajax({ type: 'POST', url: url_script, data: $('#form').serialize(), success: function(data){} }); e.preventDefault(); }); }); </script> <!-- *** TO-DO!! *** 1. Copy your form ACTION url from your Google Form Preview Page 2. Replace value of var url_sheet with that form ACTION url in line 31 3. Copy your Spreadsheet WEB APP url from Google Script Editor 4. Replace value of url_script with that WEB APP url in line 33 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 4. Replace the NAMES fields of every field of the custom form below --> <form id='form' method='POST'> <label for='name'>Name: </label> <input type='text' name='entry.314619096' placeholder='This is easy!' /> <br/> <label for='message'>Message:</label> <input type='text' name='entry.2039301116' placeholder='Tell me something! ;)'/> <br/> <input type='submit' value='Submit'> </form></body></html>">Loading...</iframe> <h1 id="thankyou" style="display: none">Thank you!</h1> </body> </html>
Hope this helps someone!