Web3Forms表单提交：如何将用户输入的表单字段值设为邮件主题

本教程旨在解决使用Web3Forms时，如何将用户在联系表单中输入的特定字段值（如主题）自动作为提交邮件的主题。文章将详细阐述Web3Forms的内置机制，通过调整HTML表单中输入字段的name属性，实现无需额外JavaScript或隐藏字段即可动态捕获用户输入作为邮件标题，从而优化表单提交体验和邮件管理效率。

在使用web3forms构建html联系表单时，开发者常常希望邮件提交的主题能够动态地反映用户在表单中输入的内容，而非默认的“new submission from web3forms”。本文将深入探讨如何通过web3forms的内置机制，简洁高效地实现这一目标。

Web3Forms邮件主题设置机制

Web3Forms服务在处理表单提交时，会解析表单数据中具有特定name属性的字段。其中，如果表单中存在一个name属性为subject的字段，Web3Forms会优先将其值作为提交邮件的主题。这意味着，用户无需通过复杂的JavaScript代码或额外的隐藏字段来传递主题值，只需确保用户输入主题的文本框拥有正确的name属性即可。

在原始尝试中，开发者试图通过一个隐藏字段，并结合JavaScript函数getSubjectValue()来动态设置主题。这种方法存在两个主要问题：

1. value=”getSubjectValue()”会将字符串字面量”getSubjectValue()”作为值发送，而非执行函数的结果。
2. 即使通过JavaScript在表单提交前动态设置了隐藏字段的值，Web3Forms更直接、更推荐的方式是直接读取用户可见输入字段的值。

正确实现方法

实现用户输入主题作为邮件主题的核心在于，将承载用户输入主题的文本框的name属性直接设置为subject。这样，当用户填写并提交表单时，Web3Forms会自动捕获该字段的值并将其用作邮件主题。

以下是修改前后的对比：

原始代码片段（不推荐）：
此方法尝试通过一个隐藏字段和JavaScript函数来设置主题，但Web3Forms默认不以这种方式解析主题。

<input type="hidden" name="subject" value="getSubjectValue()" />
<!-- ... 其他表单字段 ... -->
<input name="text" id="subject" type="text" class="form-control" placeholder="Your subject..." required>

以及对应的JavaScript代码（不完整且非Web3Forms推荐方式）：

function getSubjectValue () {
const subject = document.getElementById('subject')
const subjVal = subject.value
// 此处缺少将subjVal赋值给隐藏字段的逻辑，且即使有，也非Web3Forms推荐方式
}

修改后的代码片段（推荐）：
移除上述隐藏字段和相关的JavaScript函数。
将用户输入主题的文本框的name属性从name=”text”修改为name=”subject”。

<input name="subject" id="subject" type="text" class="form-control" placeholder="您的主题..." required>

通过这一简单的修改，用户在“您的主题…”输入框中填写的内容将直接作为Web3Forms提交邮件的主题。

完整示例代码

以下是整合了正确主题设置方法的完整HTML表单代码：