weebly 表单默认仅提交页面加载时已存在的 dom 元素；通过 javascript 动态插入的新字段不会被纳入提交数据。解决方法是预先在编辑器中创建字段并隐藏，再按需显示，确保其始终参与表单序列化与邮件发送。
weebly 表单默认仅提交页面加载时已存在的 dom 元素；通过 javascript 动态插入的新字段不会被纳入提交数据。解决方法是预先在编辑器中创建字段并隐藏，再按需显示，确保其始终参与表单序列化与邮件发送。
Weebly 的表单提交机制依赖于服务端对原始 HTML 表单结构的解析，而非客户端实时 DOM 状态。这意味着：任何通过 document.createElement() 动态注入的 <input> 元素，即使成功附加到表单中，也不会被 Weebly 后台识别为有效表单字段，因此不会出现在提交邮件中。
✅ 正确做法：预置 + 条件显隐
在 Weebly 编辑器中，直接向表单添加你所需的额外字段（例如一个文本输入框），并为其设置唯一 ID（如 input-123456789）。然后，在页面底部添加以下脚本：
<script>
// 页面加载时隐藏该字段（默认不显示）
window.addEventListener('DOMContentLoaded', function() {
const dynamicInput = document.getElementById('input-123456789');
if (dynamicInput) {
dynamicInput.style.display = 'none'; // 推荐用 display 而非 visibility，避免占位空白
// 同时隐藏对应 label（若存在）
const label = document.querySelector('label[for="input-123456789"]');
if (label) label.style.display = 'none';
}
});
// 监听原选择字段变化，条件性显示
document.addEventListener('change', function(e) {
const triggerInput = document.getElementById('input-167878397137819290'); // 你的触发下拉/单选框
const dynamicInput = document.getElementById('input-123456789');
const label = document.querySelector('label[for="input-123456789"]');
if (!triggerInput || !dynamicInput || e.target !== triggerInput) return;
const value = triggerInput.value;
const shouldShow = value === 'English to Spanish' || value === 'English into Spanish';
if (shouldShow) {
dynamicInput.style.display = 'block';
if (label) label.style.display = 'block';
// 可选：聚焦提升用户体验
dynamicInput.focus();
} else {
dynamicInput.style.display = 'none';
if (label) label.style.display = 'none';
dynamicInput.value = ''; // 清空值，避免残留数据提交
}
});
</script>⚠️ 关键注意事项：
- ID 必须准确匹配：Weebly 生成的字段 ID（如 input-123456789）可在页面源码中右键检查获取，务必与脚本中一致；
- 不要使用 visibility: hidden：它仍保留布局空间且部分 Weebly 版本可能无法正确提交，优先使用 display: none/block；
- 清空非活跃状态的值：避免用户切换选项后旧值意外提交；
- 无需修改表单 action 或提交逻辑：Weebly 自动捕获所有 <input>、<select>、<textarea> 元素（只要它们存在于初始 HTML 中且未被移除 DOM）。
? 额外提示：若需多个条件分支（如不同语言对应不同字段），可为每个动态字段分配独立 ID，并在 change 事件中统一管理显隐逻辑。此方案完全兼容 Weebly 邮件通知模板，字段名称将直接以标签文本（或自定义字段名）出现在邮件正文中，无需额外配置。
