Что добавлял в форму

Ответ

Для улучшения UX и функциональности форм можно добавить:

  1. Валидацию полей (на клиенте и сервере)
  2. Маски ввода для телефонных номеров, дат
  3. Автозаполнение (autocomplete)
  4. Лоадер при отправке
  5. Обработку ошибок с понятными сообщениями
  6. Кастомные стили для состояний (focus, invalid)
  7. Визуальную обратную связь при успешной отправке

Пример улучшенного инпута:

<input
  type="tel"
  name="phone"
  placeholder="+7 (___) ___-__-__"
  pattern="+7s?[(]{0,1}9[0-9]{2}[)]{0,1}s?d{3}[-]{0,1}d{2}[-]{0,1}d{2}"
  required
  className="form-input"
/>

Ответ 18+ 🔞

Да ты посмотри на эти формы, блядь! Сидят, как будто их в 90-х верстали, ёпта. Ну прям пиздец, глаза вытекают.

Вот смотри, чтобы народ не охуевал, заполняя эту хуйню, надо бы прикрутить нормальную валидацию. И на клиенте, чтобы сразу подсказывало, и на сервере, на всякий пожарный, а то эти умники через Postman начнут всякую дичь слать.

Телефон, например. Ну какого хуя его без маски вводить? Человек начинает гадать: с плюса, без плюса, со скобками, без? Ему же не в казино играть, а номер оставить! Сделай маску, сука, чтобы само подставлялось: +7 (___) ___-__-__. И в pattern запили проверку, чтобы только цифры и в правильном порядке.

И автозаполнение, блядь, не забудь! autocomplete="tel" или "name". Это ж ебаная магия, которая сама подтягивает данные из браузера. Люди обожают эту хуйню, им меньше тыкать.

А самое главное — обратная связь, ёбта! Отправил форму — покажи крутилку, лоадер, чтобы понятно было: «О, работает, не зависло». Отправилось — зелёная галочка, «Спасибо, мудила, мы с тобой свяжемся». Не отправилось — красненьким высвети, где именно ты, кретин, накосячил: «Поле „Email“ содержит хуйню, а не адрес».

И стилизуй эти состояния, блядь! :focus, :invalid, :valid. Чтобы при наведении рамка светилась, а при ошибке — тряслась и краснела, как пьяная рожа.

Вот, смотри, как можно один инпут для телефона сделать, чтобы не было стыдно:

<input
  type="tel"
  name="phone"
  placeholder="+7 (___) ___-__-__"
  pattern="+7s?[(]{0,1}9[0-9]{2}[)]{0,1}s?d{3}[-]{0,1}d{2}[-]{0,1}d{2}"
  required
  className="form-input"
/>

Вот это уже похоже на дело, а не на говно в проруби. В общем, делай формы, которые не заставляют пользователя материться, а то он тебе в отзывах такое напишет, что мало не покажется.