`;
}
// Setup event listeners voor de floating form
function setupFloatingFormEvents() {
const floatingButton = document.getElementById('gen4-floating-button');
const floatingContainer = document.getElementById('gen4-floating-container');
const closeButton = document.getElementById('gen4-close-button');
if (floatingButton && floatingContainer && closeButton) {
// Open het formulier wanneer op de button wordt geklikt
floatingButton.addEventListener('click', function() {
floatingContainer.classList.add('visible');
});
// Sluit het formulier wanneer op de sluit-knop wordt geklikt
closeButton.addEventListener('click', function() {
floatingContainer.classList.remove('visible');
});
// Sluit het formulier wanneer buiten het formulier wordt geklikt
document.addEventListener('click', function(event) {
if (floatingContainer.classList.contains('visible') &&
!floatingContainer.contains(event.target) &&
!floatingButton.contains(event.target)) {
floatingContainer.classList.remove('visible');
}
});
}
}
// Voeg validatie toe aan het formulier
function setupFormValidation(form, formConfig) {
// Check of validatie enabled is
if (!formConfig.validation || !formConfig.validation.enabled) {
return;
}
// Validatie voor email matching
const emailField = form.querySelector('[name="email"]');
const emailConfirmField = form.querySelector('[name="email_confirm"]');
if (emailField && emailConfirmField) {
// Valideer bij input in confirm veld
emailConfirmField.addEventListener('input', function() {
validateEmailMatch(emailField, emailConfirmField, formConfig);
});
// Valideer ook wanneer het originele e-mailveld verandert
emailField.addEventListener('input', function() {
if (emailConfirmField.value) {
validateEmailMatch(emailField, emailConfirmField, formConfig);
}
});
}
}
// Valideer of e-mailadressen overeenkomen
function validateEmailMatch(emailField, emailConfirmField, formConfig) {
const errorElement = document.getElementById(`error-${emailConfirmField.name}`);
if (emailField.value !== emailConfirmField.value) {
emailConfirmField.classList.add('error');
if (errorElement) {
errorElement.textContent = formConfig.validation.messages.email_mismatch || 'De e-mailadressen komen niet overeen.';
errorElement.classList.add('visible');
}
return false;
} else {
emailConfirmField.classList.remove('error');
if (errorElement) {
errorElement.classList.remove('visible');
}
return true;
}
}
async function fetchFormConfig(clientId) {
// Haal de HTML en CSS configuratie op van de server
const response = await fetch(`https://hzg.gen4.nl/webhook/form-config?client=${clientId}`);
if (!response.ok) {
throw new Error('Kon de formulier configuratie niet laden');
}
return response.json();
}
function setupFormSubmission(clientId, formConfig) {
const form = document.querySelector('#gen4-contact-form');
const messageDiv = document.querySelector('#gen4-form-message');
if (!form || !messageDiv) {
console.error('Formulier elementen niet gevonden');
return;
}
form.addEventListener('submit', function(e) {
e.preventDefault();
// Valideer het formulier eerst als validatie ingeschakeld is
if (formConfig.validation && formConfig.validation.enabled) {
// Check e-mail matching als beide velden bestaan
const emailField = form.querySelector('[name="email"]');
const emailConfirmField = form.querySelector('[name="email_confirm"]');
if (emailField && emailConfirmField) {
if (!validateEmailMatch(emailField, emailConfirmField, formConfig)) {
return; // Stop versturen als e-mailadressen niet matchen
}
}
}
// Verzamel alle formuliervelden (werkt met dynamische velden)
const formData = {
clientId: clientId,
timestamp: new Date().toISOString(),
origin: encodeURIComponent(window.location.origin)
};
// Voeg alle form velden toe aan formData
Array.from(form.elements).forEach(element => {
if (element.name && element.name !== 'submit' && element.name !== 'email_confirm') {
// Bevestigingsvelden (zoals email_confirm) uitsluiten van verzending
// Speciale behandeling voor checkboxes
if (element.type === 'checkbox') {
formData[element.name] = element.checked;
}
// Speciale behandeling voor radio buttons
else if (element.type === 'radio') {
if (element.checked) {
formData[element.name] = element.value;
}
}
// Normale velden
else {
formData[element.name] = element.value;
}
}
});
// Verzend data naar n8n webhook
fetch('https://hzg.gen4.nl/webhook/form-submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
if (!response.ok) {
throw new Error('Netwerkrespons was niet OK');
}
return response.json();
})
.then(data => {
// Toon succesbericht
messageDiv.textContent = data.message || 'Bedankt! Je bericht is succesvol verzonden.';
messageDiv.className = 'gen4-form-message success';
form.reset();
// Als het een floating form is, sluit het automatisch na enkele seconden
if (formConfig.floating && formConfig.floating.enabled) {
setTimeout(function() {
const floatingContainer = document.getElementById('gen4-floating-container');
if (floatingContainer && floatingContainer.classList.contains('visible')) {
floatingContainer.classList.remove('visible');
}
}, 3000); // Sluit na 3 seconden
}
})
.catch(error => {
// Toon foutmelding
messageDiv.textContent = 'Er is een fout opgetreden bij het verzenden van je bericht. Probeer het later nog eens.';
messageDiv.className = 'gen4-form-message error';
console.error('Fout:', error);
});
});
}
})();