Ninja Forms Обзор

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

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

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

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

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

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

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

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

Содержание:

Как настроить 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, который сильно экономит время и упрощает создание красивых форм.

Перейти на страницу расширения Layout and Styles.

У 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 дней после покупки без дополнительных вопросов.

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

комментария 2

  1. А данне с отправленной формы — только по емаил отправлются или в БД пишутся тоже?

    • Не могу ответить, не проверял.
      Если не ошибаюсь, в админке нельзя посмотреть содержание емейлов, поэтому похоже, что в БД не сохраняются.

      Как вариант, вы можете настроить сохранение контактов в отдельный список в сервисе рассылки (если есть), и / или настроить уведомления на свой е-мейл, тогда е-мейлы будут сохраняться в вашем почтовом ящике.
      У многих форм есть такая функция, думаю, Ninja Forms добавит это, если сейчас нет.

Ответить

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Techbear

Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.

WordPress   WooCommerce   Membership   Elementor   ACF

Обновления блога

Subsription - Gray Footer
Techbear