Velocity模板VM的text输入框在Outlook邮件中不显示问题问询

嘿，这个问题我太熟了——Outlook对HTML表单元素的支持简直是个大坑！

问题根源 #

Outlook（尤其是桌面端版本，它用Word作为HTML渲染引擎）出于安全和交互限制，会直接隐藏或者禁用<input>、<textarea>这类表单元素。毕竟邮件客户端不想让用户在邮件里提交表单数据，避免安全风险，所以干脆就不显示它们了。

针对你的场景，给你几个实用的解决方案： #

1. 用可编辑的Div替代输入框（支持用户编辑）

如果只是需要用户能在邮件里填写内容，你可以把<input>换成带contenteditable="true"属性的Div，Outlook大部分版本都支持这个属性，而且样式可以完全模拟输入框：

<tr>
  <td>Reason for raising second opinion</td>
  <td>
    <div contenteditable="true" style="height:150px;width:300px;border:1px solid #ccc;padding:6px;resize:vertical;background:white;">
      <!-- 可以在这里放默认提示文字，比如：请输入原因 -->
    </div>
  </td>
</tr>

这种方式既能让用户编辑内容，又能保证在Outlook里正常显示。

2. 引导用户到网页表单（最可靠的提交方案）

如果你的需求是收集用户输入并提交，那邮件里的表单基本行不通——就算显示了，Outlook也会阻止表单提交动作。这种情况下，最好的办法是在邮件里放一段提示，引导用户到你的网页表单：

<tr>
  <td>Reason for raising second opinion</td>
  <td>
    <p>请点击下方链接填写第二次意见的原因：</p>
    <a href="你的表单网页地址" style="color:#0078d4;text-decoration:none;font-weight:bold;">填写意见表单</a>
  </td>
</tr>

这是最稳定的方案，所有邮件客户端都能正常处理链接，而且网页表单可以完整处理用户的输入和提交逻辑。

3. 用静态占位框（不需要用户编辑）

如果只是需要展示一个类似输入框的占位效果，不需要用户编辑，那直接用带样式的Div就行，所有客户端都能正常显示：

<tr>
  <td>Reason for raising second opinion</td>
  <td>
    <div style="height:150px;width:300px;border:1px solid #ccc;padding:6px;background:#f9f9f9;color:#666;">
      请在此处填写原因
    </div>
  </td>
</tr>

额外小提示 #

Outlook的HTML渲染有很多坑，尽量用内联样式（你已经这么做了，很棒），避免复杂的CSS选择器和浮动、定位这类高级属性，这样能最大程度保证邮件在各个客户端的兼容性。

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