未提交表单中的textarea字段输入

Question

设置

我通过复制粘贴默认联系表单并按照 Shopify 教程进行编辑，为 Shopify 创建了一个自定义表单：https://shopify.dev/tutorials/customize-theme-add-fields-to-your-contact-form。

代码

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      {% if page.content.size > 0 %}
        <div class="rte">
          {{ page.content }}
        </div>
      {% endif %}

      <div class="contact-form form-vertical">
        {%- assign formId = 'LeaseApplicationForm' -%}
        {% form 'contact', id: formId %}
          {% include 'form-status', form: form, form_id: formId %}

<div class="grid grid--half-gutters">
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-bedrijfsnaam">Bedrijfsnaam<span aria-hidden="true">*</span></label>
              <input
                type="bedrijfsnaam"
                id="{{ formId }}-bedrijfsnaam"
                name="contact[bedrijfsnaam]"
                autocorrect="off"
                autocapitalize="off"
                aria-required="true"
                >
            </div>       
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-kvk-nummer">KvK-nummer<span aria-hidden="true">*</span></label>
              <input
                type="kvk-nummer"
                id="{{ formId }}-kvk-nummer"
                name="contact[kvk-nummer]"
                autocorrect="off"
                autocapitalize="off"
                aria-required="true"
                >
            </div>       
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-website">Website</label>
              <input
                type="website"
                id="{{ formId }}-website"
                name="contact[website]"
                autocorrect="off"
                autocapitalize="off"
                aria-required="false"
                >
            </div>                          
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-telefoon">Telefoon<span aria-hidden="true">*</span></label>
              <input
                type="telefoon"
                id="{{ formId }}-telefoon"
                name="contact[telefoon]"
                autocorrect="off"
                autocapitalize="off"
                aria-required="true"
                >
            </div>    
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-naam-aanvrager">Naam aanvrager<span aria-hidden="true">*</span></label>
              <input
                type="naam-aanvrager"
                id="{{ formId }}-naam-aanvrager"
                name="contact[naam-aanvrager]"
                autocorrect="off"
                autocapitalize="off"
                aria-required="true"
                >
            </div>               
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
              <input
                type="email"
                id="{{ formId }}-email"
                name="contact[email]"
                autocorrect="off"
                autocapitalize="off"
                value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
                aria-required="true"
                {%- if form.errors contains 'email' -%}
                  class="input--error"
                  aria-invalid="true"
                  aria-describedby="{{ formId }}-email-error"
                {%- endif -%}
                >
              {%- if form.errors contains 'email' -%}
                <span id="{{ formId}}-email-error" class="input-error-message">
                  <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                  {% include 'icon-error' %}
                  <span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
                </span>
              {%- endif -%}
            </div>
            <div class="grid__item medium-up">        
              <label for="{{ formId }}-looptijd">Looptijd<span aria-hidden="true">*</span></label>
              <select id="{{ formId }}-looptijd" name="contact[looptijd]">
                <option>15 maanden</option>
                <option>24 maanden</option>
                <option>30 maanden</option>
                <option>36 maanden</option>
                <option>42 maanden</option>
                <option>48 maanden</option>                
                <option>60 maanden</option>                                
              </select>  
            </div>    

          <label for="{{ formId }}-message">Te leasen product(en)</label>
          <textarea rows="10" id="{{ formId }}-message" name="te-leasen-product(en)" placeholder="b.v. 1x PodoMonium Wizzle" >{% if form.body %}{{ form.body }}{% endif %}</textarea>

          <input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">

        {% endform %}
      </div>
    </div>
  </div>
</div>

问题

在前端一切正常；用户可以填写所有字段并提交。在后端，虽然我收到了最后一个 textarea 字段的输入以外的所有内容。

我已经尝试修复此问题一段时间了，但不确定为什么它不起作用。我目前使用 input 行得到它运行，但这只给用户 1 行来填充。我需要多行。

我做错了什么？

Answer 1

您在字段名称中遗漏了 contact[...] 前缀。将您的文本区域替换为

<textarea rows="10" id="{{ formId }}-message" name="contact[te-leasen-product(en)]" placeholder="b.v. 1x PodoMonium Wizzle">{% if form["te-leasen-product(en)"] %}{{ form["te-leasen-product(en)"] }}{% endif %}</textarea>

或

<textarea rows="10" id="{{ formId }}-message" name="contact[body]" placeholder="b.v. 1x PodoMonium Wizzle" >{% if form.body %}{{ form.body }}{% endif %}</textarea>

未提交表单中的textarea字段输入

textarea field input in form not being submitted

html

textarea

liquid

shopify