Sidebar.js.html

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<script>

  $(document).ready(function() {  
    $('#test-form').submit(onSidebarFormSubmit)
  })

  function onSidebarFormSubmit(event) {
  
    event.preventDefault()
 
    var status = $('#submit-status')
    var button = $('#submit-button')
    var form = $('#test-form').get()[0]
  
    status.hide()
    button.text('Submitting...')
    button.addClass('disabled')

    google.script.run
      .withSuccessHandler(function() {
        resetForm('Form submitted OK!')
      })
      .withFailureHandler(function(error) {
        resetForm(error, true)
      })
      .onFormSubmit(form);  
      
    // Private Functions
    // -----------------

    function resetForm(message, isError) {
    
      if (isError) {
        status.addClass('error')
      } else {
        form.reset()
        status.removeClass('error')      
      }
      
      status.text(message)
      status.show()
      
      button.text('Submit')
      button.removeClass('disabled')
    }
  }

</script>