body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }

const form = document.getElementById('campaignForm'); const messageBox = document.getElementById('messageBox'); form.addEventListener('submit', function(event) { // Prevent the form from submitting the default way event.preventDefault(); // Simple validation to check for empty fields const country = document.getElementById('country').value.trim(); const city = document.getElementById('city').value.trim(); const profession = document.getElementById('profession').value.trim(); if (!country || !city || !profession) { showMessage('Please fill out all the fields.', 'bg-red-100 text-red-700'); return; } // Collect selected social media platforms const selectedSocialMedia = []; document.querySelectorAll('input[name="socialMedia[]"]:checked').forEach(checkbox => { selectedSocialMedia.push(checkbox.value); }); // At this point, you would typically send the data to a server or an n8n webhook. // For now, we will just show a success message. showMessage('Form submitted successfully!', 'bg-green-100 text-green-700'); // You can replace this section with your actual API call. // Example of a fetch request: // const formData = { // country: country, // city: city, // profession: profession, // socialMedia: selectedSocialMedia // New field // }; // fetch('YOUR_N8N_WEBHOOK_URL', { // method: 'POST', // headers: { // 'Content-Type': 'application/json', // }, // body: JSON.stringify(formData), // }) // .then(response => response.json()) // .then(data => { // console.log('Success:', data); // showMessage('Form submitted successfully!', 'bg-green-100 text-green-700'); // }) // .catch((error) => { // console.error('Error:', error); // showMessage('An error occurred. Please try again later.', 'bg-red-100 text-red-700'); // }); }); // Function to show a message in the message box function showMessage(message, className) { messageBox.textContent = message; messageBox.className = `${className} mt-4 p-4 text-center rounded-md`; messageBox.style.display = 'block'; }