Contact Form

\n \n \n

\n Success! Your message has been submitted successfully.\n

\n\n \n

\n Error! \n

\n\n \n \n\n \n

Recent Submissions

Loading submissions...

\n\n \n\n",[18,64],"pulls","branches",2,"forks","envVars",{"_162":26,"_164":26},"connections",{"_162":26,"_163":26},"count","unfilledCount","emptyCount",{"_33":235,"_13":199,"_62":192,"_43":-5,"_35":36,"_143":194,"_144":24,"_37":236,"_39":26,"_65":71,"_146":-5,"_66":30,"_147":-5,"_181":237,"_17":238},{"_33":231,"_13":223,"_62":218,"_43":192,"_35":36,"_143":194,"_144":24,"_37":232,"_39":26,"_65":71,"_146":-5,"_66":30,"_147":-5,"_181":233,"_17":234},{"_33":224,"_13":225,"_62":226,"_43":218,"_35":36,"_143":194,"_144":24,"_37":227,"_39":26,"_65":206,"_146":228,"_66":30,"_147":-5,"_181":229,"_17":230},{"_33":215,"_13":216,"_62":217,"_43":218,"_35":36,"_143":156,"_144":24,"_37":219,"_39":26,"_65":206,"_146":220,"_66":30,"_147":-5,"_181":221,"_17":222},{"_33":211,"_13":210,"_62":203,"_43":192,"_35":36,"_143":204,"_144":24,"_37":212,"_39":26,"_65":71,"_146":-5,"_66":30,"_147":-5,"_181":213,"_17":214},{"_33":200,"_13":201,"_62":202,"_43":203,"_35":36,"_143":204,"_144":24,"_37":205,"_39":26,"_65":206,"_146":207,"_66":30,"_147":-5,"_181":208,"_17":209},{"_33":190,"_13":191,"_62":83,"_43":192,"_35":36,"_143":107,"_144":24,"_37":193,"_39":194,"_65":195,"_146":196,"_66":30,"_147":-5,"_181":197,"_17":198},{"_33":142,"_13":18,"_62":70,"_43":-5,"_35":36,"_143":40,"_144":24,"_37":187,"_39":26,"_65":71,"_146":-5,"_66":30,"_147":-5,"_181":188,"_17":189},{"_33":150,"_13":64,"_62":63,"_43":70,"_35":36,"_143":40,"_144":24,"_37":184,"_39":26,"_65":21,"_146":152,"_66":30,"_147":-5,"_181":185,"_17":186},{"_33":175,"_13":176,"_62":177,"_43":-5,"_35":36,"_143":178,"_144":24,"_37":179,"_39":26,"_65":21,"_146":180,"_66":30,"_147":-5,"_181":182,"_17":183},"3251db40-7170-11f0-9b62-0224a6c84d84","README.md","3251dc1c-7170-11f0-9b62-0224a6c84d84",6,["D",1754338714289],"# Contact Form Application\n\nA simple contact form application that collects user submissions and stores them in SQLite database.\n\n## Features\n\n- **Contact Form**: Clean, responsive form with name, email, and message fields\n- **Form Validation**: Client-side and server-side validation\n- **SQL Storage**: All submissions are stored in SQLite database\n- **Submissions Display**: View all recent submissions on the same page\n- **Real-time Updates**: Form submissions update the display immediately\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema and table creation\n│ │ └── queries.ts # Database query functions\n│ ├── routes/\n│ │ └── submissions.ts # API routes for form submissions\n│ └── index.ts # Main Hono app entry point\n├── frontend/\n│ └── index.html # Contact form UI\n└── README.md\n```\n\n## API Endpoints\n\n- `GET /api/submissions` - Retrieve all form submissions\n- `POST /api/submissions` - Create a new form submission\n\n## Database Schema\n\nThe `form_submissions_1` table contains:\n- `id` (INTEGER PRIMARY KEY) - Auto-incrementing submission ID\n- `name` (TEXT NOT NULL) - Submitter's name\n- `email` (TEXT NOT NULL) - Submitter's email address\n- `message` (TEXT NOT NULL) - The message content\n- `created_at` (DATETIME) - Timestamp of submission\n\n## Usage\n\n1. Visit the application URL\n2. Fill out the contact form with your name, email, and message\n3. Click \"Submit Message\"\n4. View your submission appear in the \"Recent Submissions\" section below the form\n\n## Technologies Used\n\n- **Backend**: Hono framework with TypeScript\n- **Database**: SQLite via Val Town's sqlite utility\n- **Frontend**: Vanilla HTML/CSS/JavaScript with TailwindCSS\n- **Styling**: TailwindCSS via CDN","children",[],[176],["D",1754338703865],[],[18,64],["D",1754338703865],[173],[18],"35690ce0-7170-11f0-9221-0224a6c84d84","index.ts","00a8993b-4c73-4008-a568-752cba42ca1f",["D",1754338719472],1,"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { initializeDatabase } from \"./database/migrations.ts\";\nimport submissionsRouter from \"./routes/submissions.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// Initialize database on startup\nawait initializeDatabase();\n\n// API routes\napp.route(\"/api/submissions\", submissionsRouter);\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve main page\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[199,191],"backend","1933748e-7170-11f0-b3c3-0224a6c84d84","submissions.ts","1933756a-7170-11f0-b3c3-0224a6c84d84","fb572a45-43f8-4d2b-b758-c55b6db1baa8",3,["D",1754338672141],"script","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { createSubmission, getAllSubmissions } from \"../database/queries.ts\";\n\nconst app = new Hono();\n\n// Get all submissions\napp.get(\"/\", async (c) => {\n try {\n const submissions = await getAllSubmissions();\n return c.json(submissions);\n } catch (error) {\n console.error(\"Error fetching submissions:\", error);\n return c.json({ error: \"Failed to fetch submissions\" }, 500);\n }\n});\n\n// Create new submission\napp.post(\"/\", async (c) => {\n try {\n const body = await c.req.json();\n \n // Validate required fields\n if (!body.name || !body.email || !body.message) {\n return c.json({ error: \"Name, email, and message are required\" }, 400);\n }\n\n // Basic email validation\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n if (!emailRegex.test(body.email)) {\n return c.json({ error: \"Invalid email format\" }, 400);\n }\n\n const submission = await createSubmission({\n name: body.name.trim(),\n email: body.email.trim().toLowerCase(),\n message: body.message.trim()\n });\n\n return c.json(submission, 201);\n } catch (error) {\n console.error(\"Error creating submission:\", error);\n return c.json({ error: \"Failed to create submission\" }, 500);\n }\n});\n\nexport default app;",[],[199,210,201],"routes","19337d30-7170-11f0-b3c3-0224a6c84d84",["D",1754338672141],[170],[199,210],"14a21d08-7170-11f0-8696-0224a6c84d84","queries.ts","14a21d9e-7170-11f0-8696-0224a6c84d84","0f1a919d-c928-4f3a-9f31-c60694ee8127",["D",1754338664485],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { TABLE_NAME, FormSubmission } from \"./migrations.ts\";\n\nexport async function createSubmission(submission: Omit): Promise {\n const result = await sqlite.execute(\n `INSERT INTO ${TABLE_NAME} (name, email, message) VALUES (?, ?, ?) RETURNING *`,\n [submission.name, submission.email, submission.message]\n );\n \n return result.rows[0] as FormSubmission;\n}\n\nexport async function getAllSubmissions(): Promise {\n const result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} ORDER BY created_at DESC`);\n return result.rows as FormSubmission[];\n}\n\nexport async function getSubmissionById(id: number): Promise {\n const result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [id]);\n return result.rows[0] as FormSubmission || null;\n}",[],[199,223,216],"database","1139a7e4-7170-11f0-afe7-0224a6c84d84","migrations.ts","1139a8c0-7170-11f0-afe7-0224a6c84d84",["D",1754338658766],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\nexport const TABLE_NAME = 'form_submissions_1';\n\nexport interface FormSubmission {\n id?: number;\n name: string;\n email: string;\n message: string;\n created_at?: string;\n}\n\nexport async function initializeDatabase() {\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n email TEXT NOT NULL,\n message TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )`);\n}",[],[199,223,225],"1139b8d8-7170-11f0-afe7-0224a6c84d84",["D",1754338658766],[167,168],[199,223],"1139b626-7170-11f0-afe7-0224a6c84d84",["D",1754338658766],[166,169,171],[199],["D",1754338628214],{"_11":12,"_120":69},{"_11":12,"_116":-5,"_68":69,"_31":67,"_117":118,"_119":30},{"_39":107,"_13":16,"_33":36,"_108":73,"_109":-5,"_110":-5,"_111":-5,"_112":-5,"_113":-5,"_114":14,"_115":12},"ctx",{"_52":-5,"_139":276,"_277":278,"_279":280,"_281":30,"_282":30,"_283":30,"_284":24,"_285":-5,"_286":-7,"_287":-7,"_288":26,"_289":30,"_290":30,"_291":-5,"_292":30,"_293":30,"_294":30,"_295":-5},"ENV",{"_247":248,"_249":250,"_251":16,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","a3e067d4463eea85f6334f8e583e8516ae58c4f6","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · frontend