title: Keep form data after errors on basic Shopify contact form
body: <p>I have added a basic contact form as described in <a href="http://wiki.shopify.com/How_to_add_a_contact_form_to_your_shop" rel="nofollow">Shopify Documentation</a>.</p>
  
  <p>My code:</p>
  
  <pre><code>{% form 'contact' %}
  
  {% if form.posted_successfully? %}
  &lt;div class="successForm feedback"&gt;
    &lt;p&gt;Thanks for contacting us. We'll get back to you as soon as possible.&lt;/p&gt;
  &lt;/div&gt;
  {% endif %}
  
  {% if form.errors %}
  &lt;div class="errorForm feedback"&gt;
    &lt;p&gt;Sorry, we were unable to submit your inquiry because it contained {{ form.errors | size | pluralize: 'an error', 'a few errors' }}.&lt;br/&gt;Please correct the following and submit again:&lt;/p&gt;
    {% for field in form.errors %}
    &lt;p&gt;&lt;strong&gt;The {{ field | capitalize | replace: 'Body', 'Comments / questions' }} field {{ form.errors.messages[field] }}.&lt;/strong&gt;&lt;/p&gt;
    {% endfor %}
  &lt;/div&gt;
  {% endif %}
  
  &lt;div id="contactFormWrapper"&gt;
    &lt;h3&gt;Personal details&lt;/h3&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;label&gt;First name:&lt;/label&gt;
        &lt;input type="text" id="contactFormFirstName" name="contact[first-name]" placeholder="" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;label&gt;Last name:&lt;/label&gt;
        &lt;input type="text" id="contactFormLastName" name="contact[last-name]" placeholder="" /&gt;
      &lt;/li&gt;          
      &lt;li&gt;
        &lt;label&gt;Email address:&lt;/label&gt;
        &lt;input type="email" id="contactFormEmail" name="contact[email]" placeholder="" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;label&gt;Telephone number:&lt;/label&gt;
        &lt;input type="telephone" id="contactFormTelephone" name="contact[phone]" placeholder="" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;label&gt;City:&lt;/label&gt;
        &lt;input type="text" id="contactFormCity" name="contact[city]" placeholder="" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;label&gt;Country:&lt;/label&gt;
        &lt;input type="text" id="contactFormCountry" name="contact[country]" placeholder="" /&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;h3&gt;Items&lt;/h3&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;label&gt;Items:&lt;/label&gt;
        &lt;input type="text" id="contactFormItems" name="contact[items]" placeholder="" /&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
        &lt;label&gt;Questions:&lt;/label&gt;
        &lt;textarea rows="10" id="contactFormComments" name="contact[body]" placeholder=""&gt;&lt;/textarea&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="clearfix"&gt;&lt;/div&gt;
    &lt;div class="main-button-container"&gt;
      &lt;input type="submit" id="contactFormSubmit" value="Submit Enquiry" class="btn button-style" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  {% endform %}
  </code></pre>
  
  <p>However, if a user tries to submit the form but has filled it in incorrectly, the page refreshes with an error message and clears all of the data. This is not ideal from a user experience point of view, as the user has to re-enter everything.</p>
  
  <p>How can I keep all of the previous data filled in after a form error? Please help.</p>