Keep form data after errors on basic Shopify contact form -
i have added basic contact form described in shopify documentation.
my code:
{% form 'contact' %} {% if form.posted_successfully? %} <div class="successform feedback"> <p>thanks contacting us. we'll possible.</p> </div> {% endif %} {% if form.errors %} <div class="errorform feedback"> <p>sorry, unable submit inquiry because contained {{ form.errors | size | pluralize: 'an error', 'a few errors' }}.<br/>please correct following , submit again:</p> {% 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 %}
however, if user tries submit form has filled in incorrectly, page refreshes error message , clears of data. not ideal user experience point of view, user has re-enter everything.
how can keep of previous data filled in after form error? please help.
you can display submitted data using value
attribute. example:
<input type="text" id="contactformemail" name="contact[email]" value="{{form.email}}" />
or textarea
:
<textarea id="contactformcomments" name="contact[body]">{{form.body}}</textarea>
Comments
Post a Comment