Add Live Site integration, Phone/Subject fields, and origin tracking

public/dashboard.html

@@ -183,8 +183,13 @@
             <span class="submission-name">\${data.name}</span> &middot; 
             <a href="mailto:\${data.email}" class="submission-email">\${data.email}</a>
           </div>
-          <div>\${date}</div>
+          <div>
+            <span style="background:#e0e7ff; color:#3730a3; padding:2px 6px; border-radius:4px; font-size:12px; margin-right:8px;">\${data.origin}</span>
+            \${date}
+          </div>
         </div>
+        \${data.phone ? \`<div style="font-size:13px; color:#666; margin-top:4px;">&#128222; \${data.phone}</div>\` : ''}
+        \${data.subject ? \`<div style="font-weight:600; margin-top:12px; font-size:15px;">Subject: \${data.subject}</div>\` : ''}
         <div class="submission-message">\${data.message.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</div>
       `;
 

public/live-site-integration.js

@@ -0,0 +1,113 @@
+(function () {
+    // ---------------------------------------------------------
+    // WALLAPI LIVE SITE INTEGRATION SCRIPT
+    // Include this file on your live site (e.g. contact.html) 
+    // to hijack the existing forms and send them to the HF API.
+    // ---------------------------------------------------------
+
+    // 1. SET YOUR HUGGING FACE API URL HERE
+    const API_URL = 'https://acecalisto3-wallapi.hf.space/api/submit';
+
+    document.addEventListener('DOMContentLoaded', () => {
+
+        // Find all forms on the page that we want to hijack
+        // You might need to adjust this selector based on your exact HTML.
+        // The curl output showed: <form data-validate>
+        const forms = document.querySelectorAll('form[data-validate], .contact-form form');
+
+        console.log(`[WallAPI Integration] Found ${forms.length} forms to hook into.`);
+
+        forms.forEach(form => {
+            // Find the submit button inside this specific form
+            const submitBtn = form.querySelector('button[type="submit"], input[type="submit"]');
+
+            // Create a status message container if one doesn't exist
+            let statusDiv = form.querySelector('.wallapi-live-status');
+            if (!statusDiv) {
+                statusDiv = document.createElement('div');
+                statusDiv.className = 'wallapi-live-status';
+                statusDiv.style.marginTop = '15px';
+                statusDiv.style.padding = '10px';
+                statusDiv.style.borderRadius = '6px';
+                statusDiv.style.display = 'none';
+                form.appendChild(statusDiv);
+            }
+
+            form.addEventListener('submit', async (e) => {
+                e.preventDefault();
+
+                // Disable button so they don't click twice
+                if (submitBtn) submitBtn.disabled = true;
+                const originalBtnText = submitBtn ? (submitBtn.textContent || submitBtn.value) : '';
+                if (submitBtn) {
+                    if (submitBtn.tagName === 'INPUT') submitBtn.value = 'Sending...';
+                    else submitBtn.textContent = 'Sending...';
+                }
+
+                // Gather data from the form
+                // Based on your HTML: id="name", id="email", id="phone", id="subject"
+                // We use document.getElementById or form.querySelector to be safe.
+
+                const getName = () => form.querySelector('[name="name"]')?.value || '';
+                const getEmail = () => form.querySelector('[name="email"]')?.value || '';
+                const getPhone = () => form.querySelector('[name="phone"]')?.value || '';
+                const getSubject = () => form.querySelector('[name="subject"]')?.value || '';
+
+                // For the message, usually it's a textarea named 'message' or 'comments'
+                const getMessage = () => {
+                    const msgEl = form.querySelector('textarea[name="message"], textarea[name="comments"]');
+                    return msgEl ? msgEl.value : 'No message provided.';
+                };
+
+                const formData = {
+                    name: getName(),
+                    email: getEmail(),
+                    phone: getPhone(),
+                    subject: getSubject(),
+                    message: getMessage(),
+                    origin: 'Live Website: ' + window.location.hostname
+                };
+
+                try {
+                    const response = await fetch(API_URL, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(formData)
+                    });
+
+                    const data = await response.json();
+
+                    statusDiv.style.display = 'block';
+                    if (response.ok) {
+                        statusDiv.textContent = 'Message sent successfully!';
+                        statusDiv.style.backgroundColor = '#d1fae5';
+                        statusDiv.style.color = '#065f46';
+                        statusDiv.style.border = '1px solid #10b981';
+                        // form.reset(); // Optional: reset form fields after success
+                    } else {
+                        statusDiv.textContent = data.error || 'Server error occurred.';
+                        statusDiv.style.backgroundColor = '#fee2e2';
+                        statusDiv.style.color = '#b91c1c';
+                        statusDiv.style.border = '1px solid #ef4444';
+                    }
+                } catch (err) {
+                    console.error('[WallAPI Integration] Submit error:', err);
+                    statusDiv.style.display = 'block';
+                    statusDiv.textContent = 'Network error. Please try again later.';
+                    statusDiv.style.backgroundColor = '#fee2e2';
+                    statusDiv.style.color = '#b91c1c';
+                    statusDiv.style.border = '1px solid #ef4444';
+                } finally {
+                    // Re-enable button
+                    if (submitBtn) {
+                        submitBtn.disabled = false;
+                        if (submitBtn.tagName === 'INPUT') submitBtn.value = originalBtnText;
+                        else submitBtn.textContent = originalBtnText;
+                    }
+                }
+            });
+        });
+    });
+})();

server.js

@@ -59,7 +59,7 @@ const spreadsheetId = process.env.GOOGLE_SHEET_ID;
 // API Endpoint to receive form submissions
 app.post('/api/submit', async (req, res) => {
   try {
-    const { name, email, message } = req.body;
+    const { name, email, message, phone, subject, origin } = req.body;
 
     if (!name || !email || !message) {
       return res.status(400).json({ error: 'Name, email, and message are required fields.' });
@@ -73,13 +73,12 @@ app.post('/api/submit', async (req, res) => {
     const auth = await getAuth();
     const sheets = google.sheets({ version: 'v4', auth });
 
-    // Assuming the first sheet is where data goes, and headers are in Row 1.
-    // We are going to append to Columns A to D.
-    // Wait, the user might not have set up headers, so we just append values.
+    // Assuming the first sheet is where data goes.
+    // We are going to append to Columns A to G (Timestamp, Name, Email, Message, Phone, Subject, Origin).
     const TIMESTAMP = new Date().toISOString();
 
     // The range specifies where to append. A simple 'Sheet1' usually works,
-    // or just the spreadsheet name. Let's use 'Sheet1!A:D' or just 'A:D'
+    // or just the spreadsheet name. Let's use 'Sheet1!A:G' or just 'A:G'
     const range = 'Sheet1'; // Default sheet name in most English locales
 
     const response = await sheets.spreadsheets.values.append({
@@ -87,7 +86,15 @@ app.post('/api/submit', async (req, res) => {
       range,
       valueInputOption: 'USER_ENTERED',
       requestBody: {
-        values: [[TIMESTAMP, name, email, message]],
+        values: [[
+          TIMESTAMP,
+          name,
+          email,
+          message,
+          phone || '',
+          subject || '',
+          origin || 'Hugging Face Widget'
+        ]],
       },
     });
 
@@ -98,7 +105,10 @@ app.post('/api/submit', async (req, res) => {
       timestamp: TIMESTAMP,
       name,
       email,
-      message
+      message,
+      phone: phone || '',
+      subject: subject || '',
+      origin: origin || 'Hugging Face Widget'
     });
 
     return res.status(200).json({ success: true, message: 'Form submitted successfully!' });