Comencé a crear un formulario con Apps Script, usando materializecss para crear un menú con 3 diseños diferentes.
function doGet(request) { return HtmlService.createTemplateFromFile(`form`).evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); } function include(filename){ var url="https://docs.google.com/spreadsheets/d/1sRKhZY27YVY4xMLJs9qAn_lAumaUKT1AH1SgeBrKk_E/edit#gid=0"; var ss= SpreadsheetApp.openByUrl; var ws=ss.getSheetByName("data"); } function onOpen(){ var ui=SpreadsheetApp.getUi(); ui.createMenu("My Menu") .addItem("Sidebar form", "showInsidebarform") .addItem("Modal Dialog form", "showInmodaldialogform") .addItem("Modeless Dialog form", "showInmodelessdialog") .addToUi(); } //OPEN THE FORM IN SIDEBAR function showInsidebarform() { var userform=HtmlService.createTemplateFromFile("form").evaluate().setTitle("Subscribe"); SpreadsheetApp.getUi().showSidebar(userform); } //OPEN THE FORM IN MODAL DIALOG function showInmodaldialogform() { var userform=HtmlService.createTemplateFromFile("form").evaluate(); SpreadsheetApp.getUi().showModalDialog(userform, "Subscribe"); } //OPEN THE FORM IN MODELESS DIALOG function showInmodelessdialog() { var userform=HtmlService.createTemplateFromFile("form").evaluate(); SpreadsheetApp.getUi().showModelessDialog(userform, "Subscribe"); } function appenData(data){ var ws=SpreadsheetApp.getActiveSpreadsheet().getSheetByName("data"); ws.appendRow([data.name,data.email]); } <!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <div class="container"> <div class="row"> <div class="input-field col s12"> <i class="material-icons prefix">account_circle</i> <input id="name" type="text" class="validate"> <label for="name">First Name</label> </div> <div class="input-field col s12"> <i class="material-icons prefix">email</i> <input id="email" type="text" class="validate"> <label for="email">email</label> <div class="input-field col s12"> <button class="btn waves-effect waves-light" id="btn">Submit <i class="material-icons right">send</i> </button> </div> </div><!--end row--> </div> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script> var nameBox=document.getElementById("name"); var emailBox=document.getElementById("email"); document.getElementById("btn").addEventListener("click",addRecord); function addRecord(){ var name=nameBox.value; var email=emailBox.value; if(name.trim().length==0||email.trim().length==0){ M.toast({html: 'Name and email are required'}) } else{ var data={ name:nameBox.value, email:emailBox.value, }; } google.script.run.appenData(data); nameBox.value=""; emailBox.value=""; self.location="https://www.theapothecary.app/homedoctor" }; </script> </body> </html>Estoy publicando mi código completo aquí, tiene créditos para: https://www.youtube.com/watch?v=4SqsK3Vh42Q&lc=UgzHk8aEXCtiDyh8e0B4AaABAg.9ZmDWeons-P9ZmyFFSUhEJ
Si quieres hacer un sistema de registro te recomiendo php
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <div class="container"> <div class="row"> <div class="input-field col s12"> <i class="material-icons prefix">account_circle</i> <input id="name" type="text" class="validate"> <label for="name">First Name</label> </div> <div class="input-field col s12"> <i class="material-icons prefix">email</i> <input id="email" type="text" class="validate"> <label for="email">email</label> <div class="input-field col s12"> <button class="btn waves-effect waves-light" id="btn">Submit <i class="material-icons right">send</i> </button> </div> </div><!--end row--> </div> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script> var nameBox=document.getElementById("name"); var emailBox=document.getElementById("email"); document.getElementById("btn").addEventListener("click",addRecord); function addRecord(){ var name=nameBox.value; var email=emailBox.value; if(name.trim().length==0||email.trim().length==0){ M.toast({html: 'Name and email are required'}) } else{ var data={ name:nameBox.value, email:emailBox.value, }; window.open("https://www.theapothecary.app/homedoctor") } google.script.run.appenData(data); nameBox.value=""; emailBox.value=""; self.location="https://www.theapothecary.app/homedoctor" }; </script> </body> </html>Si esta no es la respuesta a su pregunta. ¿Puedes explicar más claramente dónde está el problema?