document.getElementById('contact-form').addEventListener('submit', function(event) {
    event.preventDefault();

    const form = event.target;
    const formData = new FormData(form);
    const formStatus = document.getElementById('form-status');

    fetch('/contact_handler.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            form.reset();
            formStatus.innerHTML = '<div class="alert alert-success">' + data.message + '</div>';
        } else {
            formStatus.innerHTML = '<div class="alert alert-danger">' + data.error + '</div>';
        }
    })
    .catch(error => {
        formStatus.innerHTML = '<div class="alert alert-danger">An error occurred. Please try again later.</div>';
    });
});