I have started to create a form with Apps Script, using materializecss to create a menu with 3 different layouts.
#1 – when I embed my url to the New Google Sites, it doesn’t use the layout (modal), I need to know how to select one of the 3 sidebar options.
#2 – After submit, the form data is posted to the spreadsheet, but it doesn’t redirect to a different page.
I am a beginner in this, I refuse to sign up to webhooks like Google is forcing us to because I don’t want to share my user’s data. Your help is much appreciated.
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>
Im posting my full code here, it has credits to: https://www.youtube.com/watch?v=4SqsK3Vh42Q&lc=UgzHk8aEXCtiDyh8e0B4AaABAg.9ZmDWeons-P9ZmyFFSUhEJ