formsgoogle-sheetsgoogle-apps-scriptweb-applicationssidebar

Google Sheet Sidebar Data Entry Sidebar Form Pass Value


when I click the button data submit.
I am use this code can your help me to solve this problem

Annotated spreadsheet with sidebar

Code.gs

function onOpen() {
  SpreadsheetApp
      .getUi()
      .createMenu('Sidebar')
      .addItem('Contact Form', 'showSidebar')
      .addToUi();
}

function showSidebar() {
  var html = HtmlService
      .createTemplateFromFile('sidebar')
      .evaluate()
      .setTitle('Contact Form');
  SpreadsheetApp.getUi()
      .showSidebar(html);
}

and sidebar.html

<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form id="contact">

<h3>First Name</h3>
<input type="text" name="firstname">   

<h3>Phone Number</h3>
<input type="text" name="phone">

<a href="#" onClick="return false;" class="fltr-button  animate">Submit</a>

</form>
</body>
</html>

Solution

  • function showSideBar() {
      const html='<form><input type="text" name="firstname" placeholder="First Name" /><input type="text" name="phone" placeholder="Phone Number" /><br /><input type="button" value="Submit" onClick="google.script.run.processForm(this.parentNode);" /></form>';
      SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutput(html));
    }
    
    function processForm(obj) {
      const ss=SpreadsheetApp.getActive();
      const sh=ss.getActiveSheet();
      sh.appendRow([obj.firstname,obj.phone])
    }
    

    Animation:

    enter image description here