每一个 Shopify 独立站上，都会留一个让客户主动跟我们联系的方式，有时候为了更快的了解客户情况，我们可能会要求客户填写例如订单号、准备购买的商品等信息，那么如何在表单中增加这些选项呢？

首先，我们要开通「联系我们」这个页面。如下图:

image.jpeg

image.jpeg

保存发布以后，右上角有一个查看页面，就能看到联系我们的表单了。

image.jpeg

接下来是重点，也很简单，只需要改两处代码即可。
找到你当前用的模板并点击编辑

image.jpeg

然后参照下图，找到page.contact.liquid这个文件，细心的朋友会发现，这里就是联系我们的表单内容

image.jpeg

<label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">

<!--关注微信公众号「Shopify插件服务」-->
<label for="{{ formId }}-order">{{ 'contact.form.order' | t }}</label>
<input type="text" id="{{ formId }}-order" name="contact[{{ 'contact.form.order' | t }}]"  value="{% if form[order] %}{{ form[order] }}{% elsif customer %}{{ customer.order }}{% endif %}">

这里代码简单解释一下

里面contact.form.phone里面的phone是我们定义的一个内容的名字，你可以自定义任何内容，bepei.com都可以。但是改了的话，后面其他phone也要全部改成bepei.com，相信有一点html基础的人都知道吧。

pattern="[0-9\-]*"这个是一个参数校验，通过正则表达式来让用户输入的内容全部都是符合要求的。比如这里0-9就是必须输入全是数字。正则表达式还有很多用法。有机会再讲解一下。

到这里点击保存以后，页面上就会有相应的表单出来了。

image.jpeg

但是这里会有一个错误translation missing: zh-CN.contact.form.order，意思是在ZH-CN这个语言包里面，没有找到order。很简单，只需要修改一下语言包就行。
同样在代码里面，找到Locales这个文件夹，里面找到zh-CN.json这个文件，在如下位置，增加你自定义的名字即可。比如我自定义的是order，那我增加的就是order。保存发布即可。

image.jpeg

如下图，订单编号已经显示出来了。

image.jpeg

提交一个资料，看是否能接收到邮件。

image.jpeg

有任何问题，欢迎联系我，也可以评论留言。