Insert data in sheet using UI forms

In this example, I have created a form with two filelds, Name and Message. When user submits the form, entries are saved in an specified Spreadsheet.

Example Demo:

Spreadsheet preview where data is inserted after submit

Spreadsheet & UiApp Demo

Example Script:

var submissioSSKey = 'You Spreadsheet Key';//Change this key to your spreadsheet key

function doGet(){

  var app = UiApp.createApplication().setTitle('myApp');

  var panel = app.createVerticalPanel();

  var grid = app.createGrid(4, 2).setId('myGrid');

  var nameLabel = app.createLabel('Name');

  var nameTextBox = app.createTextBox().setWidth('150px').setName('name');

  var messageLabel = app.createLabel('Message');

  var messageTextArea = app.createTextArea().setWidth('150px').setName('message');

  var submitButton = app.createButton('Submit');

  var infoLabel = app.createLabel('Data inserted in sheet successfully..')


  grid.setWidget(0, 0, nameLabel)

    .setWidget(0, 1, nameTextBox)

    .setWidget(1, 0, messageLabel)

    .setWidget(1, 1, messageTextArea)

    .setWidget(2, 1, submitButton)

    .setWidget(3, 1, infoLabel); 

  var handler = app.createServerClickHandler('insertInSS');





  return app;


//Function to insert data in the sheet on clicking the submit button

function insertInSS(e){

  var app = UiApp.getActiveApplication();

  var name =;

  var message = e.parameter.message;



  var sheet = SpreadsheetApp.openById(submissioSSKey).getActiveSheet();

  var lastRow = sheet.getLastRow();

  var targetRange = sheet.getRange(lastRow+1, 1, 1, 2).setValues([[name,message]]);

  return app;