Каждому сайту нужна форма связи с владельцем сайта. Сайт с формой контакта имеет больше доверия от посетителей и помогает им связаться с вами.
В репозитарии Вордпресс вы можете найти большое количество плагинов создания форм, в этой статье обзор плагина Ninja Forms.
Ninja Forms — бесплатный плагин форм для WordPress, поддерживаемый компанией WP Ninjas. В бесплатной версии доступно 27 полей и неограниченное число форм, которые вы можете создать на вашем сайте.
Мне нравится этот плагин за свой внешний вид во фронт-энде и удобство настройки в бэк-энде.
Еще одна отличительная черта плагина — возможность купить только тот адд-он, который вам нужен. То есть вам не нужно покупать сразу весь набор адд-онов, вы можете купить отдельно один или несколько нужных.
С помощью Ninja Forms вы можете делать такие формы:
- Формы обратной связи. Форма с произвольными полями, через которую ваши посетители могут задавать вопросы на страницах сайта.
- Формы заказа. Продавайте товары или услуги и принимайте оплату через PayPal, Stripe и несколько других шлюзов.
- Формы подписки. Добавляет подписчиков на ваш контент в сервисы рассылки.
- Опросы. Проводите опросы, задавайте вашей аудитории интересующие вас вопросы.
- Формы публикации контента. Дайте возможность посетителям вашего сайта публиковать и редактировать контент.
Вы можете скачать плагин из репозитария Вордпресс. В середине 2020 года у плагина более 1 млн. установок.
Содержание:
Отображение формы во фронт-энде
Как изменить дизайн форм вручную
Как изменить дизайн форм с помощью плагина
Другие популярные аддоны
Как настроить Ninja Forms
После установки плагина в меню Вордпресс появится новый раздел Ninja Forms.
1. Создайте форму
Перейдите в Формы — Добавить новую.
Ninja Forms предлагает 16 готовых шаблонов и Новую форму. Чтобы создать простую форму подписки, перетащите нужные поля из правой части в левую:
Чтобы отредактировать поле, кликните по нему и сделайте настройки:
Здесь вы можете сделать поле обязательным для заполнения, дать полю css класс и сделать другие настройки.
Когда форма готова, нажмите Готово в правом верхнем углу.
2. Добавьте оповещения
На вкладке Электронные письма и действия вы можете настроить сообщение, которое показывается после отправки формы и настроить уведомление на е-мейл:
3. Поведение формы после отправки
На следующей вкладке Передовой (Фронт-энд) вы можете отключить показ имени формы во фронт-энде, и настроить поведение формы после отправки:
- Очистить отправленную форму и показывать пустую форму, или
- Скрыть успешно отправленную форму
Для формы обратной связи логичнее было бы очистить и показывать пустую форму после успешной отправки, для других форм смотрите по ситуации.
Пройдите по разделу, посмотрите, какие еще настройки могут быть вам полезны.
4. Добавьте форму на сайт
В редакторе Гутенберг
Вы можете добавить готовую форму на страницу с помощью блока Гутенберг:
С помощью шорткода
Если вы пользуетесь конструктором страниц, например, Elementor или любым другим, вы можете добавить форму с помощью виджетов Shortcode или HTML-код:
Отображение формы во фронт-энде
В итоге ваша форма может выглядеть так:
В готовом виде формы Ninja Forms выглядят хорошо, и часто подходят дизайну сайта.
Если внешний вид не подходит, у вас есть 2 варианта:
- Изменить стили вручную и бесплатно
- Изменить стили платно с помощью адд-она Layout & Styles
Как изменить дизайн форм вручную
1. Отключите стили Ninja Forms
Первое, что вы можете сделать — попробуйте отключить стили Ninja Forms и использовать стили вашей темы.
По умолчанию Ninja Forms применяет собственные стили ко всем формам. Светлая тема используется по умолчанию на тот случай, если разработчик вашей темы не указал правила для отображения форм.
В настройках плагина вы можете выбрать:
- Светлая тема (по умолчанию)
- Темная тема
- Отсутствует (использовать стили темы)
Выберите Мотивированные стили — Отсутствует и Сохраните настройки. Обновите страницу, вы должны увидеть форму со стилями вашей темы.
2. Как расположить поля в одном ряду
Еще одна вещь, которую вы можете сделать вручную — расположить несколько полей в одном ряду.
Для этого вам нужно включить Режим разработчика:
И добавить класс контейнеру поля:
Вы можете использовать эти классы:
- first – Используйте этот класс для первого поля в группе полей одного ряда.
- second – Используйте этот класс для второго поля в группе полей одного ряда.
- one-half
- one-third
- two-thirds
- one-fourth
- two-fourths
- three-fourths
- one-sixth
- two-sixths
- three-sixths
- four-sixths
- five-sixths
Также вы можете расположить элементы списков (ul, ol) в несколько колонок:
- two-col-list
- three-col-list
- four-col-list
- five-col-list
- six-col-list
3. Как применить собственные стили
Если вы хотите применить собственные стили, вам нужно найти css классы, примененные к нужным элементам, и добавить собственные правила этим классам.
Вы можете найти нужные классы с помощью инструмента Инспектор кода в браузере:
После того, как вы нашли нужные классы, вам нужно добавить свои классы в файл style.css дочерней темы или во Внешний вид — Настроить — Дополнительные стили.
Если вы пользуетесь конструктором страниц, например, Elementor или Gutenberg вы можете использовать виджет HTML-код.
Для удобства вы можете использовать расширение для браузера Live CSS Editor. С помощью этого расширения вы можете добавлять стили и видеть изменения прямо на странице.
Подробнее в документации плагина:
Эти способы изменения внешнего вида форм требуют времени и немного практики. Если вы хотите изменить дизайн форм с помощью нескольких кликов, используйте платное расширение.
Как изменить дизайн форм с помощью плагина
Если вы не хотите тратить время на поиск классов или изучение этой темы, попробуйте платный адд-он Layout and Styles.
С помощью этого расширения вы можете перетащить несколько полей в ряд с помощью мышки:
Изменить ширину колонок:
И настроить собственные стили:
Это один из самых популярных аддонов Ninja Forms, которое сильно экономит время и упрощает создание красивых форм.
Если вам интересно это расширение, вы можете купить его по моей партнерской ссылке.
Другие популярные аддоны
У Ninja Forms 4 популярных аддона, один из них Layout and Styles. Три других аддона:
- Conditional Logic (Условная логика)
- Multi-Part Forms (Много-шаговая форма)
- File Uploads (Загрузка файлов)
Conditional Logic
С помощью аддона Conditional Logic вы можете создавать такие формы, в которых следующие поля меняются в зависимости от выбора в предыдущих полях.
Например, напишите слово «cheese» в первом поле, изменится значение во втором поле:
Отметьте чекбокс в первом поле, изменится количество чекбоксов во втором поле:
Форма обратной связи на этом сайте сделана с использованием условной логики.
Multi-Part Forms
С помощью аддона Multi-Part Forms вы можете разбивать длинные формы на несколько страниц.
File Uploads
С помощью аддона File Uploads вы можете добавить возможность загружать файлы в WordPress, Google Drive, Dropbox или Amazon S3 из любой формы:
Вы можете ограничить количество загружаемых файлов, максимальный размер и тип загружаемых файлов.
Остальные аддоны Ninja Forms
Всего у Ninja Forms 39 аддонов, которые помогут вам:
- Создавать формы входы и регистрации на сайте, дать возможность посетителям публиковать контент и анализировать поведение пользователей.
- Подключать формы к плагину рассылки MailPoet, или сервисам рассылки MailChimp, Campaign Monitor, Aweber, Constant Contact и другим.
- Принимать платежи через PayPal, Stripe, Elavon и других.
- Передавать информацию о клиентах в CRM системы Zoho, Capsule, SalesForce и другие.
- Автоматизировать процессы с помощью Zapier, WebMerge, вебхуков и других инструментов.
Вы можете купить нужный аддон отдельно, или несколько аддонов со скидкой. Перейти в аддоны Ninja Forms.
Заключение
Ninja Forms — это популярный плагин с высоким рейтингом. Он хорошо работает и имеет множество аддонов для расширения его функционала и создания всевозможных форм.
Если плагин вам понравился, вы можете купить его по моей партнерской ссылке. Если что-то вам не понравится, Ninja Forms возвращает деньги в течение 14 дней после покупки без дополнительных вопросов.
Надеюсь, статья была полезна. Оставляйте комментарии.
