Skip to main content

Church Offering Deposit Form

Overview

This project willbuilds helpupon 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 supportthe digital signature andform PDFproject output.to create a mobile-friendly offering deposit entry form. The form will streamline the process of recording multiple donations collected during church offerings, with digital signatures from two counting staff members.

YouDue areDate: encouragedAugust to31, use AI code assistants (such as Cursor and GitHub Copilot) to accelerate your development and improve code quality.2025

Objectives

  • Build a Codemobile-optimized ofoffering Conduct applicationdeposit form as a Google Apps Script web app,app
    • using
  • Support HTML5,rapid ES6+,entry CSS3,of multiple deposits with minimal friction
  • Implement dynamic data loading from Google Sheets for staff names and Webfund Components for the frontend.types
  • AcceptCapture digital signatures viafrom thetwo webcounting app.staff members
  • Generate atimestamped PDF ofrecords thewith submitted application, and save it to a specified Google Shared Drive.signatures
  • Store formall submissionsdata in a Google SheetSheets for tracking and management.reporting
  • Embed the web app as an iframeapplication in a BookStack page.
    • for
  • Consulteasy with your mentor (Thian-Peng) as needed—especially regarding digital signature capture and PDF generation/storage.access

Prerequisites

Tasks

1. Plan & Research

2. Set Up Your Development Environment

with:

  • 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).

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 thatdevelopment
    • replicates
  • HTML5, CSS3, ES6+, and Web Components
  • Digital signature capture using canvas/Signature Pad
  • PDF generation and Google Drive integration
  • Google Sheets API operations
  • Mobile-responsive design principles

Database Structure Setup

1. Create Required Google Sheets

Create three Google Sheets in your project folder:

Sheet 1: "Offering Deposits" (Main Data Sheet)

Columns: Date, Name, Payment Form, Amount, Offering, Note, Counter 1, Counter 2, Timestamp, PDF File ID, Drive Link, Status

Sheet 2: "Offering Counting Staff"

Columns: Name, Active Status Pre-populate with:

  • Xiaoying Shen
  • Weihong Xue
  • Sinnie Lee
  • Lisa Hsieh

Sheet 3: "Funds"

Columns: Fund Name, Active Status, Display Order Pre-populate with:

  • General
  • Church Building
  • Benevolent
  • Missions
  • Short-Term Mission
  • Capital Projects
  • Next Generation Leadership

Development Tasks

  1. Create Efficient Deposit Entry Interface
    Design for Speed:
    • Use a repeatable row component for deposits
    • Implement "Add Another" functionality
    • Auto-calculate running totals
    • Validate data as user enters data
  2. Implement Dual Digital Signature
  3. Backend Data Processing
  4. PDF Generation with Signatures
  5. Data Validation & Error Handling
  6. Optimize
    • When entering the Codeperson ofwho Conductmakes form,the acceptsdonation, provide the ability to select people who make donations previously to allow rapid selection.

Technical Specifications

Mobile Breakpoints:

  • Ensure usability on both portrait and landscape
  • Test on iOS Safari and Android Chrome

User Experience Flow

  1. Setup Phase: Select date and two counting staff members
  2. Data Entry: Add deposits one by one with quick workflow
  3. Review: Show summary with totals by fund type
  4. Signatures: Capture both staff signatures
  5. Submission: Generate PDF and save to sheets
  6. Confirmation: Show success message with PDF link

Final Deliverable

Required Outputs:

  • Fully functional mobile-optimized web app
  • Integration with three Google Sheets
  • PDF generation with digital signatures,signatures
    • generates
  • BookStack aembedded PDF, and stores it in a Google Shared Drive.implementation
  • Demo video (2-3-5 minutes) showing:
    • TheMobile web app running (form fillusage +workflow
      • signature
    • Multiple +deposit entries
    • Signature capture process
    • Generated PDF output)output
    • The Google Sheet being updated with submissionSheets data
    • The PDF saved on Google Drive with tracking in the sheet
    • The form embedded in BookStackupdates

Testing Checklist:

  • UploadMobile theresponsiveness videoacross todevices
    • this
  • Data folder:validation Uploadand Linkerror handling
  • Signature capture functionality
  • PDF generation with proper formatting
  • Google Sheets integration
  • Performance under typical usage loads

Questions or Issues?

  • If you getencounter stuckchallenges during development, especially with mobile optimization or haveperformance any questions (especially about digital signatures or PDF storage),issues, reach out to Thian-Peng directly via SignalSignal.

    • Use Cursor or yourGitHub usualCopilot channel.for accelerated development
    • Test on actual mobile devices, not just browser dev tools
    • Consider using Chrome DevTools' mobile simulation for initial testing

    Tip:This Don’tproject reinventemphasizes practical mobile UX for rapid data entry while maintaining the wheel—userobust AIbackend codearchitecture assistantsfrom likethe Cursordigital andsignature GitHub Copilot to help you learn and move faster.project.

Back to top