如何获取联系表单用户输入值并通过axios提交发送含数据的邮件

你当前代码中直接给POST请求传递了硬编码的空字符串作为字段值，没有读取用户在联系表单中输入的实际内容，因此服务端接收到的字段值全部为空/undefined。

步骤1：确认你的表单输入项有可被选中的标识 #

确保你的HTML表单中，四个对应字段的输入控件有明确的id/类名，示例参考：

<form>
  <input type="text" id="name" placeholder="您的姓名">
  <input type="email" id="email" placeholder="联系邮箱">
  <input type="tel" id="number" placeholder="联系电话">
  <textarea id="message" placeholder="留言内容"></textarea>
  <button type="button" class="contact-btn">提交</button>
</form>

如果你的实际表单标识和上面示例不同，修改后续JS代码里的选择器和你实际的标识对应即可。

步骤2：修改JS逻辑，先读取输入值再发起请求 #

修改后的完整代码如下：

document.querySelector(".contact-btn").addEventListener("click", sendIt);

function sendIt(event) {
    event.preventDefault();
    // 读取用户输入的表单值
    const postData = {
        name: document.getElementById('name').value.trim(),
        email: document.getElementById('email').value.trim(),
        number: document.getElementById('number').value.trim(),
        message: document.getElementById('message').value.trim()
    }
    // 可选：添加非空校验，避免提交无效内容
    if (!postData.name || !postData.email) {
        alert('请填写必填项姓名和邮箱');
        return;
    }
    axios
        .post("https://us-central1-selexin-website.cloudfunctions.net/app/sendemail", postData)
        .then((res) => {
            console.log('提交成功', res);
            alert('留言已提交，我们会尽快联系您');
        })
        .catch((err) => {
            // 新增异常捕获，方便排查请求错误
            console.error('提交失败', err);
            alert('提交失败，请稍后重试');
        });
}

如果你的表单字段较多，可以直接用FormData批量获取表单值，无需逐个写选择器：

1. 给form标签加id，比如<form id="contactForm">
2. 取值逻辑改为：

const formData = new FormData(document.getElementById('contactForm'));
const postData = Object.fromEntries(formData.entries());

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