如何将 input[type="file"] 添加到 Dawn 联系表单？

Question

我正在创建一个带有自定义联系表单的块。我正在使用 Dawn 主题的基本表单模板。我需要向其添加一个输入以添加文件，以便用户可以附加一个文件或图片。我怎样才能添加这个字段？这可以在没有插件的情况下完成吗？发送时文件会发送吗？

{%- form 'contact', id: 'ContactForm', class: contact_form_class -%}
          <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>
          <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 -%}

Answer 1

无法在

contact form

中添加此类输入。

在这里您可以找到有关

contact forms

的官方 Shopify 文档，请参阅它以了解有关可添加到此类表单的可选输入的更多详细信息。

希望有帮助！