»  Обзоры  »  Ninja Forms Обзор

Ninja Forms Обзор

Последнее обновление:

Обзор Ninja FormsКаждому сайту нужна форма связи с владельцем сайта. Сайт с формой контакта имеет больше доверия от посетителей и помогает им связаться с вами.

В репозитарии Вордпресс вы можете найти большое количество плагинов создания форм, в этой статье обзор плагина Ninja Forms.

Ninja Forms — бесплатный плагин форм для WordPress, поддерживаемый компанией WP Ninjas. В бесплатной версии доступно 27 полей и неограниченное число форм, которые вы можете создать на вашем сайте.

Мне нравится этот плагин за свой внешний вид во фронт-энде и удобство настройки в бэк-энде.

Еще одна отличительная черта плагина — возможность купить только тот адд-он, который вам нужен. То есть вам не нужно покупать сразу весь набор адд-онов, вы можете купить отдельно один или несколько нужных.

С помощью Ninja Forms вы можете делать такие формы:

  • Формы обратной связи. Форма с произвольными полями, через которую ваши посетители могут задавать вопросы на страницах сайта.
  • Формы заказа. Продавайте товары или услуги и принимайте оплату через PayPal, Stripe и несколько других шлюзов.
  • Формы подписки. Добавляет подписчиков на ваш контент в сервисы рассылки.
  • Опросы. Проводите опросы, задавайте вашей аудитории интересующие вас вопросы.
  • Формы публикации контента. Дайте возможность посетителям вашего сайта публиковать и редактировать контент.

Вы можете скачать плагин из репозитария Вордпресс. В середине 2020 года у плагина более 1 млн. установок.

Содержание:

Как настроить Ninja Forms

  1. Создайте форму
  2. Добавьте оповещения
  3. Поведение формы после отправки
  4. Добавьте форму на сайт

Отображение формы во фронт-энде
Как изменить дизайн форм вручную

  1. Отключите стили Ninja Forms
  2. Как расположить поля в одном ряду
  3. Как применить собственные стили

Как изменить дизайн форм с помощью плагина
Другие популярные аддоны

Остальные аддоны Ninja Forms

Как настроить Ninja Forms

После установки плагина в меню Вордпресс появится новый раздел Ninja Forms.

1. Создайте форму

Перейдите в ФормыДобавить новую.

Ninja Forms предлагает 16 готовых шаблонов и Новую форму. Чтобы создать простую форму подписки, перетащите нужные поля из правой части в левую:

Ninja Forms - Простая форма подписки
Конструктор форм — Простая форма подписки

Чтобы отредактировать поле, кликните по нему и сделайте настройки:

Ninja Forms - Настройки поля
Настройки поля

Здесь вы можете сделать поле обязательным для заполнения, дать полю css класс и сделать другие настройки.

Когда форма готова, нажмите Готово в правом верхнем углу.

2. Добавьте оповещения

На вкладке Электронные письма и действия вы можете настроить сообщение, которое показывается после отправки формы и настроить уведомление на е-мейл:

Ninja Forms - Действия после отправки
Действия после отправки

3. Поведение формы после отправки

На следующей вкладке Передовой (Фронт-энд) вы можете отключить показ имени формы во фронт-энде, и настроить поведение формы после отправки:

  • Очистить отправленную форму и показывать пустую форму, или
  • Скрыть успешно отправленную форму

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

Ninja Forms - Настройки фронт-энда
Настройки фронт-энда

Пройдите по разделу, посмотрите, какие еще настройки могут быть вам полезны.

4. Добавьте форму на сайт

В редакторе Гутенберг

Вы можете добавить готовую форму на страницу с помощью блока Гутенберг:

Ninja Forms - Добавьте форму на страницу
Добавьте форму на страницу

С помощью шорткода

Если вы пользуетесь конструктором страниц, например, Elementor или любым другим, вы можете добавить форму с помощью виджетов Shortcode или HTML-код:

Ninja Forms - Шорткод
Шорткод

Отображение формы во фронт-энде

В итоге ваша форма может выглядеть так:

Ninja Forms - Простая форма обратной связи
Ninja Forms - Простая форма обратной связи

В готовом виде формы Ninja Forms выглядят хорошо, и часто подходят дизайну сайта.

Если внешний вид не подходит, у вас есть 2 варианта:

  • Изменить стили вручную и бесплатно
  • Изменить стили платно с помощью адд-она Layout & Styles

Как изменить дизайн форм вручную

1. Отключите стили Ninja Forms

Первое, что вы можете сделать — попробуйте отключить стили Ninja Forms и использовать стили вашей темы.

