Shopify：多联系表单页面的表单错误区分处理问题

核心思路 #

通过给每个表单的字段添加唯一前缀（基于表单ID），或提交时携带表单ID标识，让模板精准识别当前表单对应的错误信息，避免全局错误同步显示。

方案一：字段前缀区分法 #

1. 修改表单字段的name属性
   给每个表单的输入字段（name、email、message等）添加表单ID作为前缀，确保字段名唯一：

{% form 'contact', id: section.settings['form-id'] %}
  <!-- 姓名输入框 -->
  <input type="text" name="{{ section.settings['form-id'] }}-name" placeholder="姓名">
  <!-- 邮箱输入框 -->
  <input type="email" name="{{ section.settings['form-id'] }}-email" placeholder="邮箱">
  <!-- 消息输入框 -->
  <textarea name="{{ section.settings['form-id'] }}-message" placeholder="留言"></textarea>
  <button type="submit">提交</button>
{% endform %}

2. 针对性显示错误
   在每个表单的错误判断块中，只筛选当前表单ID前缀的字段错误：

{% form 'contact', id: section.settings['form-id'] %}
  {%- if form.errors -%}
    <div class="form-errors">
      {%- for error_key in form.errors -%}
        {%- if error_key starts_with section.settings['form-id'] ~ '-' -%}
          <p class="error">{{ form.errors[error_key] }}</p>
        {%- endif -%}
      {%- endfor -%}
    </div>
  {%- endif -%}
  <!-- 表单字段内容 -->
{% endform %}

方案二：隐藏字段标识法 #

1. 添加表单ID隐藏字段
   在每个表单内添加一个隐藏字段，提交时携带当前表单的ID：

{% form 'contact', id: section.settings['form-id'] %}
  <input type="hidden" name="submitted-form-id" value="{{ section.settings['form-id'] }}">
  <!-- 其他表单字段 -->
{% endform %}

2. 匹配表单ID显示错误
   只有当提交的表单ID与当前表单ID一致时，才显示错误信息：

{% form 'contact', id: section.settings['form-id'] %}
  {%- if form.errors and request.params['submitted-form-id'] == section.settings['form-id'] -%}
    <div class="form-errors">
      {%- for error in form.errors.values -%}
        <p class="error">{{ error }}</p>
      {%- endfor -%}
    </div>
  {%- endif -%}
  <!-- 表单字段内容 -->
{% endform %}

注意：此方法仅在表单提交后生效，初始页面加载时不会显示错误，适合只需要在提交后展示对应表单错误的场景。

补充说明 #

• 两种方案都不需要修改Shopify后台核心逻辑，仅通过前端模板调整即可实现。
• 优先推荐字段前缀法，它能精准对应每个字段的错误，避免不同表单错误混淆。

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