Question

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

Answer 1

这是一个有趣的形式，我从未见过以这种方式完成的表单，但在我看来，本页中的所有字段的格式都是这样的：

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

看起来这与你的CSS真的相关，我们能看到它的样子吗？

-Brian

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

1 个答案: