如何在Dawn主题联系表单中添加input[type="file"]文件上传字段？

1. 能否无需插件实现？ #

Shopify原生的联系表单（{% form 'contact' %}）不支持直接上传文件，因为Shopify官方的Contact API没有接收文件的参数。如果完全不用插件，你需要自己搭建后端服务（比如Node.js、PHP或Shopify Functions）来处理表单提交和文件存储，仅靠前端修改无法让文件直接发送到Shopify后台。

2. 如何添加文件上传字段（前端修改） #

你可以先在前端添加文件上传字段，同时调整表单属性以支持文件编码，之后配合自定义后端处理提交：

修改你的表单代码，做两处关键调整：

• 给form标签添加enctype="multipart/form-data"属性（必须添加，否则文件无法被正确编码）
• 在表单中插入文件上传字段，匹配现有字段的样式规范

修改后的完整代码示例：

{%- form 'contact', id: 'ContactForm', class: contact_form_class, enctype: "multipart/form-data" -%}
  <div class="contact__fields">
    <div class="field">
      <input
        class="field__input"
        autocomplete="name"
        type="text"
        id="ContactForm-name"
        name="contact[{{ 'templates.contact.form.name' | t }}]"
        value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
        placeholder="{{ 'templates.contact.form.name' | t }}"
      >
      <label class="field__label" for="ContactForm-name">{{ 'templates.contact.form.name' | t }}</label>
    </div>
    <div class="field field--with-error">
      <input
        autocomplete="email"
        type="email"
        id="ContactForm-email"
        class="field__input"
        name="contact[email]"
        spellcheck="false"
        autocapitalize="off"
        value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
        aria-required="true"
        {% if form.errors contains 'email' %}
          aria-invalid="true"
          aria-describedby="ContactForm-email-error"
        {% endif %}
        placeholder="{{ 'templates.contact.form.email' | t }}"
      >
      <label class="field__label" for="ContactForm-email">
        {{- 'templates.contact.form.email' | t }}
        <span aria-hidden="true">*</span></label
      >
      {%- if form.errors contains 'email' -%}
        <small class="contact__field-error" id="ContactForm-email-error">
          <span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
          <span class="form__message">
            {%- render 'icon-error' -%}
            {{- form.errors.translated_fields.email | capitalize }}
            {{ form.errors.messages.email -}}
          </span>
        </small>
      {%- endif -%}
    </div>
    <!-- 新增文件上传字段 -->
    <div class="field">
      <input
        class="field__input"
        type="file"
        id="ContactForm-file"
        name="contact[attachment]"
        accept="image/*,.pdf,.doc,.docx" <!-- 可按需修改允许上传的文件类型 -->
      >
      <label class="field__label" for="ContactForm-file">{{ 'templates.contact.form.attachment' | t | default: "附件" }}</label>
    </div>
  </div>
  <div class="field">
    <textarea
      rows="10"
      id="ContactForm-body"
      class="text-area field__input"
      name="contact[{{ 'templates.contact.form.comment' | t }}]"
      placeholder="{{ 'templates.contact.form.comment' | t }}"
    >
        {{- form.body -}}
      </textarea>
    <label class="form__label field__label" for="ContactForm-body">
      {{- 'templates.contact.form.comment' | t -}}
    </label>
  </div>
  <div class="contact__button">
    <button type="submit" class="button">
      {{ 'templates.contact.form.send' | t }}
    </button>
  </div>
{%- endform -%}

3. 提交表单时文件会一并发送吗？ #

• 若直接使用原生Shopify Contact API提交（即代码中的form 'contact'）：不会。Shopify的Contact API不处理文件参数，文件会被直接忽略，仅能收到文本字段内容。
• 若将表单提交目标改为自定义后端服务（需修改form标签的action属性指向你的后端接口）：可以。你的后端需要处理multipart/form-data类型的请求，接收并存储文件，同时可将其他表单字段内容转发到Shopify Contact API或自行处理通知。

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