Skip to main content

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, 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.
  • Store form submissions in a Google Sheet for tracking and management.
  • 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

Tasks

1. Plan & Research

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.
  • Set up Google Sheets integration to log all form submissions with timestamp, applicant details, and status.

4. Set Up Google Sheets Integration

  • Create a Google Sheet to store form submissions and track application status.
  • Use Apps Script's SpreadsheetApp service to append form data automatically.
  • Include columns for: timestamp, name, email, signature status, PDF file ID, and drive link.
  • Implement error handling for sheet operations to ensure data integrity.
  • Consider adding a simple dashboard view using Google Sheets' built-in charts for application tracking.

5. 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.
  • Update the corresponding Google Sheets row with PDF file ID and drive link.
  • Mark submission status as "completed" in the sheet.
  • Ensure only authorized users can access the PDF (discuss with mentor).

5.6. 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 Google Sheet being updated with submission data
    • The PDF saved on Google Drive with tracking in the sheet
    • 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.

Back to top