Enhance email marketing form with required fields and validation logic

assets/js/main.js

@@ -18,3 +18,128 @@ if (flagBox) {
         })
     })
 }
+
+// Form submission functionality
+document.addEventListener('DOMContentLoaded', function() {
+    const form = document.querySelector('.marketing-register-box form');
+    
+    if (form) {
+        form.addEventListener('submit', async function(e) {
+            e.preventDefault();
+            
+            // Get form data
+            const formData = {
+                full_name: form.querySelector("input[name=\"full_name\"]").value.trim(),
+                company_name: form.querySelector("input[name=\"company_name\"]").value.trim(),
+                work_email: form.querySelector("input[name=\"work_email\"]").value.trim(),
+                phone_number: form.querySelector("input[name=\"phone_number\"]").value.trim()
+            };
+            
+            // Validate required fields
+            const errors = [];
+            if (!formData.full_name) errors.push('Full Name is required');
+            if (!formData.company_name) errors.push('Company Name is required');
+            if (!formData.work_email) errors.push('Work Email is required');
+            if (!formData.phone_number) errors.push('Phone Number is required');
+            
+            // Email validation
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (formData.work_email && !emailRegex.test(formData.work_email)) {
+                errors.push('Please enter a valid email address');
+            }
+            
+            if (errors.length > 0) {
+                showMessage(errors.join(', '), 'error');
+                return;
+            }
+            
+            // Show loading state
+            const submitBtn = form.querySelector('input[type="submit"]');
+            const originalValue = submitBtn.value;
+            submitBtn.value = 'Submitting...';
+            submitBtn.disabled = true;
+            
+            try {
+                const response = await fetch('/api/v1/inquiries', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'accept': 'application/json'
+                    },
+                    body: JSON.stringify(formData)
+                });
+                
+                const result = await response.json();
+                
+                if (response.ok) {
+                    // Success
+                    showMessage('Thank you! Your inquiry has been submitted successfully.', 'success');
+                    form.reset();
+                } else {
+                    // Handle API errors
+                    if (response.status === 400) {
+                        showMessage('Bad request - Please check your input data.', 'error');
+                    } else if (response.status === 422) {
+                        const message = result.error?.message || 'Validation error - Please check your data format.';
+                        showMessage(message, 'error');
+                    } else if (response.status === 409 || (result.error && result.error.code === 'DUPLICATE_INQUIRY')) {
+                        showMessage('You already have a pending inquiry with this email address. Please wait for it to be processed before submitting a new one.', 'error');
+                    } else if (response.status === 500) {
+                        showMessage('Internal server error - Please try again later.', 'error');
+                    } else {
+                        showMessage(result.message || 'An error occurred. Please try again.', 'error');
+                    }
+                }
+            } catch (error) {
+                console.error('Network error:', error);
+                showMessage('Network error - Please check your connection and try again.', 'error');
+            } finally {
+                // Reset button state
+                submitBtn.value = originalValue;
+                submitBtn.disabled = false;
+            }
+        });
+    }
+});
+
+// Function to show messages to user
+function showMessage(message, type) {
+    // Remove existing message if any
+    const existingMessage = document.querySelector('.form-message');
+    if (existingMessage) {
+        existingMessage.remove();
+    }
+    
+    // Create new message element
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `form-message ${type}`;
+    messageDiv.textContent = message;
+    
+    // Add styles
+    messageDiv.style.cssText = `
+        padding: 12px 16px;
+        margin: 10px 0;
+        border-radius: 4px;
+        font-weight: 500;
+        text-align: center;
+        ${type === 'success' 
+            ? 'background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb;' 
+            : 'background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;'
+        }
+    `;
+    
+    // Insert message above the form
+    const form = document.querySelector('.marketing-register-box form');
+    if (form) {
+        form.parentNode.insertBefore(messageDiv, form);
+        
+        // Auto-remove success messages after 5 seconds
+        if (type === 'success') {
+            setTimeout(() => {
+                if (messageDiv.parentNode) {
+                    messageDiv.remove();
+                }
+            }, 5000);
+        }
+    }
+}

email-marketing.html

@@ -166,31 +166,31 @@
 
                         <form action="">
                             <div class="input-box">
-                                <label for="">Full Name</label>
+                                <label for="full-name">Full Name</label>
                                 <div>
                                     <!-- <img src="./assets/image/user.svg" alt=""> -->
-                                    <input type="text" placeholder="Input Name">
+                                    <input type="text" id="full-name" name="full_name" placeholder="Input Name" required>
                                 </div>
                             </div>
                             <div class="input-box">
-                                <label for="">Company Name</label>
+                                <label for="company-name">Company Name</label>
                                 <div>
                                     <!-- <img src="./assets/image/Message-2.svg" alt=""> -->
-                                    <input type="text" placeholder="Ravanertebat">
+                                    <input type="text" id="company-name" name="company_name" placeholder="Opplens" required>
                                 </div>
                             </div>
                             <div class="input-box">
-                                <label for="">Work Email</label>
+                                <label for="work-email">Work Email</label>
                                 <div>
                                     <!-- <img src="./assets/image/Calling.svg" alt=""> -->
-                                    <input type="email" placeholder="Sadaf@gmail.com">
+                                    <input type="email" id="work-email" name="work_email" placeholder="info@opplens.com" required>
                                 </div>
                             </div>
                             <div class="input-box">
-                                <label for="">Phone Number</label>
+                                <label for="phone-number">Phone Number</label>
                                 <div>
                                     <!-- <img src="./assets/image/Message-2.svg" alt=""> -->
-                                    <input type="text" placeholder="+1 650 213 7379">
+                                    <input type="tel" id="phone-number" name="phone_number" placeholder="+1 650 213 7379" required>
                                 </div>
                             </div>
                             <div class="input-box submit">