Search code examples
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