Run Google App Script from web page

Question

I know how to write a simple app script that (once published) provide a simple form (name and message) that push values in a Google Spreadsheet.

My question is: how can I run the script from my site? Can I build an html form and when I submit the form writes in a spreadsheet?

Is there a way to "create" a link with values that must be pushed in the spreadsheet?

Where can I find examples?

Thanks

EDIT

GS CODE

var logSheetId = "[SHEETID]"; // Drive ID of log spreadsheet

function doGet(e){
var nome;
var messaggio;

nome = e.parameter.stringaNome;
messaggio=e.parameter.stringaMessaggio;
scriviSpreadsheet(nome,messaggio);
}

function scriviSpreadsheet(nome, messaggio) {
try {

// Open the log and record the new file name, URL and name from form
var ss = SpreadsheetApp.openById(logSheetId);
var sheet = ss.getSheets()[0];
sheet.appendRow([nome, messaggio]);

// Return the new file Drive URL so it can be put in the web app output
//return file.getUrl();
} catch (error) {
return error.toString();
}
}

HTML (external site)

<form id="myForm">
<input type="text" id="nome" name="nome" placeholder="Il tuo nome"/>
<input type="text" id="messaggio" name="messaggio"/>
<input type="button" value="Submit"
  onclick="scrivi()" />
</form>

<script>
function scrivi(){
  var nome= document.getElementById("nome").value;
  var messaggio = document.getElementById("messaggio").value;

  var location = "https://script.google.com/macros/s/[MYSCRIPTID]/exec?stringaNome=" + nome + "&stringaMessaggio=" + messaggio;
  window.location = location;

}

function onFailure(error) {
    alert(error.message);
}
</script>

I know it's not the best code ever but it works.

How can I avoid that any page open when I click the button?

Answer 1

EDIT: Tested and works. Don't forget to deploy as web app, give the form access to post to the script, and ensure the script has access to the target sheet by running the script manually once.

form.html:

<form action="https://script.google.com/macros/s/[SCRIPT ID]/exec" method="post">
  Input One:<br>
  <input type="text" name="inputOne"><br>
  Input Two:<br>
  <input type="text" name="inputTwo"><br>
  Input Three:<br>
  <input type="text" name="inputThree"><br>
  Input Four:<br>
  <input type="text" name="inputFour"><br>
  Input Five:<br>
  <input type="text" name="inputFive"><br>
  <input type="submit" value="Submit">
</form>

Code.gs:

function doPost(e) {

  var ss = SpreadsheetApp.openById("SHEET ID");
  var sheet = ss.getSheetByName("Sheet1");
  var sheet_counters = ss.getSheetByName("Counters");

  var id = sheet_counters.getRange("A2").getValue()+1;
  var timeZone = ss.getSpreadsheetTimeZone();
  var timestamp = Utilities.formatDate(new Date(), timeZone, "dd/MM/yyyy HH:mm:ss");

  sheet.appendRow([
    id,
    timestamp,
    e.parameter.inputOne,
    e.parameter.inputTwo,
    e.parameter.inputThree,
    e.parameter.inputFour,
    e.parameter.inputFive]);

  sheet_counters.getRange("A2").setValue(id);
}