Update index.html

index.html

@@ -101,6 +101,68 @@
             <p class="mt-2 text-sm">We'll be in touch soon!</p>
         </div>
     </div>
+  
+    <meta charset="UTF-8">
+
+    <h2>Submit Your Information</h2>
+    <form id="dataForm">
+        <label for="name">Name:</label><br>
+        <input type="text" id="name" name="name" required><br><br>
+
+        <label for="email">Email:</label><br>
+        <input type="email" id="email" name="email" required><br><br>
+
+        <input type="hidden" id="uniqueId" name="uniqueId">
+        <button type="submit">Submit</button>
+    </form>
+
+    <p id="responseMessage"></p>
+
+    <script>
+        // PASTE YOUR WORKER URL HERE
+        const WORKER_URL = 'https://contact-form-api.your-name.workers.dev';
+
+        // Function to generate a simple unique ID
+        function generateUniqueId() {
+            return 'uid-' + Date.now() + '-' + Math.random().toString(36).substring(2, 9);
+        }
+
+        // Set the unique ID when the page loads
+        document.getElementById('uniqueId').value = generateUniqueId();
+
+        // Listen for the form submission
+        document.getElementById('dataForm').addEventListener('submit', async (event) => {
+            event.preventDefault(); // Stop the page from reloading
+
+            const form = event.target;
+            const name = form.elements.name.value;
+            const email = form.elements.email.value;
+            const uniqueId = form.elements.uniqueId.value;
+            const messageElement = document.getElementById('responseMessage');
+
+            messageElement.textContent = 'Submitting...'; // Provide feedback
+
+            try {
+                const response = await fetch(WORKER_URL, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ name, email, uniqueId }),
+                });
+
+                const responseText = await response.text();
+                messageElement.textContent = responseText;
+
+                if (response.ok) {
+                    form.reset(); // Clear the form on success
+                    document.getElementById('uniqueId').value = generateUniqueId(); // Set a new ID
+                }
+            } catch (error) {
+                messageElement.textContent = `A network error occurred. Please try again.`;
+            }
+        });
+    </script>
 
     <script>
         // Panel toggle logic