Форма для отправки сообщения администрации сайта.

Прототипы

Критерии приемки:

1. Модальное окно формы обратной связи открывается по нажатию на иконку/кнопку обратной связи в Подвал (footer) .
2. Модальное окно формы обратной связи закрывается по нажатию на иконку закрытия.
3. Для мобильной версии: окно формы обратной связи открывается на весь экран.
4. Элементы модального окна формы обратной связи представлены в таблице ниже.

2. Содержит текст “Свяжитесь с нами”. | MVP | | 2 | Закрыть | Иконка | 1. По нажатию на иконку закрытия окно закрывается.
3. Иконка закрытия представлена векторным изображением. | MVP | | 3 | Имя | Поле | 1. Содержит подпись с текстом “Ваше имя”.
4. Поле не обязательно для заполнения.
5. Поле содержит подсказку placeholder с текстом “Иван”.
6. Ограничение по вводу - 80 символов.
7. По нажатию на клавишу Tab система переводит каретку в следующее поле “E-mail”. | MVP | | 4 | E-mail | Поле | 1. Содержит подпись с текстом “Ваш e-mail*”.
8. Поле обязательно для заполнения.
9. Поле содержит подсказку placeholder с текстом “[email protected]”.
10. Ограничение по вводу - 256 символов.
11. По нажатию на клавишу Tab или клику в любом месте вне поля ввода система проверяет, является ли введенная комбинация символов адресом электронной почты с соответствии с ‣.
12. Если введеные данные не проходят проверку, система переводит поле в состояние ошибки.
13. Состояние ошибки - обводка поля становится красной, над полем выводится сообщение “Введите корректный адрес электронной почты”.
14. Сообщение “Введите корректный адрес электронной почты” пропадает при клике внутри поля ввода.
15. Обводка полем красным сохраняется, пока введенные данные не пойдут проверку или пока пользователь не очистит поле. | MVP | | 5 | Сообщение | Поле | 1. Содержит подпись с текстом “Сообщение*”.
16. Поле обязательно для заполнения.
17. Поле содержит подсказку placeholder с текстом “Введите сообщение”.
18. Ограничение по вводу - 1000 символов.
19. Состояние ошибки - обводка поля становится красной, над полем выводится сообщение “Введите сообщение”.
20. Сообщение “Введите сообщение” пропадает при клике внутри поля ввода.
21. Обводка полем красным сохраняется, пока пользователь не введет в поле какие-либо символы. | MVP | | 6 | Согласие | Чекбокс | 1. По умолчанию находится в неотмеченном состоянии.
22. По нажатию на чекбокс система меняет его соостояние на “отмечено”.
23. Состояние ошибки - обводка чекбокса становится красной.
24. Обводка полем красным сохраняется, пока пользователь не отметит чекбокс.
25. Подпись к чекбоксу содержит текст: “Нажимая кнопку «Отправить», я даю свое согласие на обработку моих персональных данных, в соответствии с Федеральным законом от 27.07.2006 года №152-ФЗ «О персональных данных», на условиях и для целей, определенных в Согласии на обработку персональных данных*”, где подчеркнутый текст - ссылка на Федеральный закон №152-ФЗ. | MVP | | 7 | Отправить | Кнопка | 1. Кнопка по умолчанию активна (ярко-оранжевый цвет).
26. При попытке пользователя нажать на кнопку, если форма заполнена некорректно, система переводит в состояние ошибки поля, состояние которых не удовлетворяет требованиям системы (см. п 3 ниже) и переводит кнопку в неактивное состояние (бледно-оранжевый цвет).
27. После ошибки кнопка остается неактивной, пока форма не будет заполнена корректно.
28. Система считает форму заполненной корректно при одновременном выполнении всех перечисленных ниже условий:

• поле E-mail заполнено
• введеный пользователем в поле E-mail адрес электронной почты прошел проверку
• поле Сообщение заполнено
• чекбокс Согласие находится в отмеченном состоянии.

5. По нажатию на кнопку система формирует сообщение и отправляет его на электронную почту администратора сайта [email protected]. Шаблон письма можно найти по ссылке. ****6. Система ****закрывает модальное окно формы обратной связи и выводит сообщение об успешной отправке обращения.
6. Сообщение об успешной отправке обращения содержит текст “Ваше сообщение отправлено”, кнопку “ОК” иконку закрытия, представленную векторным изображением.
7. Сообщение об успешной отправке обращения автоматически закрывается через 5 секунд.
8. Система также закрывает сообщение об успешной отправке обращения по нажатию на иконку закрытия или кнопку “ОК” в окне сообщения. | MVP |