Как оставить форму видимой после её отправки

В GetCourse формы устроены так, что после отправки они скрываются, а вместо них показывается сообщение «Спасибо, форма отправлена». Но зачастую при создании лендингов приходится скрывать это сообщение, чтобы оставить поля формы видимыми после её отправки.

Запретить скрытие полей формы — не проблема. Сложность в том, что месседж «форма отправлена» не скрыть простым display:none. Потому что в этом случае вместе с ним будут скрыты и другие «результаты» отправки формы. Например, все сообщения об ошибках (в частности о том, что пользователь не заполнил какое-то обязательное поле), а это очень сильно подорвет конверсию.

Решение состоит в том, чтобы добавить форме «класс состояния», который будет обозначать, что форма отправлена без ошибок. Для этого можно помечать отдельным классом успешно отправленные формы, и тогда в зависимости от этого мы уже сможем делать что угодно.

В этом нам поможет JavaScript:

Этот код отловит отправку любой формы, проверит, что она отправилась успешно, и тогда добавит ей класс sended.

Теперь, используя этот класс, мы можем написать стили, которые будут срабатывать только тогда, когда форма отправлена.

К примеру, сделаем видимыми поля и скроем сообщение формы:

А чтобы пользователю было понятно, что форма уже отправилась, можем написать это прямо на кнопке и заблокировать её повторное нажатие: