Shopify订阅表单如何动态拼接尺码、性别值到contact[tags]字段

核心逻辑 #

现有表单的contact[tags]字段是提交时随请求上报的固定值，只需要在表单提交触发的瞬间，把ID为Size的尺码字段、ID为Gender的性别字段的实时取值，和固定值newsletter按要求拼接后回填到contact[tags]的value属性中即可，不需要改动现有表单的Liquid渲染逻辑，用原生JS就能实现，无额外依赖。

具体修改步骤 #

• 调整原有contact[tags]隐藏输入框，新增id属性方便JS定位，替换原有代码为：

<input type="hidden" name="contact[tags]" id="contactTags" value="newsletter">

• 保留现有尺码、性别字段的代码不需要改动，直接在表单闭合标签{%- endform -%}之前，插入下面的JS代码：

<script>
const subscribeForm = document.querySelector('.subscribe-form-flex');
if (subscribeForm) {
  subscribeForm.addEventListener('submit', () => {
    const tagField = document.getElementById('contactTags');
    const sizeField = document.getElementById('Size');
    const genderField = document.getElementById('Gender');

    // 取值并做去空格处理，过滤空值避免出现多余逗号
    const tagParts = [
      tagField.value.trim(),
      sizeField.value.trim(),
      genderField.value.trim()
    ].filter(item => item.length > 0);

    // 按要求拼接为逗号分隔的标签格式
    tagField.value = tagParts.join(', ');
  })
}
</script>

适配说明 #

• 如果当前尺码、性别是通过点选选项、下拉选择等交互，把选中值赋值给对应hidden输入框的，只要赋值逻辑是更新输入框的value属性，这段代码就能正常拿到值，不需要调整原有交互逻辑。
• 代码自带空值过滤，如果出现用户漏填某一项的情况，不会生成带多余逗号的非法标签格式，比如漏填性别时标签会自动生成为newsletter, L，不会出现newsletter, L,这类错误格式。
• 原有尺码、性别字段的name、class等属性全部保留，不会影响单独采集这两个字段的用户数据。

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