По умолчанию Ninja Forms применяет собственные стили ко всем формам. Светлая тема используется по умолчанию на тот случай, если разработчик вашей темы не указал правила для отображения форм.

В настройках плагина вы можете выбрать:

  • Светлая тема (по умолчанию)
  • Темная тема
  • Отсутствует (использовать стили темы)
Ninja Forms - Стили форм
Стили форм

Выберите Мотивированные стилиОтсутствует и Сохраните настройки. Обновите страницу, вы должны увидеть форму со стилями вашей темы.

2. Как расположить поля в одном ряду

Еще одна вещь, которую вы можете сделать вручную — расположить несколько полей в одном ряду.

Для этого вам нужно включить Режим разработчика:

Ninja Forms - Режим разработчика
Режим разработчика

И добавить класс контейнеру поля:

Ninja Forms - Расположите поля друг за другом
Расположите поля друг за другом

Вы можете использовать эти классы:

  • 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 классы, примененные к нужным элементам, и добавить собственные правила этим классам.

Вы можете найти нужные классы с помощью инструмента Инспектор кода в браузере:

Ninja Forms - Как найти CSS стиль
Как найти CSS стиль

После того, как вы нашли нужные классы, вам нужно добавить свои классы в файл style.css дочерней темы или во Внешний видНастроитьДополнительные стили.

Если вы пользуетесь конструктором страниц, например, Elementor или Gutenberg вы можете использовать виджет HTML-код.

Для удобства вы можете использовать расширение для браузера Live CSS Editor. С помощью этого расширения вы можете добавлять стили и видеть изменения прямо на странице.

Live CSS Editor
Live CSS Editor

Подробнее в документации плагина:

Эти способы изменения внешнего вида форм требуют времени и немного практики. Если вы хотите изменить дизайн форм с помощью нескольких кликов, используйте платное расширение.

Как изменить дизайн форм с помощью плагина

Если вы не хотите тратить время на поиск классов или изучение этой темы, попробуйте платный адд-он Layout and Styles.

С помощью этого расширения вы можете перетащить несколько полей в ряд с помощью мышки:

Ninja Forms - Несколько полей в одном ряду
Несколько полей в одном ряду

Изменить ширину колонок:

Ninja Forms - Измените ширину колонок
Измените ширину колонок

И настроить собственные стили:

Ninja Forms - Собственные стили
Собственные стили

Это один из самых популярных аддонов Ninja Forms, которое сильно экономит время и упрощает создание красивых форм.

Если вам интересно это расширение, вы можете купить его по моей партнерской ссылке.

У Ninja Forms 4 популярных аддона, один из них Layout and Styles. Три других аддона:

  • Conditional Logic (Условная логика)
  • Multi-Part Forms (Много-шаговая форма)
  • File Uploads (Загрузка файлов)

Conditional Logic

С помощью аддона Conditional Logic вы можете создавать такие формы, в которых следующие поля меняются в зависимости от выбора в предыдущих полях.

Например, напишите слово «cheese» в первом поле, изменится значение во втором поле:

Ninja Forms - Условная логика
Изменение значения во втором поле

Отметьте чекбокс в первом поле, изменится количество чекбоксов во втором поле:

Ninja Forms - Условная логика
Изменение количества выбора

Форма обратной связи на этом сайте сделана с использованием условной логики.

Multi-Part Forms

С помощью аддона Multi-Part Forms вы можете разбивать длинные формы на несколько страниц.

Ninja Forms - Много-шаговые формы
Много-шаговая форма

File Uploads

С помощью аддона File Uploads вы можете добавить возможность загружать файлы в WordPress, Google Drive, Dropbox или Amazon S3 из любой формы:

Ninja Forms - Загрузка файлов
Загрузка файлов

Вы можете ограничить количество загружаемых файлов, максимальный размер и тип загружаемых файлов.

Остальные аддоны Ninja Forms

Всего у Ninja Forms 39 аддонов, которые помогут вам:

Вы можете купить нужный аддон отдельно, или несколько аддонов со скидкой. Перейти в аддоны Ninja Forms.

Заключение

Ninja Forms — это популярный плагин с высоким рейтингом. Он хорошо работает и имеет множество аддонов для расширения его функционала и создания всевозможных форм.

Если плагин вам понравился, вы можете купить его по моей партнерской ссылке. Если что-то вам не понравится, Ninja Forms возвращает деньги в течение 14 дней после покупки без дополнительных вопросов.

Надеюсь, статья была полезна. Оставляйте комментарии.

Поделиться в facebook
Поделиться в vk
Поделиться в email
Поделиться в telegram
Поделиться в whatsapp

Оставьте комментарий

Do NOT follow this link or you will be banned from the site!