Created
May 9, 2019 10:38
-
-
Save prasanthmj/9caef773db90a74a7e08e14965592a5b to your computer and use it in GitHub Desktop.
Show a form in Google Sheet and collect input from the form. Read full article here: http://blog.gsmart.in/google-apps-script-html-form/
This file contains 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
| function onOpen() | |
| { | |
| var ui = SpreadsheetApp.getUi(); | |
| ui.createMenu('Form') | |
| .addItem('add Item', 'addItem') | |
| .addToUi(); | |
| } | |
| function addItem() | |
| { | |
| var html = HtmlService.createHtmlOutputFromFile('form'); | |
| SpreadsheetApp.getUi() | |
| .showModalDialog(html, 'Add New Item'); | |
| } | |
| function addNewItem(form_data) | |
| { | |
| var sheet = SpreadsheetApp.getActive().getSheetByName('Sheet1'); | |
| sheet.appendRow([form_data.first_name, form_data.last_name, form_data.email]); | |
| } |
This file contains 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> | |
| <head> | |
| <base target="_top"> | |
| <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"> | |
| </head> | |
| <body> | |
| <form id="myform"> | |
| <div class="block form-group"> | |
| <label for="first_name">First Name</label> | |
| <input type='text' name='first_name' id="first_name" required="required"/> | |
| </div> | |
| <div class="block form-group"> | |
| <label for="last_name">Last Name</label> | |
| <input type='text' name='last_name' id="last_name" required="required"/> | |
| </div> | |
| <div class="block form-group"> | |
| <label for="email">Email</label> | |
| <input type='text' name='email' id="email" required="required"/> | |
| </div> | |
| <div class="block"> | |
| <button type="submit" class="action">Submit</button> | |
| </div> | |
| </form> | |
| <script> | |
| document.querySelector("#myform").addEventListener("submit", | |
| function(e) | |
| { | |
| e.preventDefault(); //stop form from submitting | |
| google.script.run.addNewItem(this); | |
| google.script.host.close();//close this dialogbox | |
| } | |
| ); | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment