NPO Web with Form Backup System🌐

Project Links

🌐 Website: Taiwan West Coast Development Association Website

Project Overview

As a technology volunteer for the Taiwan West Coast Development Association (台灣西海岸發展協會), I architected and maintained the organization’s official website. This is a completely free-cost web project that leverages open-source tools and free services with fundamental-to-intermediate web technologies, providing the association with a stable and easy-to-maintain online information platform with automated form data backup.

Role and Responsibilities

• Technology Volunteer: IT support for the association
• Website Architect: Planning and building the foundational website structure
• Frontend Customization: Basic HTML and CSS adjustments
• Backend Integration: Implementing serverless form data backup using Google Apps Script
• Content Quality Assurance: Ensuring accurate information is transmitted across the internet
• Data Backup Design: Creating automated workflows for form submission backup and confirmation

Technology Stack (All Free and Open Source)

Item	Technology	Cost
Static Site Generator	Hugo	Free
Version Control	GitHub	Free
Hosting Platform	Cloudflare Pages	Free
Frontend Development	HTML / CSS	Free
Architecture Type	Static Site	Free
Data Collection	Google Sheets + Apps Script	Free
Email Automation	Gmail API (via Apps Script)	Free

Core Features

1. Light and Dark Theme Toggle

Users can choose between light and dark themes based on preference. The theme switching is implemented through simple CSS variables.

2. Dynamic News Updates

A news section on the homepage allows the association to easily publish announcements and event information through Hugo’s content management system.

3. Beautiful Web Design

Utilizing fundamental modern design principles to ensure the website displays and functions properly across mobile, tablet, and desktop devices.

4. Member Information Directory

A dedicated members page that organizes and showcases team member information, enhancing organizational transparency.

5. Embedded Interactive Map

A map feature that visually displays the association’s service area and key regions of focus.

6. News and Media Library

A dedicated section that collects related news coverage, building a repository of media records and organizational credibility.

7. Contact Form with Automated Backup ✨ NEW

A contact/donation form that automatically:

• Backs up all form submissions to Google Sheets for record-keeping
• Sends automated confirmation emails to users with their submission details
• Notifies the association team when new forms are submitted
• Provides timestamp tracking for all entries
• Requires zero server infrastructure or backend maintenance

Website Navigation Structure

The website’s navigation menu is clear and comprehensive, covering eight main functional sections:

• Home: Organization introduction and key information
• Latest News: Dynamic announcements and event information
• About: Association background and mission
• Members: Team member introductions
• Activities: Events and activities hosted by the association
• News: Media coverage and news articles
• Contact Us: Communication channels and forms with automated data backup
• Donations: Donation and sponsorship options

Form Data Backup System Architecture

Overview

The contact/donation form system uses a serverless architecture that enables static sites to back up form data automatically, all within the free tier of Google’s services.

Technical Implementation

Frontend (Hugo Static Site)

• HTML form with standard input fields (name, email, message, donation info, etc.)
• JavaScript handles form submission via AJAX
• Sends data to Google Apps Script Web App endpoint

Backend (Google Apps Script)

• Receives POST requests from the form
• Validates and processes form data
• Writes submissions to Google Sheets as backup records
• Triggers automated email workflows for confirmation and notification

Data Storage (Google Sheets)

• Acts as a backup database with timestamp tracking
• Stores all form submissions with customizable headers
• Allows easy data export and analysis
• No database management or hosting costs

Email Automation Features

The system implements a dual-notification workflow:

1. User Confirmation Email

• Automatically sent to form submitters as backup confirmation
• Includes complete submission details for their records
• Provides professional acknowledgment
• Customizable subject line and message body

2. Internal Team Notification

• Sent to association email address (Google Groups compatible)
• Contains full submission details
• Includes formatted data for easy review
• Enables quick response to inquiries

Key Technical Advantages

Serverless Architecture: No server management, no uptime concerns, no infrastructure costs

Automated Backup: Form submissions are instantly backed up with zero manual intervention

Concurrent Request Handling: Uses LockService to prevent data conflicts during simultaneous submissions

Error Resilience: Try-catch blocks ensure graceful error handling for email sending

Scalability: Google’s infrastructure handles traffic spikes automatically

Audit Trail: Every submission is timestamped and permanently recorded for organizational records

Cost Advantages

The defining characteristic of this project is that it is completely free:

No Server Costs: Cloudflare Pages provides completely free static website hosting with no monthly or annual fees.

No Domain Costs: Integrated with Cloudflare’s free DNS service.

No Database Costs: Google Sheets serves as a free backup storage; all content is version-controlled in GitHub.

No Email Service Costs: Gmail API via Google Apps Script provides free automated email sending for confirmations and notifications.

