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

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..')

      .setVisible(false).setId('info');

  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');

  handler.addCallbackElement(panel);

  submitButton.addClickHandler(handler);  

  panel.add(grid);

  app.add(panel);

  return app;

}

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

function insertInSS(e){

  var app = UiApp.getActiveApplication();

  var name = e.parameter.name;

  var message = e.parameter.message;

  app.getElementById('info').setVisible(true).setStyleAttribute('color','red');

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

  var lastRow = sheet.getLastRow();

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

  return app;

}