Form

<div class="o-form">
  <form aria-label="Example form description">
    <h3>Your inquiry</h3>
    <h4>Contact data</h4>
    <div class="m-form-field">
      <div class="a-text-field">
        <label for="text-input-firstName">First name *</label>
        <input type="text" id="text-input-firstName" />
      </div>
    </div>
    <div class="m-form-field">
      <div class="a-text-field">
        <label for="text-input-lastName">Last name *</label>
        <input type="text" id="text-input-lastName" />
      </div>
    </div>
    <div class="o-form__row">
      <div class="m-form-field">
        <div class="a-text-field">
          <label for="text-input-street">Street</label>
          <input type="text" id="text-input-street" />
        </div>
      </div>
      <div class="m-form-field -quarter">
        <div class="a-text-field">
          <label for="text-input-nr">No</label>
          <input type="text" id="text-input-nr" />
        </div>
      </div>
    </div>
    <div class="o-form__row">
      <div class="m-form-field -half">
        <div class="a-text-field">
          <label for="text-input-zip">Zip code</label>
          <input type="text" id="text-input-zip" />
        </div>
      </div>
      <div class="m-form-field -half">
        <div class="a-text-field">
          <label for="text-input-city">City</label>
          <input type="text" id="text-input-city" />
        </div>
      </div>
    </div>
    <div class="m-form-field">
      <div class="a-text-field">
        <label for="text-input-country">Country</label>
        <input type="text" id="text-input-country" />
      </div>
    </div>
    <div class="m-form-field">
      <div class="a-email-input">
        <label for="email-input-email">E-Mail address *</label>
        <input type="email" id="email-input-email" name="email" />
      </div>
    </div>
    <div class="m-form-field">
      <div class="a-telephone-input">
        <label for="telephone-input-telephone">Telephone</label>
        <input type="tel" id="telephone-input-telephone" name="telephone" />
      </div>
    </div>
    <h4>Personal password</h4>
    <div class="m-form-field">
      <div class="a-password-input">
        <label for="password-input-password">Password *</label>
        <input type="password" id="password-input-password" name="password" />
        <button
          type="button"
          class="a-password-input__icon-password"
          aria-label="Show password"
        >
          <i class="a-icon ui-ic-watch-on"></i>
        </button>
      </div>
    </div>
    <div class="m-form-field">
      <div class="a-password-input">
        <label for="password-input-repeatPasword">Repeat password *</label>
        <input
          type="password"
          id="password-input-repeatPasword"
          name="repeatPasword"
        />
        <button
          type="button"
          class="a-password-input__icon-password"
          aria-label="Show password"
        >
          <i class="a-icon ui-ic-watch-on"></i>
        </button>
      </div>
    </div>
    <h4>Asking something</h4>
    <p>
      Paragraph Text View standard regular Lorem ipsum dolor sit sadipscing
      elitr?
    </p>
    <div class="m-form-field m-form-field--radio">
      <div class="a-radio-button">
        <input type="radio" id="radio-button-1stopt" name="radioSelect" />
        <label for="radio-button-1stopt">First option</label>
      </div>
    </div>
    <div class="m-form-field m-form-field--radio">
      <div class="a-radio-button">
        <input type="radio" id="radio-button-2ndopt" name="radioSelect" />
        <label for="radio-button-2ndopt">Second option</label>
      </div>
    </div>
    <div class="m-form-field m-form-field--radio">
      <div class="a-radio-button">
        <input type="radio" id="radio-button-3rdopt" name="radioSelect" />
        <label for="radio-button-3rdopt">Third option</label>
      </div>
    </div>
    <h4>Space for your remarks</h4>
    <div class="m-form-field">
      <div class="a-text-area">
        <label for="poem">Your poem</label>
        <textarea id="poem"></textarea>
      </div>
    </div>
    <h4>Data protection</h4>
    <p>
      Paragraph Text View standard regular Lorem ipsum dolor sit sadipscing
      elitr?
    </p>
    <div class="m-form-field m-form-field--checkbox">
      <div class="a-checkbox">
        <input type="checkbox" id="checkbox-agree" />
        <label for="checkbox-agree">I agree *</label>
      </div>
    </div>
    <button
      type="submit"
      class="a-button a-button--primary -without-icon"
      data-frok-action="submit"
    >
      <span class="a-button__label">Submit form</span>
    </button>
    <p class="-size-s">Required fields *</p>
  </form>
</div>