[Урок 15] Создаём сайт на стандартных блоках (6 часть)

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

Сейчас мы изучим формы, подключим и настроим первую форму обратной связи и стилизуем её под наш сайт. Погнали!)

Ищем нужную форму

Переходим во "Все блоки" и ищем раздел "Форма и кнопка". Вариантов для выбора здесь ну очень много, но нам нужна только одна. Мы делаем форму обратной связи, для брони столиков, поэтому я возьму блок BN309N - Карточка с формой захвата на фоновом изображении

После установки у нас появится жёлтое окно под формой :

На него мы не обращаем внимания. При публикации сайта оно не будет отображаться.

Настраиваем блок

Переходим к основным настройкам блока и видим то, что новых настроек нет. Всё аналогично другим блокам, которые мы редактировали.

Лично я установлю такие параметры :

  1. Высота : 400px
  2. Ширина : 10 колонок
  3. Цвет фона карточки : #292929
  4. Название формы : придумайте сами
  5. Стиль обложки : оставляю по умолчанию
  6. Стиль полей для ввода : везде устанавливаю белый (#ffffff) цвет. Цвет фона оставляю прозрачным (просто не заполняем окно)
  7. Кнопки : цвет кнопки - белый ; цвет текста кнопки - черный
  8. Цвет заголовка и описания так же белый
  9. Остальные параметры я не редактировал. Делайте форму на свой цвет и вкус. Помните - мы тренируемся, не вкладывайте в этот сайт особый смысл)

Вот что получилось у меня:

Переходим к настройкам контента

Заголовок и описание можете писать любые. Я написал так:

Фоновое изображение: загружаете нажав на кнопку, либо выбираете из предложенной библиотеки. Про фотостоки мы говорили ранее.

Теперь переходим к самому интересному - настройке самой формы приёма данных. По умолчанию стоит приём email контактов, но нам нужны номера. Открываем вкладку "Поля для ввода".

Удаляем поле, которое стоит по умолчанию. Добавляем новое, нажимая на кнопочку "Добавить поле для ввода".

Выбираем тип : телефон

Подсказка значения : это то серое поле, которое будет на фоне окна для ввода, как бы подсказывая пользователю в каком формате вводить информацию в данное окно.

Я поставлю такую подсказку :

Заголовок поля и подзаголовок поля : в подзаголовке я ничего не буду писать, так как заголовка будет достаточно. В заголовке оставлю : Ваш номер

Имя переменной введём "phone"

Системное название для идентификации данных из разных полей (не отображается). Рекомендуется использовать латиницу. Не обязательно для заполнения.

Тип маски: выбираем "Автоматическая маска с кодом страны". По умолчанию устанавливаем любой код страны. Сайт будет сам подсказывать пользователю что водить, полезный инструмент.

Ставим галочку рядом с надписью "Обязательно для заполнения". С телефоном всё.

Добавляем ещё одно поле - выбираем "Имя".

Заполняем аналогично предыдущему полю, только намного проще. Я заполнил так :

Приём из форм данных

Мы будем собирать заявки в CRM тильды, но можно подключить другие сторонние сервисы, например стороннюю crm или сервис для email маркетинга. Мы разберём подключение сервисов более подробно в другом уроке.

Листаем вниз настроек

Устанавливаем текст кнопки: Забронировать

Сообщение об успешной отправки формы: текст, который будет показываться пользователю после заполнения и отправки формы. Я написал такой:

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

Текст под формой: небольшой текст под самой формой, в котором например говорится о конфиденциальности данных пользователей или о пользовательском соглашении.

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

Сохраняем и закрываем, публикуем и смотрим

Поздравляю! Если вы сделали всё правильно - у вас получилась рабочая форма. Остался только один вопрос.

Где искать заявки из формы?

Заполним форму случайными данными и нажмем на кнопку "Забронировать".

Появилось такое зеленое окошко (сработал параметр "Сообщение об успешной отправки формы "). Возвращаемся на тильду.

На странице нашего сайта ищем кнопку "Заявки".

Переходим туда и видим, что данные, которые мы оставили в форме пришли сюда.

На этом всё. Первая форма создана. Можете попробовать создать любую другую форму (выбрать другой блок) самостоятельно. Всем успехов!)