Track Your Order

<style>
  .zp-track {
    --zp-navy: #132D49;
    --zp-lime: #8BBF35;
    --zp-light: #F5F6F4;
    max-width: 760px;
    margin: 48px auto;
    padding: 48px 28px;
    background: var(--zp-navy);
    color: #fff;
    border-radius: 18px;
    text-align: center;
    font-family: inherit;
  }

  .zp-track * {
    box-sizing: border-box;
  }

  .zp-track__eyebrow {
    color: var(--zp-lime);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .zp-track h1 {
    color: #fff;
    font-size: clamp(30px, 5vw, 42px);
    line-height: 1.15;
    margin: 12px 0;
  }

  .zp-track__intro {
    max-width: 520px;
    margin: 0 auto 28px;
    color: #E0E7ED;
    line-height: 1.7;
  }

  .zp-track__form {
    max-width: 540px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 12px;
    background: #fff;
    color: var(--zp-navy);
    text-align: left;
  }

  .zp-track label {
    display: block;
    margin: 0 0 8px;
    font-weight: 650;
    font-size: 14px;
  }

  .zp-track input,
  .zp-track select {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #CBD5DF;
    border-radius: 7px;
    background: #fff;
    color: #132D49;
    font: inherit;
  }

  .zp-track input:focus,
  .zp-track select:focus {
    outline: 2px solid var(--zp-lime);
    outline-offset: 2px;
  }

  .zp-track__field {
    margin-bottom: 18px;
  }

  .zp-track__button {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 14px 18px;
    border: 0;
    border-radius: 7px;
    background: var(--zp-lime);
    color: #132D49;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    transition: filter .2s ease;
  }

  .zp-track__button:hover {
    filter: brightness(.94);
  }

  .zp-track__error {
    color: #B42318;
    font-size: 13px;
    margin-top: 12px;
  }

  .zp-track__hint {
    margin-top: 18px;
    color: #E0E7ED;
    font-size: 13px;
    line-height: 1.6;
  }

  .zp-track__help {
    margin-top: 24px;
    color: #E0E7ED;
    font-size: 14px;
  }

  .zp-track__help a {
    color: var(--zp-lime);
    text-underline-offset: 3px;
  }

  @media (max-width: 600px) {
    .zp-track {
      margin: 24px 0;
      padding: 34px 16px;
      border-radius: 12px;
    }

    .zp-track__form {
      padding: 18px;
    }
  }
</style>

<section class="zp-track" aria-labelledby="zp-track-title">
  <div class="zp-track__eyebrow">ORDER SUPPORT</div>

  <h1 id="zp-track-title">Track Your Order</h1>

  <p class="zp-track__intro">
    Your package, one step closer. Enter your tracking number
    and select your shipping carrier to check the latest delivery updates.
  </p>

  <form class="zp-track__form" id="zp-track-form">
    <div class="zp-track__field">
      <label for="zp-tracking-number">Tracking Number</label>
      <input
        id="zp-tracking-number"
        name="tracking-number"
        type="text"
        placeholder="Enter your tracking number"
        autocomplete="off"
        required
        maxlength="80"
      >
    </div>

    <div class="zp-track__field">
      <label for="zp-carrier">Shipping Carrier</label>
      <select id="zp-carrier" name="carrier" required>
        <option value="auto">Auto-detect carrier</option>
        <option value="usps">USPS</option>
        <option value="ups">UPS</option>
        <option value="fedex">FedEx</option>
        <option value="other">Other / Not sure</option>
      </select>
    </div>

    <button class="zp-track__button" type="submit">
      Track Package →
    </button>

    <p
      class="zp-track__error"
      id="zp-track-error"
      role="alert"
      aria-live="polite"
      hidden
    ></p>
  </form>

  <p class="zp-track__hint">
    Tracking updates may take some time to appear after your package ships.
  </p>

  <p class="zp-track__help">
    Need help with your shipment?
    <a href="/de-de/pages/contact">Contact Us</a>
  </p>
</section>

<script>
(function () {
  var form = document.getElementById('zp-track-form');
  if (!form || form.dataset.initialized === 'true') return;
  form.dataset.initialized = 'true';

  var numberInput = document.getElementById('zp-tracking-number');
  var carrierInput = document.getElementById('zp-carrier');
  var error = document.getElementById('zp-track-error');

  var trackingUrls = {
    usps: 'https://tools.usps.com/go/TrackConfirmAction?tLabels=',
    ups: 'https://www.ups.com/track?tracknum=',
    fedex: 'https://www.fedex.com/fedextrack/?trknbr='
  };

  function detectCarrier(number) {
    var value = number.replace(/[\s-]/g, '').toUpperCase();

    if (/^1Z[A-Z0-9]{16}$/.test(value)) return 'ups';

    if (/^(420\d{5,}|9[0-9]{19,21}|[A-Z]{2}\d{9}US)$/.test(value)) {
      return 'usps';
    }

    if (/^\d{12}$|^\d{15}$|^\d{20}$|^\d{22}$/.test(value)) {
      return 'fedex';
    }

    return null;
  }

  form.addEventListener('submit', function (event) {
    event.preventDefault();

    var number = numberInput.value.trim();
    var carrier = carrierInput.value;

    error.hidden = true;
    error.textContent = '';

    if (!number) {
      error.textContent = 'Please enter your tracking number.';
      error.hidden = false;
      numberInput.focus();
      return;
    }

    if (number.length > 80) {
      error.textContent = 'Please check your tracking number and try again.';
      error.hidden = false;
      numberInput.focus();
      return;
    }

    if (carrier === 'auto') {
      carrier = detectCarrier(number);

      if (!carrier) {
        error.textContent =
          'We could not identify the carrier. Please select USPS, UPS, or FedEx from the list.';
        error.hidden = false;
        carrierInput.focus();
        return;
      }
    }

    if (carrier === 'other') {
      error.textContent =
        'Please check your shipping confirmation email for the correct carrier and its official tracking website.';
      error.hidden = false;
      return;
    }

    if (!trackingUrls[carrier]) {
      error.textContent = 'Please select a supported shipping carrier.';
      error.hidden = false;
      return;
    }

    var cleanNumber = number.replace(/[\s-]/g, '');

    window.location.assign(
      trackingUrls[carrier] + encodeURIComponent(cleanNumber)
    );
  });
})();
</script>