HTML代码怎么实现用户反馈_HTML代码用户反馈收集方法与功能改进策略

<form id="feedbackForm" action="/submit-feedback" method="POST">
    <label for="feedbackContent">您的宝贵意见：</label>
    <textarea id="feedbackContent" name="content" rows="5" placeholder="请在这里写下您的反馈..." required></textarea>

    <label for="userEmail">您的邮箱（可选）：</label>
    <input type="email" id="userEmail" name="email" placeholder="方便我们联系您">

    <input type="submit" value="提交反馈">
</form>

<section class="feedback-section">
    <h2>您的反馈对我们很重要！</h2>
    <p>请告诉我们您在使用过程中遇到的问题、建议或任何想法。</p>
    <form id="detailedFeedbackForm" action="/api/submit-feedback" method="POST">
        <div class="form-group">
            <label for="feedbackType">反馈类型：</label>
            <select id="feedbackType" name="type">
                <option value="bug">Bug 报告</option>
                <option value="feature">功能建议</option>
                <option value="general">一般咨询</option>
                <option value="other">其他</option>
            </select>
        </div>

        <div class="form-group">
            <label for="feedbackTitle">主题（可选）：</label>
            <input type="text" id="feedbackTitle" name="title" placeholder="简要描述您的问题或建议">
        </div>

        <div class="form-group">
            <label for="feedbackDescription">详细描述：<span class="required">*</span></label>
            <textarea id="feedbackDescription" name="description" rows="7" placeholder="请尽可能详细地描述，帮助我们更好地理解..." required></textarea>
        </div>

        <div class="form-group">
            <label for="contactEmail">您的邮箱（可选，用于接收回复）：</label>
            <input type="email" id="contactEmail" name="email" placeholder="您的邮箱地址">
        </div>

        <button type="submit">提交反馈</button>
    </form>
</section>

<form id="feedbackForm" action="/api/submit-feedback" method="POST">
    <!-- ... 表单内容 ... -->
    <button type="submit" id="submitBtn">提交反馈</button>
</form>
<div id="feedbackMessage" style="display: none; margin-top: 15px; padding: 10px; border-radius: 5px;"></div>

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('feedbackForm');
    const submitBtn = document.getElementById('submitBtn');
    const feedbackMessage = document.getElementById('feedbackMessage');

    if (form) {
        form.addEventListener('submit', async (event) => {
            event.preventDefault(); // 阻止表单默认提交行为

            // 简单的客户端验证
            const description = document.getElementById('feedbackDescription').value.trim();
            if (!description) {
                feedbackMessage.style.display = 'block';
                feedbackMessage.style.backgroundColor = '#ffe0e0';
                feedbackMessage.style.color = '#d32f2f';
                feedbackMessage.textContent = '请填写您的反馈内容！';
                return; // 停止提交
            }

            submitBtn.disabled = true; // 禁用按钮，防止重复提交
            submitBtn.textContent = '提交中...';
            feedbackMessage.style.display = 'none'; // 隐藏之前的消息

            const formData = new FormData(form); // 获取表单所有数据
            // 或者手动构建JSON数据
            // const data = {
            //     type: formData.get('type'),
            //     title: formData.get('title'),
            //     description: formData.get('description'),
            //     email: formData.get('email')
            // };

            try {
                const response = await fetch(form.action, {
                    method: form.method,
                    body: formData, // 使用FormData可以直接发送表单数据，或者JSON.stringify(data)发送JSON
                    // headers: {
                    //     'Content-Type': 'application/json' // 如果发送JSON数据，需要设置这个头
                    // }
                });

                if (response.ok) {
                    // 提交成功
                    const result = await response.json(); // 假设后端返回JSON
                    feedbackMessage.style.display = 'block';
                    feedbackMessage.style.backgroundColor = '#e8f5e9';
                    feedbackMessage.style.color = '#2e7d32';
                    feedbackMessage.textContent = result.message || '感谢您的反馈！我们已收到。';
                    form.reset(); // 清空表单
                } else {
                    // 提交失败
                    const errorData = await response.json();
                    throw new Error(errorData.message || '提交失败，请稍后再试。');
                }
            } catch (error) {
                feedbackMessage.style.display = 'block';
                feedbackMessage.style.backgroundColor = '#ffe0e0';
                feedbackMessage.style.color = '#d32f2f';
                feedbackMessage.textContent = error.message;
                console.error('Feedback submission error:', error);
            } finally {
                submitBtn.disabled = false; // 重新启用按钮
                submitBtn.textContent = '提交反馈';
            }
        });
    }
});