Form


component variations

Form Example

Your inquiry

Contact data

Personal password

Asking something

Paragraph Text View standard regular Lorem ipsum dolor sit sadipscing elitr?

Space for your remarks

Data protection

Paragraph Text View standard regular Lorem ipsum dolor sit sadipscing elitr?

Required fields *

<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="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="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="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="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="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="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="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="LoremIpsum"
        >
          <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="LoremIpsum"
        >
          <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>

additional content

styles SCSS

@use "sass:math";

.o-form {
  margin: 4rem 0;

  &__row {
    display: flex;
    flex-direction: row;

    .m-form-field {
      margin-left: math.div($formFieldSpacing, 2);
      margin-right: math.div($formFieldSpacing, 2);

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  form {
    width: 100%;
  }

  h4 {
    margin: 3rem 0 1.5rem;
  }

  /* stylelint-disable-next-line selector-no-qualifying-type */
  button[type='submit'] {
    margin: 3rem 0;
  }
}