webshop/app/templates/partials/form-shipping-info.html

<label class="vh" for="email">Email address</label>
<input type="text" aria-label="Email address" id="email" name="email" value="" placeholder="Email address" required="required" class="w100 form-input mb4-25 sm-fs-big">

<label class="vh" for="first_name">First name (optional)</label>
<input type="text" aria-label="First name (optional)" id="first_name" name="first_name" value="" placeholder="First name (optional)" class="w100 form-input mb1-25 sm-fs-big">

<label class="vh" for="last_name">Last name</label>
<input type="text" aria-label="Last name" id="last_name" name="last_name" value="" placeholder="Last name" required="required" class="w100  form-input mb1-25 sm-fs-big">

<div class="x xdc md-xdr">
  <label class="vh" for="address">Address</label>
  <input type="text" aria-label="Address" id="address" name="address" value="" placeholder="Address" required="required" class="w100 md-w70 form-input mb1-25 sm-fs-big">
  <label class="vh" for="address">Address No</label>
  <input type="text" aria-label="Address Number" id="address_no" name="address_no" value="" placeholder="Address No." required="required" class="w100 md-w30 form-input md-ml1-25 mb1-25 sm-fs-big">
</div>

<label class="vh" for="address_extra">Apartment, suite, etc. (optional)</label>
<input type="text" aria-label="Apartment, suite, etc. (optional)" id="address_extra" name="address_extra" value="" placeholder="Apartment, suite, etc. (optional)" class="w100 form-input mb1-25 sm-fs-big">

<label class="vh" for="postal_code">Postal code</label>
<input type="text" aria-label="Postal code" id="postal_code" name="postal_code" value="" placeholder="Postal code" required="required" class="w100 form-input mb1-25 sm-fs-big">

<label class="vh" for="city">City</label>
<input type="text" aria-label="City" id="city" name="city" value="" placeholder="City" required="required" class="w100 form-input mb1-25 sm-fs-big">

<label class="vh" for="country">Country</label>
<select aria-label="Country" id="country" name="country" value="" required="required" class="w100 form-input mb1-25 sm-fs-big">
  <option value="">Country</option>
  {% for country in data.countries %}
  <option value="{{ country }}">{{ country }}</option>
  {% endfor %}
</select>

<label class="vh" for="city">Phone Number</label>
<input type="tel" aria-label="Phone Number" id="phone_number" name="phone_number" value="" placeholder="Phone Number" class="w100 form-input mb1-25 sm-fs-big">


<section class="x xdr xjsb xaib pt4-25 pb5-5">
  <h3 class="ff-sans fs-large sm-fs-huge">Shipping costs</h3>
  <noscript>
    <button type="submit" formaction="/checkout/shipping" class="bd-white fgc-white fs-biggish sm-fs-large pt0-25 pr0-75 pb0-25 pl0-75">Calculate Shipping</button>
  </noscript>
  <div class="subtotal--shipping fs-biggish sm-fs-large"><span class="amount">{% if cart.meta.shipping %}{{ cart.meta.shipping }}{% else %}-{% endif %}</span> {{ cart.meta.currency }}</div>
</section>

<section class="md-grid-c1-4 dg">
  <label class="vh" for="note">Additional note (optional)</label>
  <textarea aria-label="Additional note (optional)" id="note" name="note" rows="5" placeholder="Additional note (optional)" class="w100 form-input sm-fs-big"></textarea>
</section>