在基本Shopify聯繫表格上發生錯誤後保留表格數據

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 %} 

工程就像一個魅力。希望有所幫助！