Techbear
Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.
Любому сайту нужна та или другая форма, — форма связи, поддержки, обратного звонка и другие. Сайт с формой связи имеет больше доверия посетителей и помогает им связаться с вами.
В репозитории Вордпресс вы можете найти большое количество плагинов создания форм, в этой статье — обзор плагина Ninja Forms.
Ninja Forms — бесплатный плагин форм для WordPress, поддерживаемый компанией WP Ninjas.
В бесплатной версии доступно 27 полей и неограниченное число форм, которые вы можете использовать на вашем сайте.
Мне нравится этот плагин за свой внешний вид во фронт-энде и удобство настройки в бэк-энде.
Еще один плюс этого плагина — возможность купить только тот адд-он, который вам нужен. То есть вам не нужно покупать сразу весь набор адд-онов, вы можете купить отдельно один или несколько нужных.
С помощью Ninja Forms вы можете делать разные формы:
Содержание:
Отображение формы во фронт-энде
Как изменить дизайн форм вручную
Как изменить дизайн форм с помощью плагина
Другие популярные аддоны
После установки плагина в меню Вордпресс появится новый раздел Ninja Forms.
Перейдите в Формы — Добавить новую.
Ninja Forms предлагает 16 готовых шаблонов и Новую форму. Чтобы создать простую форму подписки, перетащите нужные поля из правой части в левую:
Чтобы отредактировать поле, кликните по нему и сделайте настройки:
Здесь вы можете сделать поле обязательным для заполнения, дать полю css класс и сделать другие настройки.
Когда форма готова, нажмите Готово в правом верхнем углу.
На вкладке Электронные письма и действия вы можете настроить сообщение, которое показывается после отправки формы и настроить уведомление на е-мейл:
На следующей вкладке Передовой (Фронт-энд) вы можете отключить показ имени формы во фронт-энде, и настроить поведение формы после отправки:
Для формы обратной связи логичнее было бы очистить и показывать пустую форму после успешной отправки, для других форм смотрите по ситуации.
Пройдите по разделу, посмотрите, какие еще настройки могут быть вам полезны.
Вы можете добавить готовую форму на страницу с помощью блока Гутенберг:
Если вы пользуетесь конструктором страниц, например, Elementor или любым другим, вы можете добавить форму с помощью виджетов Shortcode или HTML-код:
В итоге ваша форма может выглядеть так:
В готовом виде форма Ninja Forms выглядит хорошо, и может подойти дизайну сайта.
Если внешний вид не подходит, у вас есть 2 варианта:
Реклама
Простой способ выгодно купить полис
Первое, что вы можете сделать — попробуйте отключить стили Ninja Forms и использовать стили вашей темы.
По умолчанию Ninja Forms применяет собственные стили ко всем формам. Светлая тема используется по умолчанию на тот случай, если разработчик вашей темы не указал правила для отображения форм.
В настройках плагина вы можете выбрать:
Выберите Мотивированные стили — Отсутствует и Сохраните настройки. Обновите страницу, вы должны увидеть форму со стилями вашей темы.
Еще одна вещь, которую вы можете сделать вручную — расположить несколько полей в одном ряду.
Для этого вам нужно включить Режим разработчика:
И добавить класс контейнеру поля:
Вы можете использовать эти классы:
Также вы можете расположить элементы списков (ul, ol) в несколько колонок:
Если вы хотите применить собственные стили, вам нужно найти css классы, примененные к нужным элементам, и добавить собственные правила этим классам.
Вы можете найти нужные классы с помощью инструмента Инспектор кода в браузере:
После того, как вы нашли нужные классы, вам нужно добавить свои классы в файл style.css дочерней темы или во Внешний вид — Настроить — Дополнительные стили.
Если вы пользуетесь конструктором страниц, например, Elementor или Gutenberg вы можете использовать виджет HTML-код.
Для удобства вы можете использовать расширение для браузера Live CSS Editor. С помощью этого расширения вы можете добавлять стили и видеть изменения прямо на странице.
Подробнее в документации плагина:
Эти способы изменения внешнего вида форм требуют немного практики. Если вы хотите изменить дизайн форм с помощью нескольких кликов, используйте платное расширение.
Если вы не хотите тратить время на редактирование форм вручную, попробуйте платный адд-он Layout and Styles.
С помощью этого расширения вы можете перетащить несколько полей в ряд с помощью мышки:
Изменить ширину колонок:
И настроить собственные стили:
Это один из самых популярных аддонов Ninja Forms, который сильно экономит время и упрощает создание красивых форм.
Перейти на страницу расширения Layout and Styles.
У Ninja Forms 4 популярных аддона, один из которых Layout and Styles. Три других аддона:
С помощью аддона Conditional Logic вы можете создавать такие формы, в которых следующие поля меняются в зависимости от выбора в предыдущих полях.
Например, напишите слово «cheese» в первом поле, изменится значение во втором поле:
Отметьте чекбокс в первом поле, изменится количество чекбоксов во втором поле:
Вы можете задавать разные условия для отображения / скрытия полей форм.
С помощью аддона Multi-Part Forms вы можете разбивать длинные формы на несколько страниц.
С помощью аддона File Uploads вы можете добавить возможность загружать файлы в WordPress, Google Drive, Dropbox или Amazon S3 из любой формы:
Вы можете ограничить количество загружаемых файлов, максимальный размер и тип загружаемых файлов.
Всего у Ninja Forms 39 аддонов, которые помогут вам:
Вы можете купить нужный аддон отдельно, или несколько аддонов со скидкой. Перейти в каталог расширений Ninja Forms.
Ninja Forms — это популярный плагин с высоким рейтингом. Он хорошо работает и имеет множество расширений для увеличения его функционала и создания всевозможных форм.
Если плагин вам подходит, вы можете его купить по моей партнерской ссылке. Ninja Forms возвращает деньги в течение 14 дней после покупки без дополнительных вопросов.
Надеюсь, статья была полезна. Оставляйте комментарии.
Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.
А данне с отправленной формы — только по емаил отправлются или в БД пишутся тоже?
Не могу ответить, не проверял.
Если не ошибаюсь, в админке нельзя посмотреть содержание емейлов, поэтому похоже, что в БД не сохраняются.
Как вариант, вы можете настроить сохранение контактов в отдельный список в сервисе рассылки (если есть), и / или настроить уведомления на свой е-мейл, тогда е-мейлы будут сохраняться в вашем почтовом ящике.
У многих форм есть такая функция, думаю, Ninja Forms добавит это, если сейчас нет.