如何在 Liquid 表单上添加自定义字段？答案

【问题标题】：How to add custom fields on to Liquid form?如何在 Liquid 表单上添加自定义字段？
【发布时间】：2012-08-10 13:39:25
【问题描述】：

我可以用 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" 的构造是做什么的？字段名称在哪里？

【问题讨论】：

标签： html ruby liquid

【解决方案1】：

这是一个有趣的表格，我从来没有见过这样的表格，但在我看来，这个页面中的所有字段的格式都是这样的：

<li>
  <div class = "foobar">
    // Label and Such
  </div>
  <div class="field">
    // Actual input
  </div>
</li>

看起来这与您的 CSS 确实相关，我们可以看看它是什么样的吗？

-布赖恩

【讨论】：