如何让无PHP的HTML联系表单提交时自动填充用户输入内容到邮件

问题原因 #

你当前提交后邮件窗口没有用户输入内容的核心问题是所有表单输入控件都未配置name属性，mailto:协议提交表单时需要依赖name属性来识别输入内容的字段名，拼接生成邮件正文。你提供的CSS代码无异常，不需要做任何修改。

修复方案 #

你只需要修改HTML表单部分的代码，给每个输入项加上对应的name属性即可，修改后的完整代码如下：

<form action="MAILTO:example@gmail.com?subject=网站用户联系请求" method="POST" enctype="text/plain">
<div class="containercontact">
  
  <div class="contact-box">
    <div class="left1"></div>
    <div class="right1">
      <h2>Contact Us</h2>
      <input type="text" name="用户名" class="field" placeholder="Your Name">
      <input type="email" name="联系邮箱" class="field" placeholder="Your Email">
      <input type="text" name="联系电话" class="field" placeholder="Phone">
      <textarea name="留言内容" placeholder="Message" class="field"></textarea>
      <button type="submit" class="btn">Send</button>
    </div>
  </div>
</div>
</form>

补充说明 #

• 上述代码中给form的action额外增加了?subject=网站用户联系请求参数，可自动预设邮件主题，你可以自行调整主题内容
• 邮箱输入框的type改为了email，可自动校验用户输入的邮箱格式是否符合规范
• 提交按钮增加了type="submit"属性，避免部分浏览器无法识别按钮的提交行为
• 这种mailto:实现方案依赖用户本地设备设置了默认邮件客户端，若用户未配置相关内容，点击提交后不会弹出邮件窗口。如果需要兼容性更高的无后端方案，可以使用第三方静态表单提交服务，提交的所有数据会直接转发到你指定的邮箱。

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