\n !Contact Form!\n

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

\n\n \n \n Error!! \n

\n\n \n

\n \n Name *\n \n \n

\n\n

\n \n Email *\n \n \n

\n\n

\n \n Message *\n \n \n

\n\n \n Submit Message\n \n \n\n \n

\n Recent Submissions\n

Loading submissions...

\n \n \n\n \n \n",[18,71],"pulls","branches","forks","envVars",{"_186":26,"_188":26},"connections",{"_186":26,"_187":26},"count","unfilledCount","emptyCount",{"_35":257,"_13":222,"_69":216,"_45":-5,"_37":38,"_168":42,"_169":24,"_39":258,"_41":26,"_72":92,"_171":-5,"_73":30,"_172":-5,"_204":259,"_17":260},{"_35":253,"_13":245,"_69":240,"_45":216,"_37":38,"_168":42,"_169":24,"_39":254,"_41":26,"_72":92,"_171":-5,"_73":30,"_172":-5,"_204":255,"_17":256},{"_35":246,"_13":247,"_69":248,"_45":240,"_37":38,"_168":42,"_169":24,"_39":249,"_41":26,"_72":228,"_171":250,"_73":30,"_172":-5,"_204":251,"_17":252},{"_35":237,"_13":238,"_69":239,"_45":240,"_37":38,"_168":42,"_169":24,"_39":241,"_41":26,"_72":228,"_171":242,"_73":30,"_172":-5,"_204":243,"_17":244},{"_35":233,"_13":232,"_69":226,"_45":216,"_37":38,"_168":42,"_169":24,"_39":234,"_41":26,"_72":92,"_171":-5,"_73":30,"_172":-5,"_204":235,"_17":236},{"_35":223,"_13":224,"_69":225,"_45":226,"_37":38,"_168":42,"_169":24,"_39":227,"_41":26,"_72":228,"_171":229,"_73":30,"_172":-5,"_204":230,"_17":231},{"_35":213,"_13":214,"_69":215,"_45":216,"_37":38,"_168":42,"_169":24,"_39":217,"_41":26,"_72":218,"_171":219,"_73":30,"_172":-5,"_204":220,"_17":221},{"_35":167,"_13":18,"_69":91,"_45":-5,"_37":38,"_168":42,"_169":24,"_39":210,"_41":26,"_72":92,"_171":-5,"_73":30,"_172":-5,"_204":211,"_17":212},{"_35":175,"_13":71,"_69":70,"_45":91,"_37":38,"_168":86,"_169":24,"_39":207,"_41":79,"_72":21,"_171":177,"_73":30,"_172":-5,"_204":208,"_17":209},{"_35":199,"_13":200,"_69":201,"_45":-5,"_37":38,"_168":42,"_169":24,"_39":202,"_41":26,"_72":21,"_171":203,"_73":30,"_172":-5,"_204":205,"_17":206},"f45d89b8-7171-11f0-9222-0224a6c84d84","README.md","019876c7-e816-758d-8a16-45f6b81d99ee",["D",1754339469336],"# 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",[],[200],["D",1754339661560],[],[18,71],["D",1754339469336],[197],[18],"f45d77e8-7171-11f0-9222-0224a6c84d84","index.ts","019876c7-e815-7412-b76f-7f75ac053345","019876c7-e815-7412-b76f-8139041cc0b8",["D",1754339469336],"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;",[],[222,214],"backend","f45d7090-7171-11f0-9222-0224a6c84d84","submissions.ts","019876c7-e815-7412-b76f-75a7faf40699","019876c7-e815-7412-b76f-7b8fb4e36ad1",["D",1754339469336],"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;",[],[222,232,224],"routes","f45d76b2-7171-11f0-9222-0224a6c84d84",["D",1754339469336],[194],[222,232],"f45d6c9e-7171-11f0-9222-0224a6c84d84","queries.ts","019876c7-e815-7412-b76f-6ecc7359b540","019876c7-e815-7412-b76f-73154998216d",["D",1754339469336],"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}",[],[222,245,238],"database","f45d6794-7171-11f0-9222-0224a6c84d84","migrations.ts","019876c7-e815-7412-b76f-69cba1a8b182",["D",1754339469336],"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}",[],[222,245,247],"f45d6eec-7171-11f0-9222-0224a6c84d84",["D",1754339469336],[191,192],[222,245],"f45d78f6-7171-11f0-9222-0224a6c84d84",["D",1754339469336],[190,193,195],[222],["D",1754338628214],{"_11":12,"_139":76},{"_11":12,"_135":-5,"_75":76,"_31":74,"_136":137,"_138":30},{"_41":86,"_13":16,"_35":38,"_127":94,"_128":65,"_129":67,"_130":98,"_131":94,"_132":44,"_133":14,"_134":12},"ctx",{"_54":-5,"_159":298,"_299":300,"_301":302,"_303":30,"_304":30,"_305":30,"_306":24,"_307":-5,"_308":-7,"_309":-7,"_310":26,"_311":30,"_312":30,"_313":-5,"_314":30,"_315":30,"_316":30,"_317":-5},"ENV",{"_269":270,"_271":272,"_273":66,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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