如何为submit.php输出的联系表单提示文本添加CSS样式

要实现成功/错误提示文本的居中显示和颜色修改，你需要从CSS样式定义和前端JS处理返回结果两方面入手，具体步骤如下：

1. 添加CSS样式 #

在你的样式文件（或页面的<style>标签）中添加以下代码，给提示容器设置居中，并为成功、错误状态分别定义颜色：

#responseMessage {
  text-align: center;
  margin-bottom: 16px; /* 与表单保持间距 */
  padding: 8px 0;
  font-weight: 500;
}

/* 成功提示样式 */
.response-success {
  color: #27ae60; /* 绿色，可根据需求调整 */
}

/* 错误提示样式 */
.response-error {
  color: #e74c3c; /* 红色，可根据需求调整 */
}

2. 编写前端AJAX提交逻辑 #

因为你的表单是单页网站的一部分，需要用AJAX异步提交表单，避免页面刷新，同时将返回的提示文本插入到#responseMessage容器中，并添加对应的样式类。在页面底部添加以下原生JS代码：

// 获取表单元素
const contactForm = document.getElementById('contactForm');

contactForm.addEventListener('submit', function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  // 收集表单数据
  const formData = new FormData(this);
  
  // 发送请求到submit.php
  fetch('submit.php', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    // 确保返回的是JSON格式
    if (!response.ok) throw new Error('请求失败');
    return response.json();
  })
  .then(data => {
    const responseDiv = document.getElementById('responseMessage');
    
    // 更新提示文本
    responseDiv.textContent = data.message;
    
    // 重置样式类并添加对应状态类
    responseDiv.classList.remove('response-success', 'response-error');
    responseDiv.classList.add(data.status === 'success' ? 'response-success' : 'response-error');
    
    // 可选：成功提交后清空表单
    if (data.status === 'success') {
      contactForm.reset();
    }
  })
  .catch(error => {
    const responseDiv = document.getElementById('responseMessage');
    responseDiv.textContent = '提交失败，请稍后重试';
    responseDiv.classList.add('response-error');
  });
});

3. 确保submit.php输出纯净JSON #

检查你的submit.php文件，确保在echo json_encode(...)之前没有任何额外输出（比如空格、HTML注释、其他echo语句），否则会导致前端JSON解析失败。当前你提供的代码部分是正确的，只需保持这一点即可。

内容的提问来源于stack exchange，提问作者tosalet