联系表单提交按钮显示邮件发送状态的实现需求

这是个很常见的表单交互需求，我来给你一套完整的实现方案，完全贴合你要的文本切换流程：SUBMIT → SUBMITTING → SUCCESS/ERROR TRY AGAIN

1. 基础HTML结构 #

先搭好表单的基本框架，给按钮加个ID方便JS操作：

<form id="contactForm">
  <input 
    type="email" 
    id="userEmail" 
    required 
    placeholder="Your Email Address"
    class="form-input"
  >
  <textarea 
    id="userMessage" 
    required 
    placeholder="Your Message"
    class="form-input"
    rows="5"
  ></textarea>
  <!-- 初始状态按钮文本为SUBMIT -->
  <button type="submit" id="submitBtn" class="submit-btn">SUBMIT</button>
</form>

2. JavaScript 核心逻辑 #

用原生JS实现，逻辑清晰不依赖框架，完全覆盖你的需求：

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

// 监听表单提交事件
contactForm.addEventListener('submit', async (e) => {
  // 阻止浏览器默认的表单跳转行为
  e.preventDefault();

  // --- 第一步：前端验证（可根据需求扩展） ---
  const email = document.getElementById('userEmail').value.trim();
  const message = document.getElementById('userMessage').value.trim();
  
  // 邮箱格式验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    alert('Please enter a valid email!');
    return;
  }
  // 消息长度验证
  if (message.length < 10) {
    alert('Message needs to be at least 10 characters!');
    return;
  }

  // --- 第二步：验证通过，切换到提交中状态 ---
  submitBtn.textContent = 'SUBMITTING';
  submitBtn.disabled = true; // 禁用按钮，防止重复点击
  submitBtn.classList.add('loading'); // 可选：添加加载样式

  try {
    // --- 第三步：发送邮件请求（替换成你的后端接口） ---
    const response = await fetch('/api/send-contact-email', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ email, message })
    });

    if (response.ok) {
      // --- 请求成功：切换到成功状态 ---
      submitBtn.textContent = 'SUCCESS';
      submitBtn.classList.remove('loading');
      submitBtn.classList.add('success');
      // 可选：3秒后重置按钮和表单，方便用户再次提交
      setTimeout(() => {
        submitBtn.textContent = 'SUBMIT';
        submitBtn.disabled = false;
        submitBtn.classList.remove('success');
        contactForm.reset();
      }, 3000);
    } else {
      // 非200状态码，抛出错误进入catch分支
      throw new Error('Email send failed');
    }
  } catch (error) {
    // --- 请求失败：切换到错误状态 ---
    submitBtn.textContent = 'ERROR TRY AGAIN';
    submitBtn.disabled = false; // 重新启用按钮，允许重试
    submitBtn.classList.remove('loading');
    submitBtn.classList.add('error');
    // 可选：3秒后恢复默认按钮文本
    setTimeout(() => {
      submitBtn.textContent = 'SUBMIT';
      submitBtn.classList.remove('error');
    }, 3000);
  }
});

3. 可选CSS样式优化 #

给不同状态的按钮加样式，让交互更直观：

.submit-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #3498db;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.submit-btn.loading {
  background-color: #f39c12;
}

.submit-btn.success {
  background-color: #2ecc71;
}

.submit-btn.error {
  background-color: #e74c3c;
}

.form-input {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

关键提醒 #

• 禁用按钮：SUBMITTING状态下一定要禁用按钮，避免用户重复点击导致多次发送请求
• 后端接口：把代码里的/api/send-contact-email替换成你实际处理邮件发送的后端API地址
• 验证扩展：可以根据业务需求添加更多验证规则，比如姓名字段、验证码等
• 状态重置：定时器重置的逻辑可以根据需求调整时长，或者去掉让按钮保持成功/错误状态

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