Как отобразить таблицу HTML WordPress из записей Gravity Forms

WP Table Manager имеет удивительную интеграцию с Gravity Forms, которая позволяет нам создавать HTML-таблицы на основе записей, позволяя нам фильтровать, оформлять и отображать с мгновенной синхронизацией записей наилучшим образом.

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

В этом уроке мы увидим, как добавить наши записи Gravity Form непосредственно в таблицу HTML с возможностью добавления их на страницу или в запись тоже.

Создание и настройка таблиц HTML WordPress с записями формы

Важно отметить, что нам нужны Gravity Forms и WP Table Manager , чтобы следовать этому руководству.

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

Теперь, когда наши формы готовы, нам нужно перейти к WP Table Manager > Все таблицы и нажать на + Создать, если у нас установлен Gravity Forms, будет показана Таблица из формы Gravity Form, нажмите на неё.

Это покажет все активные формы, нам просто нужно выбрать форму, которая будет использоваться, а затем выбрать поля, которые мы хотим отобразить, или просто отобразить все поля и нажать на Готово.

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

Теперь первое, что мы видим, это то, что у нас есть все возможности настройки из WP Table Manager , поэтому давайте начнем с создания фильтра, это полезно, когда у нас много записей в форме.

Чтобы создать фильтр, нажмите на Формат > Сортировка и Фильтры, появится всплывающее окно, где мы можем выбрать, что фильтровать, и хотим ли мы также опцию сортировки, вот как это будет выглядеть после установки Включить фильтр с Нет на Внутри столбца и включить сортировку тоже.

Сортировка и фильтры будут отображаться только на фронте нашего сайта, поэтому нам следует добавить таблицу на нашу страницу/запись, чтобы увидеть ее, добавление нашей таблицы так же просто, как поиск блока WP Table Manager таблицы и добавление его на нашу страницу/запись.

Отличные фильтры с возможностью сортировки, но мы все равно можем стилизовать нашу таблицу, для этого мы можем использовать все опции из редактора таблиц в WP Table Manager, от выравнивания до границ и жирных шрифтов, у нас есть все следующие доступные опции.

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

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

И готово! Наши записи будут отображаться, и опции для настройки таблицы позволят нам сделать ее подходящей для любой темы!

От записей Gravity Form к диаграммам

Мы могли бы подумать, что WP Table Manager позволит нам создавать таблицы только из записей, и ответ - нет! Мы также можем создавать диаграммы на основе информации, и это так же просто, как нажать на Диаграмма > Создать диаграмму из данных.

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

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

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

В данном случае мы сравниваем 2 продукта, поэтому в итоге используем круговую диаграмму с 2 разными цветами, что позволит нам легко увидеть разницу в количестве продаж.

Процесс публикации будет аналогичен обычному отображению таблицы, мы можем использовать любой конструктор страниц с блоком диаграммы WP Table Manager (который доступен во всех основных конструкторах страниц).

Будет открыто окно, где мы можем выбрать график, который хотим отобразить, нам нужно его выбрать и готово! График опубликован.

Теперь у нас есть таблица с нашими записями и отличная диаграмма, которая помогает нам понять таблицу, и мы можем сказать, что эта интеграция является абсолютно полным инструментом! Не так ли?

Начните использовать Gravity Forms и WP Table Manager

Как вы видите WP Table Manager + Gravity Forms - это просто идеальное сочетание, чтобы держать все наши записи и данные в порядке, у нас есть много способов отобразить их, и интеграция так проста, как нажать кнопку, здорово! Не так ли? Чего вы ждете? Перейдите сюда и получите WP Table Manager сейчас.