Is there a way to add a Javascript-based Signature Pad to a Google Form to capture a responder's signature?

Question

Is there a way to add in Thomas Bradley's Signature Pad plugin so that someone who is filling out the Google Form would be able to sign the form? Would it be possible to use the HTML Service option to create a custom HTML form web app that can then still upload the responses into a Google Spreadsheet?

The project I've been asked to look into involves an individual being able to fill out a form but they would also like to be able to capture a signature (essentially a web form replacing paper forms) and they would like to do it all with Google since it is their preferred service. They also prefer to use Google Spreadsheets.

I'm very new to Google App Scripts and have a beginner's understanding of Javascript so I may very well misunderstand the uses and potential of Google App Scripts. Any help or advice is much appreciated.

Answer 1

patt0 is right. Here is a working example...

I've added a jQuery signature pad plugin to a Google spreadsheet using Google's HTML Service. ( http://willowsystems.github.io/jSignature/#/about/ )

The following example shows a signature pad on a Google Spreadsheet and converts the drawn signature to Base64 vector (image/jSignature;base30) data.

Here is my code.gs :

var ss = SpreadsheetApp.getActive();

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('index');
  ss.show(html);
}

and here is index.html - - (link in your own Jsignature.js):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="jSignature.js></script>
<script>
$(document).ready(function() {
    $("#signature1").jSignature();
});
</script>
<div id="signature1"></div>
<button type="button" onclick="$('#signature1').jSignature('clear')">Clear</button>
<button type="button" onclick="alert($('#signature1').jSignature('getData','base30'))">Export</button>

Answer 2

As far as I can see, adding the plugin to a Google Form directly will not be possible.

Using HTML Service is a good idea and yes indeed it will be possible to get the the data from the form and push it to a spreadsheet, which then can trigger other workflow parts.

The only potential red flag is to find out wether the dependencies for the plugin are compatible HTML Service ( https://developers.google.com/apps-script/guides/html-service-caja ).

Let me know if you need more direction.