title: Grab input from HTML and pass it to GS
body: <p><strong>Context</strong></p>
  <p>I'm adding different functionalities to a Google Spreadsheet through Google Scripts. One of these functionalities I'd like to add is for a form to pop up, details to be added in and an email to be sent. The form (see below) is WIP and fields are yet to be fully defined.</p>
  <p><strong>UPDATED</strong> based on Alessandro's feedback.</p>
  <ul>
  <li>New form in HTML following the same principles.</li>
  <li>&lt; Script &gt; within HTML updated based on feedback</li>
  <li>JS updated based on feedback</li>
  </ul>
  <p><em>Doesn't work yet.</em></p>
  <p><strong>HTML</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;To add new tasks for a specific campaign setup, please start specifying what project, campaign, platform and phase you want to add tasks for.&lt;/p&gt;
  &lt;p&gt;PROJECT&lt;/p&gt;
      &lt;form id="briefForm" onsubmit="handleFormSubmit(this)"&gt;
  &lt;div class="container"&gt;
  
  
          &lt;div class="row"&gt;
              &lt;div class="col-6"&gt;&lt;!--left side --&gt;
                  &lt;div class="form-group row"&gt;
                      &lt;label for="fname" class="col-sm-6 col-form-label"&gt;Project:&lt;/label&gt;
                      &lt;div class="col-sm-6"&gt;
                          &lt;input type="text" class="form-control" id="project"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group row"&gt;
                      &lt;label for="lname" class="col-sm-6 col-form-label"&gt;Platform:&lt;/label&gt;
                      &lt;div class="col-sm-6"&gt;
                          &lt;input type="text" class="form-control" id="platform"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
       
              &lt;/div&gt;
  
              &lt;div class="col-6"&gt;
                  &lt;div class="form-group row"&gt;
                      &lt;label for="campaign" class="col-sm-6 col-form-label"&gt;Campaign:&lt;/label&gt;
                      &lt;div class="col-sm-6"&gt;
                          &lt;input type="text" class="form-control" id="campaign"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                   &lt;div class="form-group row"&gt;
                      &lt;label for="lname" class="col-sm-6 col-form-label"&gt;Phase:&lt;/label&gt;
                      &lt;div class="col-sm-6"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col"&gt;
                                  &lt;select name="Month" class="custom-select"&gt;
                                     &lt;option value="march"&gt;None&lt;/option&gt;
                                     &lt;option value="january"&gt;Awar.&lt;/option&gt;
                                      &lt;option value="february"&gt;Cons.&lt;/option&gt;
                                      &lt;option value="march"&gt;Both&lt;/option&gt;
                                      
                                  &lt;/select&gt;
                              &lt;/div&gt;
  
                              
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                      
              &lt;/div&gt;&lt;!--right side --&gt;
          &lt;/div&gt;&lt;!-- form for teacher/student--&gt;
      
  &lt;/div&gt;    
  &lt;p&gt;TASKS&lt;/p&gt;
  &lt;div class="container"&gt;
  &lt;p&gt;Select the relevant tasks to add to this project.&lt;/p&gt;
                 &lt;div class="custom-control custom-checkbox"&gt;
                  &lt;input type="checkbox" class="custom-control-input" id="customCheck1"&gt;
                  &lt;label class="custom-control-label" for="customCheck1"&gt;Review assets&lt;/label&gt;
                  &lt;/div&gt;
                  
                  &lt;div class="custom-control custom-checkbox"&gt;
                  &lt;input type="checkbox" class="custom-control-input" id="customCheck2"&gt;
                  &lt;label class="custom-control-label" for="customCheck2"&gt;Send brief&lt;/label&gt;
                  &lt;/div&gt;
                  
                  &lt;div class="custom-control custom-checkbox"&gt;
                  &lt;input type="checkbox" class="custom-control-input" id="customCheck3"&gt;
                  &lt;label class="custom-control-label" for="customCheck3"&gt;Set up&lt;/label&gt;
                  &lt;/div&gt;
                  
                  &lt;div class="custom-control custom-checkbox"&gt;
                  &lt;input type="checkbox" class="custom-control-input" id="customCheck4"&gt;
                  &lt;label class="custom-control-label" for="customCheck4"&gt;Quality check&lt;/label&gt;
                  &lt;/div&gt;
       &lt;/div&gt;
       &lt;br&gt;
                  &lt;input type="submit"  id="submitbtn" class="btn btn-primary"&gt;     
      &lt;/form&gt; 
  
  
  
  &lt;!-- Script down here --&gt;
  &lt;script&gt;
    window.closeDia = function() {
      var formObject = {
          platform: document.getElementById('platform').value,
          project: document.getElementById('project').value,
          // other form input fields...
      }
      google.script.run.sendBrief(formObject);
    };
  &lt;/script&gt;
  
  
  
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>JS</strong> (contains both openBrief and sendBrief)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function openBrief() {
    var s=SpreadsheetApp.getActive(); 
    var htmlDlg = HtmlService.createHtmlOutputFromFile('tasksHTML')
        .setSandboxMode(HtmlService.SandboxMode.IFRAME)
        .setWidth(750)
        .setHeight(450);
    SpreadsheetApp.getUi()
        .showModalDialog(htmlDlg, 'New tasks for new campaign setup ');
  }
  
  function sendBrief(formObject) {
    var project = formObject.project;
    var platform = formObject.platform;
    // and so on...
    var s = SpreadsheetApp.getActiveSpreadsheet();
    var ss = s.getSheetByName("Support");      // Enter sheet name
    var rangeProject = ss.getRange('AA2');
    
    
    rangeProject.setValue(project)
  }</code></pre>
  </div>
  </div>
  </p>