Spaces:

SakibAhmed
/

form

Sleeping

App Files Files Community

SakibAhmed commited on Dec 5, 2025

Commit

722108b

verified ·

1 Parent(s): a6f8728

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +36 -33

templates/index.html CHANGED Viewed

@@ -163,7 +163,7 @@
             padding: 15px 20px;
             margin-bottom: 25px;
             border-radius: 8px;
-            display: none;
             font-size: 0.9rem;
             animation: slideIn 0.3s ease-out;
         }
@@ -177,7 +177,9 @@
             color: #721c24;
             border-left: 4px solid #dc3545;
         }
-        .alert.show { display: block; }
         @keyframes slideIn {
             from {
@@ -200,11 +202,17 @@
 </head>
 <body>
     <div class="card">
         <!-- Left Side: General Info -->
         <div class="left-panel">
             <h2>General Information</h2>
             <div id="alertBox" class="alert"></div>
             <form id="leadForm">
@@ -323,73 +331,60 @@
         </div>
     </div>
     <script>
         async function submitData() {
             const form = document.getElementById('leadForm');
             const alertBox = document.getElementById('alertBox');
-            // Reset alert
-            alertBox.className = 'alert';
             alertBox.style.display = 'none';
-            // Validate form
             if (!form.checkValidity()) {
                 showAlert("Please fill in all required fields marked with *", "error");
                 form.reportValidity();
                 return;
             }
-            // Gather form data
             const formData = new FormData(form);
             const data = Object.fromEntries(formData.entries());
-            // UI feedback
             const btn = document.querySelector('.btn-submit');
             const originalText = btn.innerText;
             btn.innerText = "Submitting...";
             btn.disabled = true;
             try {
-                console.log("Sending data:", data); // Debug
                 const response = await fetch('/submit', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify(data)
                 });
-                console.log("Response status:", response.status); // Debug
                 const result = await response.json();
-                console.log("Response data:", result); // Debug
                 if (response.ok) {
-                    // Success!
-                    const successMsg = result.message || "✅ Lead submitted successfully! We'll be in touch soon.";
                     showAlert(successMsg, "success");
-                    // Reset form after success
-                    setTimeout(() => {
-                        form.reset();
-                    }, 500);
-                    // Log for debugging
-                    if (result.data) {
-                        console.log("Lead ID:", result.data.meta?.lead_id);
-                        console.log("Full Response:", result);
-                    }
                 } else {
-                    // Error response
-                    const errorMsg = result.error?.reason || result.message || "❌ Failed to submit lead";
                     showAlert(`Error: ${errorMsg}`, "error");
-                    console.error("Error Response:", result);
                 }
             } catch (error) {
-                // Network/connection error
-                showAlert(`❌ Connection error: ${error.message}. Please check your connection and try again.`, "error");
-                console.error("Network Error:", error);
             } finally {
-                // Always reset button
                 btn.innerText = originalText;
                 btn.disabled = false;
             }
@@ -397,21 +392,29 @@
         function showAlert(message, type) {
             const alertBox = document.getElementById('alertBox');
             alertBox.textContent = message;
             alertBox.className = `alert ${type} show`;
-            // Scroll to alert if not visible
             alertBox.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
             // Auto-hide success messages after 7 seconds
             if (type === 'success') {
                 setTimeout(() => {
                     alertBox.className = 'alert';
                 }, 7000);
             }
         }
-        // Add enter key support
         document.getElementById('leadForm').addEventListener('keypress', function(e) {
             if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') {
                 e.preventDefault();

             padding: 15px 20px;
             margin-bottom: 25px;
             border-radius: 8px;
+            display: none; /* Hidden by default */
             font-size: 0.9rem;
             animation: slideIn 0.3s ease-out;
         }
             color: #721c24;
             border-left: 4px solid #dc3545;
         }
+        .alert.show {
+            display: block; /* Visible when class 'show' is added */
+        }
         @keyframes slideIn {
             from {
 </head>
 <body>
+    <!-- Link to Dashboard for Hugging Face Space -->
+    <div style="position: absolute; top: 20px; right: 20px; z-index: 100;">
+        <a href="/" style="background: white; padding: 10px 20px; border-radius: 20px; text-decoration: none; font-weight: bold; color: #4d4dff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); font-size: 0.9rem;">View CRM Dashboard &rarr;</a>
+    </div>
     <div class="card">
         <!-- Left Side: General Info -->
         <div class="left-panel">
             <h2>General Information</h2>
+            <!-- Alert Box for Success/Error -->
             <div id="alertBox" class="alert"></div>
             <form id="leadForm">
         </div>
     </div>
+    <!-- JavaScript Handling Submission and Alerts -->
     <script>
         async function submitData() {
             const form = document.getElementById('leadForm');
             const alertBox = document.getElementById('alertBox');
+            // 1. Reset Alert State (Important for re-submission)
+            alertBox.className = 'alert';
             alertBox.style.display = 'none';
+            // 2. Client-side Validation
             if (!form.checkValidity()) {
                 showAlert("Please fill in all required fields marked with *", "error");
                 form.reportValidity();
                 return;
             }
+            // 3. Gather Form Data
             const formData = new FormData(form);
             const data = Object.fromEntries(formData.entries());
+            // 4. UI Feedback (Disable Button)
             const btn = document.querySelector('.btn-submit');
             const originalText = btn.innerText;
             btn.innerText = "Submitting...";
             btn.disabled = true;
             try {
+                // 5. Send POST Request
                 const response = await fetch('/submit', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify(data)
                 });
                 const result = await response.json();
                 if (response.ok) {
+                    // --- SUCCESS ---
+                    const successMsg = result.message || "✅ Success! Lead submitted successfully.";
                     showAlert(successMsg, "success");
+                    // Reset form fields
+                    form.reset();
                 } else {
+                    // --- SERVER/n8n ERROR ---
+                    const errorMsg = result.error?.reason || result.message || "❌ Submission failed";
                     showAlert(`Error: ${errorMsg}`, "error");
                 }
             } catch (error) {
+                // --- NETWORK ERROR ---
+                showAlert(`❌ Connection Error: ${error.message}`, "error");
             } finally {
+                // 6. Reset Button State
                 btn.innerText = originalText;
                 btn.disabled = false;
             }
         function showAlert(message, type) {
             const alertBox = document.getElementById('alertBox');
+            // Set message text
             alertBox.textContent = message;
+            // Apply CSS classes (This triggers the visible styling)
             alertBox.className = `alert ${type} show`;
+            // Ensure element is visible (Overrides any inline 'display: none')
+            alertBox.style.display = 'block';
+            // Scroll user to the message
             alertBox.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
             // Auto-hide success messages after 7 seconds
             if (type === 'success') {
                 setTimeout(() => {
+                    alertBox.style.display = 'none'; // Clean hide
                     alertBox.className = 'alert';
                 }, 7000);
             }
         }
+        // Allow submitting via Enter key
         document.getElementById('leadForm').addEventListener('keypress', function(e) {
             if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') {
                 e.preventDefault();