0

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"か? フィールド名はどこにありますか?

4

1 に答える 1

0

これは興味深いフォームです。フォームがそのように作成されているのを見たことがありませんが、このページのすべてのフィールドが次のようにフォーマットされているように見えます。

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

また、これは実際にあなたの CSS に関連しているように見えます。

-ブライアン

于 2012-08-20T15:36:47.027 に答える