How do I add my Google Apps Script signature code within my Google Forms

I found this code online, and it allows me to draw signaures with .gs and .html.

function doGet() {
  return HtmlService
      .createTemplateFromFile('index')
      .evaluate();
}
function saveToDrive(signature){
  var signature = signature.split(",")
  var blob = Utilities.newBlob(Utilities.base64Decode(signature[1]), 'image/png');
  var sheet=SpreadsheetApp.getActive().getActiveSheet();
  sheet.insertImage(blob, 1, 1);
}

    <!DOCTYPE html>
    <html>
    <head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/></head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/willowsystems/jSignature/master/libs/jSignature.min.js"></script>
    <body>
    <form>
    ...
    Signature:
    <div id="signature"></div><br>
    <img id="rendered" src="" style="display:none">
    <input type="Submit" value="Save" onclick="getSignature();"/>
    ...
    </form>
    </body>
    <script>
      document.getElementById("signature").style.border = "1px solid black";
      $("#signature").jSignature({
        'background-color': 'transparent',
        'decor-color': 'transparent'
      });
      function getSignature(){
        $("img#rendered").attr("src",$('#signature').jSignature('getData','default'));
        var signature = document.getElementById('rendered').src;
        google.script.run.saveToDrive(signature);
      } 
    </script>
    </html>

I just want to know how I intergrate it within my form, so that at the bottom, there is a place to sign, which then automatically saves to my google drive as a jpg, and is shown in my form as an image.

You can adjust the code snippet to save the signature to your Drive and embed the WebApp URL in your form

For this:

Modify the saveToDrive function to

function saveToDrive(signature){
  var signature = signature.split(",")
  var blob = Utilities.newBlob(Utilities.base64Decode(signature[1]), 'image/png');
  blob.setName("signature");
  var file = DriveApp.createFile(blob);
}

Deploy your code as a WebApp with the settings: Execute the app as: Me, Who has access to the app: Anyone, even anonymous.
Now, I am not aware of a way to embed this WebApp into a Google form (you would need to create a custom HTML form for this), but what you can do is to provide a link to the WebApp as part of a question / response option and kindly ask the user to follow the link.

Here is a sample form (keep in mind that the WebApp is deployed as me, so if you provide a signature, it will be saved on my Drive and not yours ):

https://docs.google.com/forms/d/e/1FAIpQLSckCxKzrUdNvpcONLVRvJ08e5EDZRNB-tTfSRKG2YRLVjI_Ww/viewform

How do I add my Google Apps Script signature code within my Google Forms

You can adjust the code snippet to save the signature to your Drive and embed the WebApp URL in your form

Related

Recent Posts