0

Shopify ドキュメントで説明されているように、基本的な連絡フォームを追加しました。

私のコード:

{% form 'contact' %}

{% if form.posted_successfully? %}
<div class="successForm feedback">
  <p>Thanks for contacting us. We'll get back to you as soon as possible.</p>
</div>
{% endif %}

{% if form.errors %}
<div class="errorForm feedback">
  <p>Sorry, we were unable to submit your inquiry because it contained {{ form.errors | size | pluralize: 'an error', 'a few errors' }}.<br/>Please correct the following and submit again:</p>
  {% for field in form.errors %}
  <p><strong>The {{ field | capitalize | replace: 'Body', 'Comments / questions' }} field {{ form.errors.messages[field] }}.</strong></p>
  {% endfor %}
</div>
{% endif %}

<div id="contactFormWrapper">
  <h3>Personal details</h3>
  <ul>
    <li>
      <label>First name:</label>
      <input type="text" id="contactFormFirstName" name="contact[first-name]" placeholder="" />
    </li>
    <li>
      <label>Last name:</label>
      <input type="text" id="contactFormLastName" name="contact[last-name]" placeholder="" />
    </li>          
    <li>
      <label>Email address:</label>
      <input type="email" id="contactFormEmail" name="contact[email]" placeholder="" />
    </li>
    <li>
      <label>Telephone number:</label>
      <input type="telephone" id="contactFormTelephone" name="contact[phone]" placeholder="" />
    </li>
    <li>
      <label>City:</label>
      <input type="text" id="contactFormCity" name="contact[city]" placeholder="" />
    </li>
    <li>
      <label>Country:</label>
      <input type="text" id="contactFormCountry" name="contact[country]" placeholder="" />
    </li>
  </ul>
  <h3>Items</h3>
  <ul>
    <li>
      <label>Items:</label>
      <input type="text" id="contactFormItems" name="contact[items]" placeholder="" />

    </li>
    <li>
      <label>Questions:</label>
      <textarea rows="10" id="contactFormComments" name="contact[body]" placeholder=""></textarea>
    </li>
  </ul>
  <div class="clearfix"></div>
  <div class="main-button-container">
    <input type="submit" id="contactFormSubmit" value="Submit Enquiry" class="btn button-style" />
  </div>
</div>

{% endform %}

ただし、ユーザーがフォームを送信しようとして間違って入力した場合は、ページが更新されてエラー メッセージが表示され、すべてのデータが消去されます。これは、ユーザーがすべてを再入力する必要があるため、ユーザー エクスペリエンスの観点からは理想的ではありません。

フォーム エラーの後、以前のデータをすべて入力したままにするにはどうすればよいですか? 助けてください。

4

2 に答える 2

6

value属性を使用して送信されたデータを表示できます。例えば：

<input type="text" id="contactFormEmail" name="contact[email]" value="{{form.email}}" />

またはの場合textarea：

<textarea id="contactFormComments" name="contact[body]">{{form.body}}</textarea>
于 2013-05-15T06:56:39.757 に答える