如何将自定义字段添加到Liquid表单上?
问题描述:
我有可能使用Liquid语言编辑在线商店页面。接触的网页编码这种方式默认为:如何将自定义字段添加到Liquid表单上?
(这是storenvy.com店)
<fieldset>
{% if contact.sent %}
<div id="request_received">
<img src="images/support_received.png" />
<h2>Support request received!</h2>
<p>Your request was received. We will take care of your issue as soon as possible.<br />Thank you!</p>
</div>
{% else %}
<form id="contact-form" method="post" action ="/contact">
<ul>
<li>
<div class="label" id="first_label">
<label for="name">Name</label>
</div>
<div class="field" id="first_field">
{{ contact | contact_input: 'name'}}
</div>
</li>
<li>
<div class="label">
<label for="email">Email</label>
</div>
<div class="field">
{{ contact | contact_input: 'email'}}
</div>
</li>
<li>
<div class="label">
<label for="phone">Phone</label>
</div>
<div class="field">
{{ contact | contact_input: 'phone'}}
</div>
</li>
<li>
<div class="label">
<label for="order_number">Order Number</label>
</div>
<div class="field">
{{ contact | contact_input: 'order_number'}}
</div>
</li>
<li>
<div class="label">
<label for="message">Details</label>
</div>
<div class="field">
{{ contact | contact_input: 'message'}}
<label class="instruction">Please provide all the information you possibly can. </label>
</div>
</li>
<li>
<div class="label">
<label for="captcha">Spam Protection</label>
</div>
<div class="field">
{{ contact.captcha }}<br/>
{{ contact | contact_input: 'captcha' }}
</div>
</li>
<li>
<div class="submit">
<input type="submit" value="Submit" class="button" />
</div><!-- end .submit -->
</li>
</ul>
</form>
{% endif %}
</fieldset>
是否有可能对我来说,自定义字段添加到该表单?或者这是由底层服务器逻辑决定的?
你能不能解释一下,id="field"
的结构是做什么的?字段名称在哪里?
答
这是一个有趣的形式,我从来没有见过的形式这样做的方式,但它看起来对我来说,都在这个页面中的字段的格式是这样的:
<li>
<div class = "foobar">
// Label and Such
</div>
<div class="field">
// Actual input
</div>
</li>
它也像这与你的CSS真的很相关,我们可以看到它的样子吗?
-Brian