未提交表单的textarea字段输入

时间:2020-03-18 14:29:30

标签: html textarea shopify liquid

设置

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


代码

<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行来填充。我需要多行。

我在做什么错了?

1 个答案:

答案 0 :(得分:3)

您错过了字段名中的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>