在基本Shopify联系人表单上出现错误后保留表单数据
我已添加了中所述的基本联系人表单 我的代码:在基本Shopify联系人表单上出现错误后保留表单数据,shopify,contact-form,form-data,form-fields,Shopify,Contact Form,Form Data,Form Fields,我已添加了中所述的基本联系人表单 我的代码: {% 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.er
{% 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 %}
{%form'联系人“%”
{%if form.posted_成功?%}
谢谢联系我们。我们会尽快给你回复
{%endif%}
{%if form.errors%}
很抱歉,我们无法提交您的查询,因为它包含{{form.errors | size | pluralize:'a error','a more errors'}。
请更正以下内容,然后再次提交:
{%form.errors%}
将{{field}大写}替换为:'Body','Comments/questions'}}字段{{form.errors.messages[field]}。
{%endfor%}
{%endif%}
个人资料
-
名字:
-
姓氏:
-
电邮地址:
-
电话号码:
-
城市:
-
国家:
项目
-
项目:
-
问题:
{%endform%}
但是,如果用户尝试提交表单但填写错误,则页面将刷新并显示错误消息,并清除所有数据。从用户体验的角度来看,这并不理想,因为用户必须重新输入所有内容
表单错误后,如何保留以前填写的所有数据?请提供帮助。您可以使用
值
属性显示提交的数据。例如:
<input type="text" id="contactFormEmail" name="contact[email]" value="{{form.email}}" />
您可以使用
值
属性显示提交的数据。例如:
<input type="text" id="contactFormEmail" name="contact[email]" value="{{form.email}}" />
我知道这是一个老帖子,但我想把它留在这里,以防将来有人(像我一样)需要它
{form.email}
和{{form.body}}
是电子邮件和body字段中唯一以这种方式工作的标记。如果需要获取其他自定义字段的数据,则需要使用一些技巧
当表单返回错误时,页面的查询字符串中会显示提交字段中的数据。这里有一个演示如何将其拉入模板的示例
不过,我最终不得不对它进行一些定制,专门用于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 %}
{%comment%}
如果表单抛出错误,请使用查询字符串中的数据填充表单字段
注意:要使用下面的“{%if form.errors%}”语句,必须将此代码放在“{%form”contact“%}”标记中。
{%endcomment%}
{%if form.errors%}
{%-comment-%}
液体由Jason@freakdesign设计。
问题?在twitter上点击我:@freakdesign
与博客帖子相关:
http://freakdesign.com.au/blogs/news/get-the-url-querystring-values-with-liquid-in-shopify
例子:
https://jasons-experiments.myshopify.com/collections/all/products/3-4-sleeve-kimono-dress-coral-1?ref=freakdesign&cache=false
{%-endcomment-%}
{%-comment-%}捕获包含跟踪数据的标头的内容{%-endcomment-%}
{%-capture contentForQuerystring-%}{{content_for_header}{%-endcapture-%}
{%comment%}使用字符串拆分从内容_中为_头提取值,并应用一些字符串清理{%endcomment%}
{%-assign pageUrl=contentForQuerystring | split:“'pageUrl:“'last | split:'”“'first | split:'.myshopify.com'| last”|
替换:“\/”,“/”|
替换:'%20','|
替换:'\u0026','&'|
替换:'%5B','['|
替换:'%5D',']'|
替换:“+”,“”
-%}
{%assign debug=false%}
{%-对于(1..1)-%}
{%-注释-%}如果字符串不包含注释?那我们就没有疑问了。不再继续{%-endcomment-%}
{%-除非页面URL包含“?”-%}{%break%}{%-end除非-%}
{%-comment-%}在以下位置拆分url:?要获取它后面的所有值{%-endcomment-%}
{%-assign pageQuerystring=pageUrl |拆分:'?'|最后-%}
{%-comment-%}在&处拆分剩余的字符串以获取键和值的列表(如果有){%-endcomment-%}
{%-assign parts=pageQuerystring | split:'&'-%}
{%assign formFirstName=''%}
{%assign formLastName=''%}
{%assign formPhone=''%}
{%assign formMethod=''%}
{%assign formReason=''%}
{%-comment-%}在它们上面循环。。。{%-endcomment-%}
{%-对于零件中的零件-%}
{%-comment-%}在=。并非所有查询字符串都是成对的,因此我们需要考虑{%-endcomment-%}
{%-assign keyAndValue=部分|拆分:'='-%}
{%-如果keyAndValue.size>1-%}
{%-如果调试-%}
{%endif%}
{%case keyAndValue[0]}
{%when'联系人[名字]'%}
{%assign formFirstName=keyAndValue[1]}
{%when'联系人[姓氏]'%}
{%assign formLastName=keyAndValue[1]}
{%when'联系人[电话号码]'%}
{%assign formPhone=keyAndValue[1]}
{%when'联系[首选通信方法]'%}
{%assign formMethod=keyAndValue[1]}
{%when'联系[查询原因]%}
{%assign formReason=keyAndValue[1]}
{%endcase%}
{%-else-%}
{%-如果调试-%}
{%-endif-%}
{%-endif-%}
{%-endfor-%}
{%-endfor-%}
{%endif%}
工作起来很有魅力。希望有帮助 我知道这是一个老帖子,但我想把它留在这里,以防将来有人(像我一样)需要它
{form.email}
和{{form.body}}
是唯一可以以这种方式工作的标记-对于电子邮件和