Google Apps Script HTML Form embedded in a Google Site

Question

I'm using the instructions at https://developers.google.com/apps-script/guides/web#embedding_your_web_app_in_google_sites to embed the results of a deployed Google Apps Script (below) into a Google Site (new Sites), but when I do so, the HTML form that I have included as a part of the Google Apps Script doesn't work: the "Submit" button doesn't do anything.

When I access the deployed Apps Script's URL directly, it works perfectly, it's only when it's embedded in the Google Site that it stops working.

I have "Deploy as web app" set to execute the app as me, and "Anyone within my org" set as who has access to the app.

Ideas would be most appreciated!

Code.gs:

function doGet(e) {
  console.log('e object '+ JSON.stringify(e,null,2));
  console.log('Active user '+ Session.getActiveUser().getEmail());

  var template = HtmlService.createTemplateFromFile('DemoForm.html');

  var queryString="none";
  if ("queryString" in e.parameters) {
    queryString=e.parameters["queryString"];
  }
  template.queryString = queryString;

  //Set the action to come back to this form
  template.action = ScriptApp.getService().getUrl();
  return template.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

DemoForm.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  
   <h1>Error Demo Form</h1>

    <form action="<?= action ?>" method="get">
    <label for="queryString">Enter user:</label>
    <input type="text" id="queryString" name="queryString">
    <input type="submit" value="Submit">   
    </form> 
    
    <h1>Result</h1>
    <p>queryString is <?= queryString ?></p>
  </body>
</html>

Edit: I found a workaround by using google.script.run, as mentioned in the comments on the accepted solution on Form redirecting in new google sites -- you can use google.script.run to call a function that returns raw HTML (using button onclick to trigger it), then the withSuccessHandler to update the page. But I'll leave this question open for a couple of days to see if someone has a better/cleaner solution.

Ian Crew Ian Crew · Accepted Answer · 2020-12-11T23:20:01

This is a little odd: I got a notice that someone had answered this question with a link to the documentation at https://developers.google.com/apps-script/guides/html/communication#forms, which includes an example that does exactly what I need it to, even when embedded in a Site, but that answer doesn't appear here anymore. So, whoever you were, thank you--that's what I needed!

Google Apps Script HTML Form embedded in a Google Site

1 Answers