Формы и поля: меньше полей, понятные подписи, нужная клавиатура

<div class="field">
  <label class="field__label" for="phone">Телефон</label>
  <input class="field__input" id="phone" name="phone" type="tel"
         autocomplete="tel" required aria-describedby="phone-hint">
  <p class="field__hint" id="phone-hint">Перезвоним по этому номеру</p>
</div>

<div class="field field--postcode">
  <label class="field__label" for="postcode">Индекс</label>
  <input class="field__input" id="postcode" name="postcode"
         inputmode="numeric" autocomplete="postal-code" maxlength="6">
</div>

<div class="field">
  <label class="field__label" for="sms-code">Код из SMS</label>
  <input class="field__input" id="sms-code" name="sms-code"
         inputmode="numeric" autocomplete="one-time-code" maxlength="6">
</div>

<div class="field">
  <label class="field__label" for="comment">Комментарий <span>· необязательно</span></label>
  <textarea class="field__input" id="comment" name="comment" rows="3"></textarea>
</div>

/* Одна колонка: взгляд идёт вниз, а не зигзагом */
.form {
  display: grid;
  gap: var(--space-5);
  max-width: 32rem;
}

.field {
  display: grid;
  gap: var(--space-1);
}

/* От 16px: Safari на iPhone не увеличивает страницу при фокусе */
.field__input {
  min-height: 2.75rem;
  padding-inline: var(--space-3);
  font-size: max(1rem, 16px);
}

/* Ширина подсказывает длину ответа */
.field--postcode .field__input {
  inline-size: calc(6ch + 2 * var(--space-3));
}

.field__label span,
.field__hint {
  font-size: var(--step--1);
  color: var(--color-text-muted);
}