阻止Contact Form 7刷新表单域

<!-- 在WordPress中使用Contact Form 7的表单标记 -->
<form id="contact-form" action="/submit-form" method="post">
    <!-- 表单字段 -->
    [text your-name placeholder "Your Name"]
    [email your-email placeholder "Your Email"]
    [textarea your-message placeholder "Your Message"]
    [submit "Send"]
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var form = document.getElementById('contact-form');
    form.addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止默认的表单提交行为

        var formData = new FormData(form);

        fetch(form.action, {
            method: form.method,
            body: new URLSearchParams(formData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Form submitted successfully!');
                form.reset(); // 清空表单字段
            } else {
                alert('There was an error submitting the form.');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('There was an error submitting the form.');
        });
    });
});
</script>