Лендинг для сбора заявок на мастер-класс флориста

Разработка лендинга: мастер-класс по составлению букетов от профессионального флориста

Для флориста Венеры Вышкиной разработан адаптивный HTML-лендинг под бесплатный онлайн мастер-класс. Страница сверстана как самостоятельный файл с HTML-разметкой, CSS-стилями и JavaScript-логикой для формы. Такой формат подходит для размещения на обычном хостинге, отдельном домене, поддомене или внутри существующего сайта.

Адаптивная верстка

Лендинг корректно открывается на компьютерах, планшетах и смартфонах. Для сеток используются CSS Grid и Flexbox, поэтому карточки, текстовые блоки, изображения и форма перестраиваются под ширину экрана. На мобильных устройствах кнопки становятся крупнее, поля формы занимают всю ширину, а элементы страницы сохраняют удобный порядок чтения.

Визуальная система

В CSS вынесены основные переменные: цвета, радиусы, тени и градиенты. Это упрощает дальнейшую правку дизайна. Основной акцент сделан на сиреневый градиент, яркие цветочные оттенки, мягкие тени и крупные скругления. При необходимости цветовую схему можно быстро изменить без полной переработки верстки.

Форма регистрации

Форма собирает имя, телефон, e-mail и комментарий участника. Поля размечены с учетом базовой HTML-валидации: обязательное заполнение, проверка e-mail и отдельный тип поля для телефона. После отправки данные передаются на почту организатора. В письме фиксируются контакты участника и текст комментария, поэтому заявку можно сразу обработать.

Подключение к почте и защита формы

Для формы настроена отправка заявок через почтовый обработчик. После заполнения данные участника уходят на e-mail организатора: имя, телефон, адрес почты и комментарий. Отдельно настроено автоматическое письмо для участника. В нем отправляется ссылка на онлайн мастер-класс и подарок – гайд «Как собрать стильный букет».

Форма защищена от случайных пустых отправок за счет обязательных полей и базовой проверки e-mail. Перед отправкой пользователь подтверждает согласие на обработку данных. Лендинг размещен с SSL-сертификатом, поэтому форма работает через защищенное HTTPS-соединение.

Скриншот:

Форма заказа