Contact Form Application

A simple contact form application that collects user submissions and stores them in SQLite database.

Features

  • Contact Form: Clean, responsive form with name, email, and message fields
  • Form Validation: Client-side and server-side validation
  • SQL Storage: All submissions are stored in SQLite database
  • Submissions Display: View all recent submissions on the same page
  • Real-time Updates: Form submissions update the display immediately

Project Structure

├── backend/
│   ├── database/
│   │   ├── migrations.ts    # Database schema and table creation
│   │   └── queries.ts       # Database query functions
│   ├── routes/
│   │   └── submissions.ts   # API routes for form submissions
│   └── index.ts            # Main Hono app entry point
├── frontend/
│   └── index.html          # Contact form UI
└── README.md

API Endpoints

  • GET /api/submissions - Retrieve all form submissions
  • POST /api/submissions - Create a new form submission

Database Schema

The form_submissions_1 table contains:

  • id (INTEGER PRIMARY KEY) - Auto-incrementing submission ID
  • name (TEXT NOT NULL) - Submitter's name
  • email (TEXT NOT NULL) - Submitter's email address
  • message (TEXT NOT NULL) - The message content
  • created_at (DATETIME) - Timestamp of submission

Usage

  1. Visit the application URL
  2. Fill out the contact form with your name, email, and message
  3. Click "Submit Message"
  4. View your submission appear in the "Recent Submissions" section below the form

Technologies Used

  • Backend: Hono framework with TypeScript
  • Database: SQLite via Val Town's sqlite utility
  • Frontend: Vanilla HTML/CSS/JavaScript with TailwindCSS
  • Styling: TailwindCSS via CDN