<div class="contact-form">
    <form id="contactForm">
        <div class="form-group">
            <label for="name">您的姓名</label>
            <input type="text" id="name" class="form-control" name="name" required>
        </div>
        <div class="form-group">
              <label for="email">电子邮箱</label>
              <input type="email" id="email" class="form-control" name="email" required>
        </div>
        <div class="form-group">
              <label for="subject">主题</label>
              <input type="text" id="subject" class="form-control" name="subject" required>
        </div>
        <div class="form-group">
              <label for="message">您的需求</label>
              <textarea id="message" class="form-control" name="message" required></textarea>
        </div>
        <button type="submit" class="cta-button">发送消息</button>
    </form>
</div>

<script>
        const form = document.getElementById("contactForm");
        form.addEventListener("submit", formSubmit);
    
        function formSubmit(e) {
            e.preventDefault();
            const formData = new FormData(e.target);
    
            fetch("https://formsubmit.co/ajax/[email protected]", {
                method: "POST",
                body: formData,
                headers: {
                    "Accept": "application/json",
                },
            })
            .then(response => {
                if (response.ok) {
                // 请求成功后执行
                alert('消息已发送！我会尽快回复您。');
                this.reset(); // 重置表单
                } else {
                throw new Error('发送失败');
                }
            })
            .catch(error => console.log(error))
        }
</script>