Create custom forms with GUI Builder and Google Apps Script

Using Google Forms, you can create custom data form, but the ability to customize them both in terms of functionality and visual aspect can, in some cases, be limiting. In this post I will explain how you can create a custom data form to record entered data in a Google Spreadsheet document using Google Apps Script.
Google Apps Script provides a simple tool for visual graphical user interfaces creation named GUI Builder that we will employ to create our custom form.
First create a new Spreadsheet document, then activate the Script Editor using the menu “Tools -> Script editor …”:

Select “Blank Project” to create an empty script project and save that by using the menu item: “File -> Save”.

The editor will ask you to name the project, insert: “Custom Form to Spreadsheet” and click on the “OK” button to confirm.

Once you assign a name to the project, you can use the GUI Builder to create our own custom interface. To access the GUI Builder tool you need to use the menu item “File -> Build a user interface …”

The GUI Builder tool will load as follows:

The GUI Builder is composed by three main areas, the left bar contains components or items to be used inside your application, the right bar contains properties for the used components and the application preview area presents you a preview of your application. It’s possible to interact with this preview and edit it. Having to create a data form we must first select the “Form Panel” item from the the left bar:

Using the mouse, drag the “Form Panel” item and drop it inside the application area:

At this point, we can expand the Forms Panel item to consume most of the available space in our application. Widen it by dragging the active points (blue squares) to the desired position. We should get something like the following:

Once created our Form Panel, we can begin putting fields in the form. However as conceived by Google, the Form Panel component accepts only one child component, obviously our form can’t be composed of only one field.
The explanation is simple, in our form we have to insert a container component that represents the alignment of child components. In this case we will use the “Absolute Panel” as alignment panel, this panel allows us to insert components inside it which will be placed in an absolute manner or in the exact position in which we place them. To insert the Absolute Panel select it from the left bar:

Like before, using the mouse, drag the “Absolute Panel” item and drop it inside the “Form Panel” component:

Use the active points to broaden the component to occupy the greatest possible proportion of the space offered by the Form Panel:

Finally, we can place the components or fields of our form. We start by inserting a label selecting the “Label” component from the left bar:

The Label component has to be dragged inside the ”Absolute Panel” in the desired position, try to place it in the upper left corner:

By default, the system will assign the text “Label1″ to our component. Obviously, for us, this name is not correct so we can change it using the right bar by entering the desired text in the “Text” field of the “Text” section:

At this point our label should display correctly the words: “Full Name:”. We must now place a component that allows us to enter a value for the label “Full Name”. To do this, select the component “Text Box” from the left bar:

This component will have to be dragged to the right of the label inside the Absolute Panel:

Still using active points broaden the component “Text Box”:

By default, the system will insert “TextBox1″ as text, actually we want the field to be initially empty and then allow the user to enter their name. To do this we use, as before, the right bar and clear the “TextBox1″ value contained within the “Text” field of the “Text” section:

To allow the user to send the form we have to insert a button. Select the component “Submit Button” from the left bar:

Drag it into the Absolute Panel at the bottom left:

By default, the button will be named “SubmitButton1″ to change it use the right bar at the “Text” field of the “Text” section and insert the value “Submit”:

Now we lack a button to allow the user to clear the form, the component to be used is called “Reset Button”. Select “Reset Button” at the left bar:

Drag the component into the Absolute Panel next to the “Submit” button:

In this case, the button name is by default “ResetButton1″, change it by selecting the “Text” field of the section “Text” of the right bar and insert the value “Clear”:

In order to handle the incoming data simply, assign a friendly name to the component “Text Box”. To do so, we must first select it:

At this point, using the right bar, inside the field “ID” of the “Base” section insert the value “userFullName”:

The “userFullName” has to be also inserted inside the field “Name” of the “Input Fields” section:

Save our newly created interface by using the menu item “File -> Save”:

The GUI Builder will ask you to name the project, insert: “My Custom Form” and click on the “OK” button to confirm.

You can now return to the Script Editor to load the GUI Builder project into your application. Inside the script, enter the following code:

function myFunction() {
  var app = UiApp.createApplication();
  app.add(app.loadComponent("My Custom Form"));
  SpreadsheetApp.getActiveSpreadsheet().show(app);
}

Now press the “play” button on the toolbar to start your script. Go back to the original Spreadsheet document, if all went well you should see the following screen:

As you can see our form has (intentionally) some cosmetic defects such as edges and the size is not appropriate. In order to solve these problems go back in the GUI Builder using the menu “File -> Build a user interface …” of the Script Editor. After loading our interface using the mouse select the Form Panel:

Using the right bar under “Border Width” field of the “Borders and Margins” section, insert the value 0:

As you can see the edges of the Form Panel are gone:

Repeat the same operation for the Absolute Panel, select it:

Always using the right bar under “Border Width” field of the “Borders and Margins” section, insert the value 0:

At this point the edges for the Absolute Panel are gone. Let’s save our project via the menu “File -> Save” and execute our script as we did previously. At this point in the Spreadsheet document should look like the following screen:

Much better. Now the real engine of the form or the ability to record the data entered by the user is missing. For this reason, go back to the Script Editor and insert the following code:

function doPost(theForm) {
  var app = UiApp.getActiveApplication();
  var userFullName = theForm.parameter.userFullName;
  SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().appendRow([userFullName]);
  app.close();
  return app;
}

Everything is ready to receive and record data. We run our script again and return to Spreadsheet document to display the form. Insert the value “Sample Name” in the field “Full Name”:

Press now the “Submit” button to save the form data. As you can see the Spreadsheet document will be correctly populated with values:

Congratulations! You have created ​​your first custom form using Google Apps Script and his GUI Builder.
Of course there is much to say about creating forms with GUI Builder and Google Apps Script, this is just a starting point from where to build on.

Happy scripting!