如何将Web3Forms表单提交的主题改为用户输入内容？

我用Web3Forms搭建了一个联系表单，希望提交时邮件主题显示用户在表单subject输入框填写的内容，而非默认的"New Submission from Web3Forms"。但目前提交后只返回函数名称而非实际值，请问该怎么解决？

我的原表单代码：

<div class="col-lg-8">
  <div class="custom-form">
    <div id="message"></div>
    <form action="https://api.web3forms.com/submit" method="POST" id="form">
      <input type="hidden" name="access_key" value="yourkeyhere" />
      <input type="hidden" name="subject" value="getSubjectValue()" />
      <input type="hidden" name="redirect" value="https://web3forms.com/success" />
      <input type="checkbox" name="botcheck" id="" style="display: none;" />
      <div class="row">
        <div class="col-lg-6">
          <div class="form-group">
            <input name="name" id="name" type="text" class="form-control" placeholder="Your name..." required>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="form-group">
            <input name="email" id="email" type="email" class="form-control" placeholder="Your email..." required>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div class="form-group">
            <input name="text" id="subject" type="text" class="form-control" placeholder="Your subject..." required>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div class="form-group">
            <textarea name="comments" id="message" rows="4" class="form-control" placeholder="Your message..." required></textarea>
          </div>
        </div>
      </div>

      <input type="submit" id="submit" name="send" class="submitBnt btn btn-custom" value="Send Message">
      <div id="simple-msg"></div>
  </div>
</div>
</form>

我尝试的脚本没成功：

function getSubjectValue () {
    const subject = document.getElementById('subject')
    const subjVal = subject.value
}

解决方案 #

方法1：直接修改表单字段（最简单）

Web3Forms会自动识别表单中name="subject"的字段值作为邮件主题，不需要额外隐藏字段或JS：

1. 删除原有的<input type="hidden" name="subject" value="getSubjectValue()" />
2. 将用户输入的主题框的name从text改为subject

修改后的核心代码片段：

<!-- 移除原来的hidden subject字段 -->
<input type="hidden" name="access_key" value="yourkeyhere" />
<input type="hidden" name="redirect" value="https://web3forms.com/success" />
<!-- ...其他代码... -->
<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <!-- 修改name为subject -->
      <input name="subject" id="subject" type="text" class="form-control" placeholder="Your subject..." required>
    </div>
  </div>
</div>

方法2：用JS动态设置（适合有额外逻辑的场景）

如果必须用隐藏字段动态赋值，需要在表单提交前修改隐藏字段的value，而非直接在HTML里写函数名：

1. 保留隐藏字段，但初始值为空：<input type="hidden" name="subject" id="hidden-subject" value="" />
2. 给表单添加提交事件监听，在提交前把用户输入的主题值赋值给隐藏字段

完整JS代码：

document.getElementById('form').addEventListener('submit', function(e) {
  const userSubject = document.getElementById('subject').value;
  document.getElementById('hidden-subject').value = userSubject;
});

原方法失败原因 #

HTML的value属性是静态字符串，直接写getSubjectValue()只会把这个字符串作为值发送，不会执行函数。必须通过JS在事件触发时动态修改字段值，或者直接利用Web3Forms的字段识别规则。

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