Form rules

Each element in the form is surrounded by the element <div class="FormItem">. The mandatory form fields also have the class name 'required'. Additionally, depending on the function of the element, it can have an additional class name that is given based on the following rules:

• Form parts can include a header section <div class = "FormItem HeaderItem">.
  • The header section contains a header element <h2>, and a text element <p>, which serves as a general instruction to the form to be filled in.
  • All forms' help texts can be edited in the online store's dictionary.
• If a part of a form contains multiple form fields that are grouped, the additional class name 'GroupItem' is added to the section.
  • Such group starts with <label class = "GroupLabel"> that describes the group as an entity, after which each part of the entity is within its own <div> element. Within each of these elements, there is always a label, followed by either the <input> or <select> element.
• In case of check boxes or buttons (<input type="checkbox/radio">), the additional class name 'CheckWrap' will be added to the section. It can be either the <div> or <fieldset> element.
  • The first element inside such group is the text element <p class="label">.
  • The introductory text element is followed by the <div class="Checks"> element that contains the checkboxes and buttons.
    • Each checkbox is printed inside a description element (<label>), which is then followed by the checkbox's name.
    • After closing the description element, it is also possible to print a text element <p class="FormHelp"> with an instruction or help text to the checkbox.
• The element <div class = "FormItem FormSubmit"> is responsible for sending the data entered into the form.
  • Within this element, there is always a button (<button>) and, in case of the form's main send button, it also has the class name 'SubmitButton'.
  • After the button, there may also be a paragraph with a link to an alternative action. The paragraph has the class name 'FormAltAction'.

Below you will find the complete markup of a form for editing customer data as an example:

<form action="/account/edit/" method="post" id="EditContactInfoForm">
  <fieldset id="EditContactInfo">
    <input type="hidden" name="on_success" value="/account/">

    <div class="FormItem HeaderItem">
      <h2>Edit your data</h2>
    </div>

    <div class="FormItem required ">
      <label for="email">Emaili</label>
      <input id="email" type="email" name="customer[email]" autocomplete="email" value="tino@pulse247.info" size="27">
      <div id="OrderNewsletter" class="Checks InlineCheck">
        <label for="email_subscription">
        <input type="checkbox" name="customer[email_subscription]" id="email_subscription" value="1"> Yes, I want to subscribe to the free newsletter.</label>
      </div>
    </div>

    <div class="FormItem GroupItem required ">
      <label for="firstname" class="GroupLabel">Name</label>
      <div class="">
        <label for="firstname">First name</label>
        <input id="firstname" name="customer[firstname]" autocomplete="given-name" value="Tino" type="text" size="18">
      </div>
      <div class="">
        <label for="lastname">Surname</label>
        <input id="lastname" name="customer[lastname]" autocomplete="family-name" value="Kraft" type="text" size="18">
      </div>
    </div>
  
  <div class="FormItem GroupItem required ">
    <label for="street_address" class="GroupLabel">Address</label>
    <div class="">
      <label for="street_address">Street address</label>
      <input id="street_address" name="customer[street_address]" autocomplete="street-address" value="LSKDNL" class="long" type="text" size="27">
    </div>
    <div class="">
      <label for="postal_code" class="required">Postal code</label>
      <input id="postal_code" name="customer[postal_code]" autocomplete="postal-code" value="33100" class="short" type="text" size="8">
    </div>
    <div class="">
      <label for="post_office" class="required">Post office</label>
      <input id="post_office" name="customer[post_office]" autocomplete="address-level2" value="Tampere" type="text" size="18">
    </div>
  </div>

  <div class="FormItem required">
    <label for="country">Country</label>
    <select name="customer[country]" id="country">
      <option value="af">Afghanistan</option>
      <option value="ax">Ahvenanmaa</option>
      ...
      </select>
  </div>

  <div class="FormItem">
    <label for="phone">Phone</label>
    <input id="phone" type="text" name="customer[phone]" autocomplete="tel" value="0405353543" size="27">
    <div class="Checks InlineCheck">
      <label for="sms_subscription">
      <input type="checkbox" name="customer[sms_subscription]" id="sms_subscription" value="1"> Yes, I want to subscribe to SMS marketing messages						</label>
    </div>
  </div>

  <div class="FormItem GroupItem">
    <label for="company" class="GroupLabel">Company</label>
    <div class="">
      <label for="company">Company</label>
      <input id="company" name="customer[company]" autocomplete="off" value="" class="long" type="text" size="27">
    </div>
    <div class="">
      <label for="vat_code">Business ID</label>
      <input id="vat_code" name="customer[vat_code]" autocomplete="off" value="" class="short" type="text" size="8">
    </div>
  </div>


  <div class="FormItem FormSubmit">
    <button type="submit" class="SubmitButton"><span>Submit</span></button>
    <p class="FormAltAction Cancel">or <a href="/account/">
    <span>cancel and go back</span>
    </a></p>
  </div>
  </fieldset>
</form>