Files
floorithardwoodfloors.com/assets/js/form.js
T

83 lines
3.3 KiB
JavaScript
Executable File

document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('contactForm');
const formLoadedAtInput = document.getElementById('form_loaded_at');
const formStatusDiv = document.getElementById('formStatus');
// Set form_loaded_at to current timestamp in milliseconds
if (formLoadedAtInput) {
formLoadedAtInput.value = Date.now().toString();
}
// Form submit handler
if (form) {
form.addEventListener('submit', async function(e) {
e.preventDefault();
formStatusDiv.innerHTML = '';
formStatusDiv.className = '';
const name = form.elements['name']?.value.trim();
const email = form.elements['email']?.value.trim();
const address = form.elements['address']?.value.trim();
if (!name || !email || !address) {
formStatusDiv.className = 'form-status form-status--error';
formStatusDiv.innerHTML = '<p>Please fill in all required fields.</p>';
return;
}
if (!email.includes('@')) {
formStatusDiv.className = 'form-status form-status--error';
formStatusDiv.innerHTML = '<p>Please enter a valid email address.</p>';
return;
}
if (form.elements['website']?.value) return;
// Get altcha payload -- web component writes a hidden input[name=altcha] into the form
const altchaInput = form.querySelector('input[name="altcha"]');
const altchaPayload = altchaInput ? (altchaInput.value || '') : '';
if (!altchaPayload) {
formStatusDiv.className = 'form-status form-status--error';
formStatusDiv.innerHTML = '<p>Spam check not ready. Please wait a moment and try again.</p>';
return;
}
const payload = {
name: name,
email: email,
phone: form.elements['phone']?.value.trim() || '',
address: address,
sqft: form.elements['sqft']?.value.trim() || '',
message: form.elements['message']?.value.trim() || '',
website: form.elements['website']?.value || '',
form_loaded_at: form.elements['form_loaded_at']?.value || '',
altcha: altchaPayload
};
// POST to /contact/
try {
const response = await fetch('/contact/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
});
const data = await response.json();
if (data.ok) {
window.location.href = '/thank-you/';
} else {
formStatusDiv.className = 'form-status form-status--error';
formStatusDiv.innerHTML = '<p>' + (data.error || 'An error occurred. Please try again.') + '</p>';
}
} catch (err) {
formStatusDiv.className = 'form-status form-status--error';
formStatusDiv.innerHTML = '<p>Network error. Please try again.</p>';
}
});
}
});