Добро пожаловать на шестнадцатый урок. Сегодня поговорим про формы: создание контактных форм и настройка полей.
Elementor Pro предлагает различные типы форм, включая контактные формы, формы подписки, формы обратной связи и т. д. Они позволяют собирать данные от пользователей и улучшать взаимодействие с посетителями сайта.
Для создания новой формы в Elementor необходимо выбрать соответствующий виджет, добавить необходимые поля, такие как «Текст», E-mail, «Телефон» и выпадающие списки. Каждое поле можно настроить, установив обязательность, плейсхолдеры и лейблы.
Валидация данных и настройка автоматических ответов важны для улучшения пользовательского опыта и автоматизации процессов. Автоматические ответы могут быть настроены для уведомления пользователей, для успешной отправки формы или для подтверждения подписки.
В Elementor можно стилизовать формы, изменяя шрифты, цвета, отступы и рамки. Это позволяет улучшить визуальное восприятие формы и сделать её более привлекательной для пользователей.
Формы в Elementor могут быть интегрированы с популярными сервисами email-маркетинга, такими как MailChimp и тому подобными. Сервисов таких много. Для автоматической подписки пользователей на рассылки это упрощает процесс управления списками подписчиков и повышает эффективность маркетинговых кампаний.
На одном из уроков мы делали секцию и вставляли её шорткодом на другие страницы. Здесь мы создавали форму. Вот она у нас шорткодом. Давайте теперь выйдем, и в «Шаблонах» — вот наша секция. Будем редактировать её в Elementor.
Для начала давайте я здесь чуть-чуть стилизую контейнер. Так, граница: где-нибудь 15 пикселей сделаем скругление углов. В «Расширенных» отступ — 40 пикселей. Как вот здесь.
Выберем форму. И для начала можно поменять название формы. Например, «Обратная связь» или «Свяжитесь с нами». Давайте «Свяжитесь с нами» напишем.
Например, вот в этом макете есть несколько форм: «Контакты», «Консультация», «Запрос», опять «Консультация», «Твой отзыв», и вот — «Обратная связь». Это нужно, чтобы было понятно, с какой формы приходят данные. Но об этом чуточку попозже.
Пока что посмотрим на поля. По умолчанию здесь — поля «Имя», E-mail и «Сообщение». Давайте добавим новый элемент, и на его примере я покажу, какие типы полей есть для формы. По умолчанию идёт текстовое поле, где собирается простая информация, например имя, фамилия или ещё что-то. Далее у нас идёт почта — Email. Вот, у нас уже есть. Текстовая область — это вот такое большое сообщение. Большая область, где обычно пишут какое-нибудь сообщение.
Далее у нас идёт поле «Ссылка», куда записывается какой-нибудь адрес URL на какой-нибудь сайт. Далее у нас идёт поле с телефоном, где записывается обычно какой-нибудь телефон. Например, +7 и т. д.
Далее у нас идут переключатели. Это такое поле, где включаются радиокнопки. Давайте, например, 1, 2, 3, 4. И выбирается какой-либо вариант. Например, первый, третий или четвёртый.
Далее у нас идёт «Выпадающий список». Это то же самое практически, только выбирается уже в выпадающем списке.
Можно включить множественный выбор. И тогда у нас можно выбирать несколько штук. Что-то не выбирается…
Далее у нас идут флажки. Это такие чек-боксы, где можно выбирать несколько вариантов: 1, 3, например, 4. Наверняка вы сталкивались с такими полями формы.
Далее у нас идёт пользовательское соглашение. Например, соглашение на обработку персональных данных. «Соглашение на обработку…» и т. д. Не буду писать дальше.
Можно сделать: «Отмечено по умолчанию». Будет всегда отмечено.
Далее у нас идёт поле «Номер». Здесь, как, наверное, видно из названия, можно выбирать номерные какие-нибудь значения. Поставить минимальное, максимальное. И уже, если выбрать ниже или выше, будет ошибка.
Далее у нас идёт поле «Дата». Здесь выбирается какая-нибудь дата. Наверняка вы сталкивались с такими полями. Также идёт поле «Время»: ставится какое-нибудь время.
И идёт поле «Загрузка файла». Наверняка вы тоже сталкивались с этими полями: можно выбрать файл какой-нибудь, загрузить. Можно поставить максимальный размер: 1 Мб, 2 Мб. И допустимые типы файлов. Вот, видите? Тут разрешения подсказкой пишут, какие и через запятую.
Можно также поставить флажок на несколько файлов, и, например, максимум два файла.
Далее у нас идёт поле «Пароль». Это нужно для форм регистрации. Вы наверняка тоже сталкивались с этими полями. Можно HTML: здесь пишется какой-то HTML-тег.
Скрытое поле. Оно пользователям не нужно. Оно нужно для администраторов сайта, чтобы собирать какую-то дополнительную информацию с этой формы.
Далее идёт у нас reCAPTCHA. Но её надо настраивать в консоли Elementor. Я этого не буду делать. «Спам-ловушка» — это примерно то же самое.
А далее идёт у нас, например, «Шаг». Давайте посмотрим на него. Смотрите: первый элемент. Далее можно после имени добавить шаг. Также добавим, давайте, шаг №2 после Email. Обновим и посмотрим, как это будет. Например, заполняем «Имя», потом следующим мы заполняем Email, и следующим мы заполняем «Сообщение». Вот так вот. И отправляем.
Так, удалю я пока это всё.
Далее у нас идёт ярлык. Давайте выберем «Телефон». Ярлык нужен для того, чтобы это вот, например, здесь написалось. Например, давайте «Телефон». И ещё он нужен для того, чтобы здесь не было таких названий, как «Элемент 5», «Элемент 6», а задавалось именно правильное название формы.
Ярлыки можно также скрывать. Например, у нас вот здесь ярлыков нет над полями, так что мы их скрываем. Оставляем только заполнитель, или плейсхолдер, как он правильно называется. Так, у нас здесь написано: «Ваш телефон». «Ваш телефон». Также здесь можно — «Ваше имя», E-mail, «Сообщение» поменять. «Ваше имя».
Далее у нас идёт обязательное поле. Это чтобы при заполнении формы не пропускали эти поля. Например, давайте поставим «Ярлык» — «Показать» и «Значок «обязательно» — «Показать». Вы наверняка тоже видели такие и значки, и ярлыки. Давайте скроем. Например, «Имя» по умолчанию сделаем.
Далее можно поменять ширину колонки. Так, давайте добавим новую форму. Форма. Добавим новую. И, например, давайте «Имя» здесь сделаем. Ширина колонки — 33%, здесь тоже для E-mail сделаем: ширина — 33%. Так, давайте добавим ещё «Телефон». Так же 33%. Вот. Скроем ярлыки. Отступ снаружи для наглядности. И вот у нас колонки в одну линию.
Так, ладно. Удалим. Посмотрим на нашу форму.
Далее у нас идут кнопки. Также можно выравнивание посередине сделать, как вот здесь, в макете. И стандартные настройки, как для всех кнопок: можно поменять текст, добавить иконку и т. д. Также здесь можно настраивать кнопки шагов, тоже поменять текст.
Вот теперь у нас идут действия после отправки. По умолчанию у нас идёт «Собирать заявки» и «Email». Можно нажать на плюсик и из выпадающего списка выбрать какие-то другие сервисы. Как вот, например, MailChimp, «Вебхук». Или вот можно сделать «Попап». Также вот у нас действия: «Открыть попап» или «Закрыть попап». Наоборот, на открывающемся окне идёт форма. Например, заполняем эту форму, нажимаем «Отправить», и попап закрывается.
Я не буду здесь подробно останавливаться. Это не для нашего урока.
После отправки формы у нас заявки будут собираться в админке WordPress. Давайте обновим страницу и посмотрим. Так, вот предпросмотр. Давайте, например, заведём какие-нибудь данные. Телефон какой-нибудь. Вот, у меня сразу же подставилось. Вот такое сообщение: «Привет». Нажимаем «Отправить». Наша форма удачно отправлена. Вот: «Ваша заявка была подана успешно». И теперь давайте зайдём в панель-админ и в Elementor — «Заявки». У нас появляются все наши формы. Можно её прочитать, нажав «Вид» или сюда. Вот, у нас все данные: Евгений, телефон, Email, сообщение.
Вернёмся к заявкам. Вот, мы называли форму «Свяжитесь с нами». Теперь она у нас здесь отображается как «Свяжитесь с нами», а не как «Новая форма». Со страницы «Свяжитесь с нами» приходит. Давайте посмотрим на сайте. Мы же делали на нескольких страницах. Вот, например, на главной. Теперь тоже заполним. Также давайте: Петя, телефон какой-нибудь. Email давайте такой. Сообщение: «Здрасьте». Отправим.
Теперь посмотрим в заявках. Обновим страницу, и вот у нас «Свяжитесь с нами» с главной страницы приходит.
Так, на какой мы ещё делали? «Контакты». Тут так же заполняется. Email. Отправим. И вот у нас со страницы «Контакты». Также можно почитать. Все данные: Петя, телефон, email, в сообщении ничего не написал и т. д.
Перейдём в наш редактор. «Настройки шагов». Вот это, когда мы делаем пошаговую. И «Дополнительные опции». «Пользовательские сообщения». Например, «Успешная отправка» — можно поменять на русский. Вот так: «Ваша заявка подана успешно». Также можно поменять сообщение об ошибках.
Давайте обновим, посмотрим. Вот, например. Давайте заполним «Свяжитесь с нами». Также введём данные, отправим, и вот у нас уже по-русски.
Далее у нас идут стили. Здесь стандартные настройки стилей. «Разрыв рядов» — 20, например, сделаем. «Разрыв колонок», если бы у нас было в колонку. Отступ от ярлыка, если бы мы добавили ярлык. Поле HTML и т. д. Также можно поля, цвет текста сделать, как обычно, типографику поменять, цвет фона. Так, границу можно убрать, обнулить. Скругление углов, например, поставить 10 пикселей.
Стандартные все настройки для кнопок и настройки текста, которые выскакивают здесь при отправке. Давайте цвет успешного сообщения сделаем рыжий, например. Об ошибке… Нет, наоборот. Здесь какой-нибудь рыжий, а цвет успешного — графит.
Также настраиваются шаги: «Неактивный», «Активный» шаг, «Завершённый» и т. д.
Мы посмотрели на форму заявки: какие можно добавлять поля, как настраивать поля и действия после отправки.
На этом на сегодня у меня всё. Увидимся на следующем уроке. Пока.