No Backend Hosting Costs: Google Apps Script runs serverless functions at no charge for form backup operations.

No Complex Maintenance Costs: No need to purchase expensive servers, CDN services, or monitoring tools.

Perfect for Non-Profits: All resources are open-source and free software, fully complying with non-profit organizations’ budget constraints.

Appropriate Technology Difficulty

The technologies used in this project are all fundamental-to-intermediate level:

• Hugo provides ready-made themes and templates
• GitHub and Cloudflare Pages integration is straightforward—simply push code for automatic deployment
• HTML/CSS adjustments are basic web development skills, requiring no complex backend logic
• Google Apps Script uses JavaScript syntax, accessible to anyone with basic programming knowledge
• No need to learn complicated frontend frameworks or server management

Anyone with basic web knowledge can take over and maintain the project.

Project Structure and File Management

Website content is organized through a clear folder structure that allows association staff to easily edit content:

content/
├── _index.md         # Homepage content
├── authors/          # Member information
├── contact/          # Contact information and form
├── donate/           # Donation page
├── event/            # Event information
├── news/             # News and media
├── newest/           # Latest updates
├── opportunities/    # Other opportunities
├── privacy.md        # Privacy policy
└── terms.md          # Terms of use

All content is stored in Markdown format, requiring no code writing. Association members can easily edit and update content.

Data Management Workflow

For Association Staff

Viewing Backed-Up Submissions

1. Access the connected Google Sheet
2. Review submissions with timestamps
3. Filter and sort data as needed
4. Export to CSV for further analysis

Responding to Inquiries

1. Receive instant email notifications
2. Review submission details from backup
3. Respond directly from email or internal system
4. Track response status in Google Sheet (optional custom column)

Customizing Form Fields

1. Update Google Sheet headers for backup columns
2. Modify form HTML in Hugo content
3. Adjust Apps Script mapping if needed
4. Deploy changes via GitHub

Data Privacy Considerations

• Form submissions are backed up in private Google Sheets (access controlled)
• Email addresses are used only for confirmation emails and internal notification
• No third-party analytics or tracking on form data
• Complies with basic data protection principles
• Users receive backup confirmation of their submission for their own records

Next Phase: Analytics and Optimization

This project has built-in space for subsequent data analysis and search engine optimization, which can be handed over to the association’s marketing team:

Google Analytics Integration

• Task: Set up Google Analytics tracking code to monitor visitor numbers, traffic sources, page duration, and other metrics
• Purpose: Understand user behavior and optimize website content and navigation
• Data Synergy: Combine Analytics data with form backup records for comprehensive insights
• Responsible Party: Association marketing team

SEO Optimization Research and Implementation

• Task: Conduct keyword research, optimize page titles and descriptions, and improve website structure
• Purpose: Increase the association’s website visibility in search engines, attracting more potential members and supporters
• Specific Directions:
  • Optimize Meta tags and Open Graph information for each page
  • Create content aligned with search intent
  • Build a strong internal linking structure
  • Monitor keyword ranking performance
  • Analyze contact form submission sources
• Responsible Party: Association marketing team

Advanced Data Analytics

• Form Submission Analysis: Track which pages drive the most inquiries
• Response Time Optimization: Monitor time between submission and response
• User Journey Understanding: Analyze patterns in form submissions
• A/B Testing Opportunities: Test different form placements and messaging

Continuous Improvement

The marketing team can regularly adjust website content and structure based on Analytics data feedback to continuously enhance online impact.

Practical Outcomes

This project demonstrates how to build a professional online information platform for a non-profit organization with minimal cost using open-source and free tools. Without complex technology, it achieves:

• Accurate and timely information delivery
• Good user experience across devices
• An architecture that is easy to maintain and extend
• Zero-cost ongoing operations
• Automated form data backup with email confirmations
• Professional user acknowledgment workflow
• Scalable infrastructure for future growth

The technical foundation is complete, with analysis and optimization work easily handed off to the marketing team.

Technical Highlights for Portfolio

This project showcases several key technical competencies:

Full-Stack Thinking with Minimal Resources: Bridging static site limitations with serverless backend integration for form data backup

API Integration: Connecting frontend forms to Google Apps Script endpoints

Automation Design: Implementing dual-notification email workflows for backup confirmation without manual intervention

Data Architecture: Using Google Sheets as a lightweight backup storage solution

User Experience: Creating seamless form submission with immediate backup confirmation

Cost Optimization: Achieving automated data backup functionality with zero operating costs

Maintainability: Building systems that non-technical staff can manage and access

---

This project is continuously maintained. Feedback and suggestions from association members are welcome.