Веб-дизайн — удалённая работа в Москве

доработка кастомной формы на Тилда. Проект: Создание формы для выбора формы обучения и связи. 1. Общее описание задачи Цель: Разработать кастомную форму на Tilda с уникальным дизайном, адаптированную под существующий сайт. Форма должна собирать данные пользователей (форма обучения, контактные данные) и передавать их в email Требования к платформе: - Форма создается на Tilda (с использованием Zero Block или кастомного кода). - Адаптивность под все устройства (ПК, планшеты, мобильные). - Совместимость с браузерами: Chrome, Safari, Firefox, Яндекс.Браузер. 2. Функциональные требования Поля формы: Обязательные поля: Форма обучения: Варианты: «Очная (офлайн)», «Заочная (онлайн)», «Очно-заочная (комбинированная)». Дизайн кнопок: По умолчанию: белый фон, черный текст. При выборе: синий фон, белый текст + иконка галочки справа. Анимация: плавное изменение цвета и текста при наведении и выборе (задержка 0.3s). Удобный способ связи: Варианты: «Телеграм», «Вотсап», «По телефону». Дизайн кнопок: аналогично выбору формы обучения (белый → синий фон, черный → белый текст). Телефон: Маска: +7 (XXX) XXX-XX-XX. Валидация: ровно 11 цифр, подсветка ошибки при неверном вводе. Дополнительные поля: Кнопка «Узнать стоимость» с анимацией при наведении (например, изменение цвета фона/текста). Чекбокс: «Нажимая «отправить», вы соглашаетесь на обработку и хранение персональных данных». Галочка активна по умолчанию! Стиль: кастомный дизайн (не стандартный HTML-чекбокс). Логика работы: Валидация телефона в реальном времени (ошибка, если номер неполный/некорректный). Уведомление об успешной отправке: всплывающее окно или блок с текстом («Спасибо! Данные отправлены») Форма не отправляется, если не выбрана форма обучения, способ связи или не заполнен телефон. 3. Дизайн и стили Визуальное соответствие: Форма должна точно повторять макет из Figma/PSD (шрифты, цвета, отступы, радиус кнопок). Адаптивность: Форма должна точно повторять макет из Figma/PSD (шрифты, цвета, отступы, радиус кнопок). На мобильных: все элементы в одну колонку, кнопки растягиваются на всю ширину. Анимации: Плавное изменение цвета кнопок при наведении/выборе. Задержка анимации: не более 0.3 секунды. 4. Интеграции Отправка данных: На email через Tilda Forms (настройка получателя в панели администратора Tilda). 5. Тестирование Проверка на всех устройствах и браузерах (включая Яндекс.Браузер). Тест валидации: ввод некорректного телефона, попытка отправки без выбора опций. Проверка интеграции: данные должны поступать в email Проверка анимаций (кнопки, чекбокс, уведомления). 6. Требования к коду Использовать минимальное количество кастомного кода (если возможно — Zero Block). Код должен быть совместим с Tilda (без конфликтов с native-скриптами платформы). Для кастомных элементов (чекбокс, кнопки) — чистая CSS-реализация. 7. Дополнительно Инструкция по редактированию: Как изменить текст кнопок/чекбокса в редакторе Tilda. Как обновить цвета/шрифты через CSS (если использовался кастомный код). Исходники: Передать все кастомные CSS/JS-файлы. Гарантия: 14 дней на исправление багов (некорректная отправка, ошибки в адаптиве). Критерии приемки: Форма соответствует макету из Figma/PSD. Данные успешно поступают в email Нет ошибок в консоли браузера и при отправке. Приложения: Ссылка на макет в Figma https://www.figma.com/design/QGpOtlSBvKn0FzZUsGDhcE/ExpertGroup-%D0%B8%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B8%D0%BA?node-id=1-680&t=1CPVOHatB0JO2aAw-0.