Shopify联系页面contact form增加栏位

Shopify联系页面表单增加栏位方法

注意:Shopify联系页面表单效果因为主题不同形式可能不同

 

增加1个国家country栏位为例

路径:后台-Online Store-Themes-Edit code编辑主题代码

直接搜索 contact找到相关页面(不同主题文件位置不同)

找到控制的文件,参考上面的复制然后修改成想加的栏位名称country(修改文件之前先做好备份)

注意类型不同(输入类型 数字类型 邮件类型)

添加完前台出现报错(还需要再修改一个文件)

Locales文件夹中

 

代码中搜索下contact,添加栏位label

前台显示正常。

要下把某个栏位设置 为必填项 <input type= 需要增加 required

<div class=”form-group”>
<label for=”inputName”>{{ ‘contact.form.phone_label’ | t }}</label>
<input type=”tel” name=”contact[phone]” pattern=”[0-9\-]*” class=”form-control” id=”inputSubject” placeholder=”{{ ‘contact.form_field.phone’ | t }}” value=”{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}” required>
</div>

前台lable也需要给客户注意标注上必填星号

前台效果增加了※,如果不填写点击提交按钮会提示填写此栏位。

 

如果嫌麻烦可以使用APP,不过现在APP都是收费的,仅仅是提供免费版,当然功能必然会进行限制。

插件名称:

Pify Form Builder‑Contact Form

插件地址:

https://apps.shopify.com/pify-form-builder

免费版不限制提交次数,限制栏位数量和表单个数,提交联系一般都是为了客户少填写栏位尽快联系,这个就能满足要求(注意有些APP免费版限制的是提交次数)

如果为了省钱选择免费版注意擦亮眼,这种都不需要尝试。

插件演示:

 

0
分享到: