Newbie - Google Sheets Web Form Debugging

Simple contact web form. I cannot figure out why it does not work as intended.

On open sets up a menu, allows me to select a modal, non-modal or sidebar for form input.

I fill out the form and click submit.

It does not append data to my sheet. The form wipes it self clean (like blank - no fields). All I can to is close and reopen the form.

Here is the Apps Script

function showForm() {
  
  // Add Custom 'CWAS Menu'
  var ui = SpreadsheetApp.getUi();
    ui.createMenu('CWAS Menu')
      .addItem('Sidebar Form', 'showInSideBarForm')
      .addItem('Modal Dialog Form', 'showInModalDialogForm')
      .addItem('Modeless Dialog Form', 'showInModelessDialog')
      .addToUi();
}

function showInSideBarForm() {
  var userForm = HtmlService.createTemplateFromFile('form').evaluate().setTitle('New Passenger Details');
  SpreadsheetApp.getUi().showSidebar(userForm);
}

function showInModalDialogForm() {
  var userForm = HtmlService.createTemplateFromFile('form').evaluate().setTitle('New Passenger Details');
  SpreadsheetApp.getUi().showModalDialog(userForm, 'New Passenger Details');
}

function showInModelessDialog() {
  var userForm = HtmlService.createTemplateFromFile('form').evaluate().setTitle('New Passenger Details');
  SpreadsheetApp.getUi().showModelessDialog(userForm, 'New Passenger Details');
}

function appendData(data) {
  var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Passenger Data');
  ws.appendRow([data.firstName, data.lastName, data.email, data.phone]);
}

Here is the HTML

      <!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'>
        <form class="col s12">
          <!---- First Name ---->
          <div class="input-field col s12">
            <i class="material-icons prefix">account_circle</i>
            <input id="firstNameInput" type="text" class="validate" required>              
            <label for="firstNameInput">First Name</label>
          </div>
          <!---- Last Name ---->
          <div class="input-field col s12">
            <i class="material-icons prefix">account_circle</i>
            <input id="lastNameInput" type="tel" class="validate" required>
            <label for="lastNameInput">Last Name</label>
          </div>  
          <!---- Email ----> 
          <div class="input-field col s12">
            <i class="material-icons prefix">email</i>
            <input id="emailInput" type="email" class="validate" required>
            <label for="emailInput">Email</label>
          </div>
          <!---- Telephone ---->
          <div class="input-field col s12">
            <i class="material-icons prefix">phone</i>
            <input id="phoneInput" type="tel" class="validate" pattern='[0-9]{10}' required>
            <label for="phoneInput">Telephone</label>
            <span class="helper-text" data-error='Please enter a 10 digit phone number' data-success=''></span>
          </div>
          <!---- Submit Button ---->
          <div class="input-field col s12">
            <button class="btn waves-effect waves-light" id='submitButton'>Submit
              <i class="material-icons right">send</i>
            </button>
          </div> <!--end submit button-->


        </form>
      </div>
    
      <!-- Compiled and minified JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
      <script>



console.log(firstName);

        function addRecord(){
          
          var firstName = document.getElementById('firstNameInput');
          var lastName = document.getElementById('lastNameInput');
          var email = document.getElementById('emailInput');
          var phone = document.getElementById('phoneInput');
          
          var data = {
            firstName: firstName.value,
            lastName: lastName.value,
            email: email.value,
            phone: phone.value
          };

          google.script.run.appendData(data);

          //clear form
          firstNameInput.value='';
          lastNameInput.value='';
          emailInput.value='';
          phoneInput.value='';

        }//End of addRecord Function

        document.getElementById('submitButton').addEventListener('click', addRecord);

      </script>
    </body>
  </html>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/NPZM6FY