.gs/.html - Google Apps Script as a Web App using Form Elements, Html Service and a spreadsheet

I am currently trying to learn some 'Google Apps Script' basics from the 'Web Application' angle. I want to use the 'HTML Service' because the older 'UI Service' is now depreciated.

Basically what I want to accomplish is to type a name into the 'name' text input and then click the 'Submit' button which should then populate the spreadsheet with the entered value. I think the code below is close to what I need but I'm not sure how to tie it all together so the form elements work with the .gs code.

Currently the code I posted writes a value in the proper place in the spreadsheet when it is opened.

Any help would be very much appreciated. index.html

<div>
    <? var submit = insertInSS(); ?>
    <p>Add a Name:</p>

    <input type="text" name="name">
    <input type="submit"  name="submit"  value="Submit">

    <hr>
    <? var data = getData(); ?>

    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
      <tr>
      <? for (var j = 0; j < data[i].length; j++) { ?>
      <td><?= data[i][j] ?></td>
      <? } ?>
      </tr>
      <? } ?>
    </table>

</div>

My code.gs looks like the following

  var submissioSSKey = '1234567890abcdefghijklmnopqrstuvwkyz';
    function doGet() {
      return HtmlService
        .createTemplateFromFile('index')
        .evaluate()
        .setSandboxMode(HtmlService.SandboxMode.IFRAME);
    }

function getData() {
return SpreadsheetApp
  .openById(submissioSSKey)
  .getActiveSheet()
  .getDataRange()
  .getValues(); 
}

    function insertInSS(){
      var ss = SpreadsheetApp.openById(submissioSSKey);
      var sheet = ss.getActiveSheet();
      var lastRow = ss.getLastRow();
      var cell = sheet.getRange(lastRow+1, 1, 1,1);
      cell.setValue("name");
    }

Regards,

Chris