Data Submission Form

// JavaScript (script.js) document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('dataForm'); const responseMessage = document.getElementById('responseMessage'); form.addEventListener('submit', async function(e) { e.preventDefault(); // Get form data const formData = { name: document.getElementById('name').value, email: document.getElementById('email').value, message: document.getElementById('message').value, timestamp: new Date().toISOString() }; try { // Send data to serverless function const response = await fetch('/.netlify/functions/submit-form', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }); const result = await response.json(); if (response.ok) { responseMessage.textContent = 'Data submitted successfully!'; responseMessage.style.color = 'green'; form.reset(); } else { throw new Error(result.error || 'Error submitting data'); } } catch (error) { responseMessage.textContent = error.message; responseMessage.style.color = 'red'; console.error('Error:', error); } }); }); // Serverless Function (submit-form.js) for Netlify // Located in netlify/functions/submit-form.js const { createClient } = require('@supabase/supabase-js'); // Supabase credentials const supabaseUrl = process.env.SUPABASE_URL; const supabaseKey = process.env.SUPABASE_SERVICE_KEY; exports.handler = async (event, context) => { // Only allow POST requests if (event.httpMethod !== 'POST') { return { statusCode: 405, body: JSON.stringify({ error: 'Method Not Allowed' }) }; } try { // Parse the incoming data const data = JSON.parse(event.body); // Validate the data if (!data.name || !data.email || !data.message) { return { statusCode: 400, body: JSON.stringify({ error: 'Missing required fields' }) }; } // Initialize Supabase client const supabase = createClient(supabaseUrl, supabaseKey); // Insert data into the database const { data: insertData, error } = await supabase .from('form_submissions') .insert([ { name: data.name, email: data.email, message: data.message, created_at: new Date().toISOString() } ]); if (error) throw error; return { statusCode: 200, body: JSON.stringify({ message: 'Data submitted successfully', id: insertData?.[0]?.id }) }; } catch (error) { console.error('Function error:', error); return { statusCode: 500, body: JSON.stringify({ error: 'Error submitting data to database' }) }; } };