Userform

<!DOCTYPE html>


<!--DROPDOWN SCRIPT-->
<script>
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems);
  });
</script>
<!--END DROPDOWN SCRIPT-->


<!--GET ACTIVE USER-->

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">

<p>
Effective User: <span id="effectiveUser"></span>
</p>
<p>
Active User: <span id="activeUser"></span>
</p>


<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script>
  $(function() {    //This function runs automatically when the sidebar is opended
        google.script.run.withSuccessHandler(loadListItems).withFailureHandler(fail).getListItems();
  });


    function loadListItems(returnedData){
    $( "#effectiveUser" ).html(returnedData[0]);
    $( "#activeUser" ).html(returnedData[1]);
  }
     function fail(){
        //update the field with the id of yourChoice
    $( "#effectiveUser").html("<strong> Opps, something went wrong.... </strong>");
  }
</script>

<!--END GET ACTIVE USER-->


  <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">

      <div class="row">


        <div class="input-field col s12">
          <i class="material-icons prefix">account_circle</i>
          <input id="username" type="text" class="validate">
          <label for="usermame">Khoros Link</label>
        </div>


        <div class="input-field col s12">
          <i class="material-icons prefix">phone</i>
          <input id="tel" type="text" class="validate">
          <label for="tel">Telephone</label>
        </div>

        <div class="input-field col s20">
          <button class="btn waves-effect waves-light" id="btn">Add
          <i class="material-icons right">send</i>
          </button>
        </div>

      </div> <!--END ROW-->


     <!--DROPDOWN UI-->
     <div class="row">
      <div class="input-field col s12">
        <select id="dropdrop">
          <option value="0"disabled selected>Choose your option</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
       <label>Materialize Select</label>
      </div>
     </div>
    </div>
    <!--END DROPDOWN UI-->


    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
            <script>
              var nameBox = document.getElementById("username");
              var phoneBox = document.getElementById("tel");
              var dropBox = document.getElementById("dropdrop");
              var userBox = document.getElementById("effectiveUser");


              document.getElementById("btn").addEventListener('click',addRecord);

              function addRecord(){

              var name1 = nameBox.value;
              var phone2 = phoneBox.value;
              var drop1 = dropBox.value;
              var user1 = userBox.value;
              google.script.run.appendData(name1,phone2,drop1,user1);
              nameBox.value = "";
              phoneBox.value = "";
              dropBox.value = "";
              }


            </script>
    </body>

  </html>