Digital Signature Form

Overview

This project will help you gain hands-on experience with modern frontend technologies and Google Apps Script integration. You will build a digital Code of Conduct application form for Children’s Ministry as a Google Apps Script web app, designed to be embedded into our BookStack knowledge base and to support digital signature and PDF output.

You are encouraged to use AI code assistants (such as Cursor and GitHub Copilot) to accelerate your development and improve code quality.

Objectives

• Build a Code of Conduct application form as a Google Apps Script web app, using HTML5, ES6+, CSS3/6, and Web Components for the frontend.
• Accept digital signatures via the web app.
• Generate a PDF of the submitted application, and save it to a specified Google Shared Drive.
• Embed the web app as an iframe in a BookStack page.
• Consult with your mentor (Thian-Peng) as needed—especially regarding digital signature capture and PDF generation/storage.

Prerequisites

• BookStack Official Documentation
• Docker Documentation
• Google Apps Script Documentation
• Web Components Overview

Note:

• These steps are starting points; you may need to research and troubleshoot as you go.
• Embedding an iframe in BookStack may require config changes—see the BookStack docs.
• Deploying Google Apps Script web apps involves configuring access and permissions.
• Use AI tools and online resources to assist as needed.

Tasks

1. Plan & Research

• Study the sample forms at:
  • https://training.saskcac.ca/children-ministry/code-conduct
  • https://training.saskcac.ca/children-ministry/application
• Review how digital signatures are captured in HTML5 (e.g., using <canvas> and libraries like Signature Pad).
• Research options for PDF generation and saving files to a Shared Drive via Google Apps Script (e.g., using PDF-LIB, or Apps Script’s built-in capabilities).
• Consult with your mentor before final implementation of digital signature and PDF storage.

2. Set Up Your Development Environment

• Set up a new Google Apps Script project.
• Scaffold your frontend using HTML5, CSS, ES6+, and Web Components. (Consider using VS Code, Cursor, or other AI-enhanced IDEs.)
• Use a modular approach and write clean, maintainable code.

3. Build the Application Form Web App

• Recreate the Code of Conduct application form as the first milestone.
  • Include all required fields (name, email, etc.).
  • Add digital signature capture.
• Validate and submit the form data to the backend (Google Apps Script).
• Implement form data handling in Apps Script.

4. Generate and Store PDF

• On submit, generate a PDF version of the completed application form, including the digital signature.
• Store the generated PDF in the designated Google Shared Drive folder.
• Ensure only authorized users can access the PDF (discuss with mentor).

5. Deploy and Embed

• Deploy the web app publicly or with appropriate permissions.
• Embed it into a BookStack page using an iframe:

  <iframe src="YOUR_WEB_APP_URL_HERE" width="100%" height="800" style="border:none;"></iframe>
  

• Test the full workflow.

Final Deliverable

• A working Google Apps Script web app that replicates the Code of Conduct form, accepts digital signatures, generates a PDF, and stores it in a Google Shared Drive.
• Demo video (2-5 minutes) showing:
  • The web app running (form fill + signature + PDF output)
  • The PDF saved on Google Drive
  • The form embedded in BookStack
• Upload the video to this folder: Upload Link

Questions or Issues?

• If you get stuck or have any questions (especially about digital signatures or PDF storage), reach out to Thian-Peng directly via Signal or your usual channel.

---

Tip: Don’t reinvent the wheel—use AI code assistants like Cursor and GitHub Copilot to help you learn and move faster.

---