Question

我添加了Shopify Documentation中描述的基本联系表单。

我的代码：

{% form 'contact' %}

{% if form.posted_successfully? %}
<div class="successForm feedback">
  <p>Thanks for contacting us. We'll get back to you as soon as possible.</p>
</div>
{% endif %}

{% if form.errors %}
<div class="errorForm feedback">
  <p>Sorry, we were unable to submit your inquiry because it contained {{ form.errors | size | pluralize: 'an error', 'a few errors' }}.<br/>Please correct the following and submit again:</p>
  {% for field in form.errors %}
  <p><strong>The {{ field | capitalize | replace: 'Body', 'Comments / questions' }} field {{ form.errors.messages[field] }}.</strong></p>
  {% endfor %}
</div>
{% endif %}

<div id="contactFormWrapper">
  <h3>Personal details</h3>
  <ul>
    <li>
      <label>First name:</label>
      <input type="text" id="contactFormFirstName" name="contact[first-name]" placeholder="" />
    </li>
    <li>
      <label>Last name:</label>
      <input type="text" id="contactFormLastName" name="contact[last-name]" placeholder="" />
    </li>          
    <li>
      <label>Email address:</label>
      <input type="email" id="contactFormEmail" name="contact[email]" placeholder="" />
    </li>
    <li>
      <label>Telephone number:</label>
      <input type="telephone" id="contactFormTelephone" name="contact[phone]" placeholder="" />
    </li>
    <li>
      <label>City:</label>
      <input type="text" id="contactFormCity" name="contact[city]" placeholder="" />
    </li>
    <li>
      <label>Country:</label>
      <input type="text" id="contactFormCountry" name="contact[country]" placeholder="" />
    </li>
  </ul>
  <h3>Items</h3>
  <ul>
    <li>
      <label>Items:</label>
      <input type="text" id="contactFormItems" name="contact[items]" placeholder="" />

    </li>
    <li>
      <label>Questions:</label>
      <textarea rows="10" id="contactFormComments" name="contact[body]" placeholder=""></textarea>
    </li>
  </ul>
  <div class="clearfix"></div>
  <div class="main-button-container">
    <input type="submit" id="contactFormSubmit" value="Submit Enquiry" class="btn button-style" />
  </div>
</div>

{% endform %}

但是，如果用户尝试提交表单但填写错误，则页面会刷新并显示错误消息并清除所有数据。从用户体验的角度来看，这并不理想，因为用户必须重新输入所有内容。

如何在表单错误后保留所有以前的数据？请帮忙。

Answer 1

您可以使用value属性显示提交的数据。例如：

<input type="text" id="contactFormEmail" name="contact[email]" value="{{form.email}}" />

或textarea：

<textarea id="contactFormComments" name="contact[body]">{{form.body}}</textarea>

Answer 2

我知道这是一个老帖子，但我想留下这个，以防万一（像我一样）将来需要它。对于电子邮件和正文字段，{{ form.email }}和{{ form.body }}是唯一可以这种方式运行的标记。如果您需要获取其他自定义字段的数据，则需要使用一些黑客。

当表单返回错误时，提交字段中的数据可在页面的查询字符串中找到。 a great article from FreakDesign显示了如何将其添加到模板中。

但是，最后我不得不定制一些，特别是与Shopify联系表格一起使用。这对我有用：

{% comment %}
    IF THE FORM THROWS ERRORS, POPULATE THE FORM FIELDS WITH DATA FROM THE QUERY STRING
    NOTE: To use the `{% if form.errors %}` statement below, you must place this code within the `{% form 'contact' %}` tag.
{% endcomment %}
{% if form.errors %}

    {%- comment -%}

        Liquid by Jason @ freakdesign.
        Questions? Ping me on twitter: @freakdesign

        Relates to blog post:
        http://freakdesign.com.au/blogs/news/get-the-url-querystring-values-with-liquid-in-shopify

        Example:
        https://jasons-experiments.myshopify.com/collections/all/products/3-4-sleeve-kimono-dress-coral-1?ref=freakdesign&cache=false

    {%- endcomment -%}

    {%- comment -%} Capture the content for header containing the tracking data {%- endcomment -%}
    {%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}

    {% comment %} Use string splitting to pull the value from content_for_header and apply some string clean up {% endcomment %}
    {%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | split:'.myshopify.com' | last |
        replace:'\/','/' |
        replace:'%20',' ' |
        replace:'\u0026','&' |
        replace:'%5B','[' |
        replace:'%5D',']' |
        replace:'+',' '
    -%}
    {% assign debug = false %}
    {%- for i in (1..1) -%}
        {%- comment -%} If the string doesn't contain a ? then we have no querystring. Go no further {%- endcomment -%}
        {%- unless pageUrl contains "?" -%}{% break %}{%- endunless -%}

        {%- comment -%} Split the url at the ? to get all values after it {%- endcomment -%}
        {%- assign pageQuerystring = pageUrl | split:'?' | last -%}

        {%- comment -%} Split the remaining string at & to get the list of keys and values (if any) {%- endcomment -%}
        {%- assign parts = pageQuerystring | split:'&' -%}

        {% assign formFirstName = '' %}
        {% assign formLastName = '' %}
        {% assign formPhone = '' %}
        {% assign formMethod = '' %}
        {% assign formReason = '' %}

        {%- comment -%} Loop over them... {%- endcomment -%}
        {%- for part in parts -%}

            {%- comment -%} Split the part at the =. Not all querystrings will be in pairs so we need to account for that {%- endcomment -%}
            {%- assign keyAndValue = part | split:'=' -%}

            {%- if keyAndValue.size > 1 -%}
                {%- if debug -%}
                    <!--
                    key: {{ keyAndValue[0] }}<br>
                    value: {{ keyAndValue[1] }}
                    -->
                {% endif %}

                {% case keyAndValue[0] %}

                    {% when 'contact[First Name]' %}
                    {% assign formFirstName = keyAndValue[1] %}

                    {% when 'contact[Last Name]' %}
                    {% assign formLastName = keyAndValue[1] %}

                    {% when 'contact[Phone Number]' %}
                    {% assign formPhone = keyAndValue[1] %}

                    {% when 'contact[Preferred Method Of Communication]' %}
                    {% assign formMethod = keyAndValue[1] %}

                    {% when 'contact[Reason For Inquiry]' %}
                    {% assign formReason = keyAndValue[1] %}

                {% endcase %}

            {%- else -%}
                {%- if debug -%}
                    <!--
                    value: {{ keyAndValue }}
                    -->
                {%- endif -%}
            {%- endif -%}

        {%- endfor -%}
    {%- endfor -%}

{% endif %}

像魅力一样工作。希望有所帮助！

在基本的Shopify联系表单上出现错误后保留表单数据

2 个答案: