Хотите ли вы отображать записи форм WordPress на передней панели вашего сайта??
Отображение записей формы на лицевой стороне позволяет показать важную информацию посетителям. Вы можете использовать его для демонстрации положительных отзывов, создания каталогов, отображения календарей событий и многого другого.
В этой статье мы покажем вам, как отображать записи формы WordPress на вашем сайте.
Зачем отображать записи формы WordPress на фронтенде?
Формы отлично подходят для поддержания связи с вашими посетителями, получения отзывов и предложений, помощи пользователям в решении их проблем и т.д. Отображение записей формы на вашем сайте WordPress для ваших посетителей может быть полезным в некоторых ситуациях.
Например, вы можете отображать отзывы и обзоры продуктов, которые пользователи отправляют через онлайн-форму. Таким образом, вы можете использовать социальное доказательство для укрепления доверия к бренду и повышения конверсии.
Вы также можете отображать записи форм для создания бизнес-каталога, отображения событий, присланных пользователями, в календаре, отображения статистики и другой важной информации, собранной через онлайн-формы на вашем сайте.
Однако, по умолчанию, когда пользователи отправляют форму на вашем сайте WordPress, их записи остаются приватными. Только администратор WordPress и другие пользователи, имеющие разрешение, могут просматривать записи формы.
Давайте посмотрим, как вы можете отображать записи форм на передней панели вашего сайта WordPress с помощью Formidable Forms и WPForms. Вы можете нажать на ссылки ниже, чтобы перейти к предпочитаемому разделу.
- Отображение записей в форме WordPress с помощью Formidable Forms (простой способ)
- Отображение записей форм WordPress с помощью WPForms (Дополнительно)
Отображение записей в форме WordPress с помощью Formidable Forms
Самый простой способ отображения записей в форме в WordPress — использование Formidable Forms. Это популярный плагин контактных форм WordPress, который предлагает конструктор форм «все-в-одном» с множеством функций для настройки.
Вы можете создавать любые формы, такие как опросы, викторины, формы оплаты, а также расширенные формы, такие как календари событий, каталоги и калькуляторы.
Во-первых, вам нужно установить и активировать плагин Formidable Forms на своем сайте. Если вам нужна помощь, ознакомьтесь с нашим руководством по установке плагина WordPress.
Для этого руководства мы будем использовать версию Formidable Forms Pro, поскольку она включает в себя аддон Visual Views.
После активации вы можете перейти к Formidable » Формы и нажмите кнопку ‘+ Добавить новую’ в верхней части страницы.
После этого появится всплывающее окно, в котором вам будет предложено выбрать тип формы, например, контактная форма, форма регистрации пользователя, опрос и т.д.
Перейдите и выберите желаемый тип формы. В рамках данного руководства мы создадим контактную форму для сбора отзывов пользователей.
Далее вам нужно будет ввести название и описание формы.
Когда вы закончите, просто нажмите кнопку «Создать».
Теперь вы можете использовать конструктор форм для настройки вашей формы.
Formidable предлагает конструктор, который очень прост в использовании. Просто выберите любое поле формы, которое вы хотите добавить в свою форму, из опций слева и поместите их в шаблон формы.
После настройки контактной формы вставьте ее в любое место на вашем сайте.
Плагин предлагает несколько вариантов добавления вашей формы. Самый простой способ — это нажать кнопку ‘Embed’ в конструкторе форм вверху, а затем выбрать существующую страницу или создать новую страницу для добавления вашей формы.
Также вы можете использовать блок Formidable Forms или блок шорткодов в редакторе контента WordPress для вставки ваших форм.
Далее, вы можете дать имя вашей странице и предварительно просмотреть ее.
Когда вы будете удовлетворены ее внешним видом, перейдите к публикации вашей страницы.
После того, как ваша форма будет запущена, и вы начнете получать заявки, вам нужно будет установить и активировать аддон Visual Views в Formidable Forms.
Чтобы сделать это, просто перейдите по ссылке Formidable » Дополнения из вашей приборной панели WordPress. Далее прокрутите вниз до аддона ‘Visual Views’ и нажмите кнопку ‘Install’.
Как только аддон станет активным, вы можете перейти по адресу Formidable » Виды из вашей приборной панели WordPress.
После этого просто нажмите кнопку ‘+ Добавить новый’ вверху.
Далее появится всплывающее окно, в котором нужно выбрать тип представления. Плагин предлагает сетку, таблицу, календарь и классический вид, которые вы можете использовать.
Для этого урока мы будем использовать вид ‘Grid’ для отображения записей формы.
После этого вам нужно будет выбрать источник данных для вашего представления.
Нажмите на выпадающее меню «Использовать записи из формы» и выберите вашу форму. Здесь также есть возможность ввести имя представления.
После выбора источника данных просто нажмите кнопку «Создать представление».
Это приведет к запуску конструктора представлений в Formidable Forms.
Чтобы начать, нажмите кнопку «Конструктор макетов».
Далее вам нужно выбрать макет для отображения записей в форме.
Просто выберите макет из предложенных вариантов вверху. Вы можете добавить несколько макетов для отображения записей в форме.
После выбора макета нажмите кнопку ‘Сохранить макет’.
Далее, вы можете добавить контент в конструктор форм, нажав на кнопку ‘+’. Есть возможность настроить расположение элементов формы и добавить контент до и после элементов формы.
Плагин также дает возможность изменить шрифт, цвет фона, границы и многое другое в панели настроек стиля сетки слева от вас.
Вы также увидите шорткод под полем View Name, который понадобится вам при показе записей формы на вашем сайте.
В панели настроек стиля сетки есть более продвинутые опции. В расширенных настройках вы можете ограничить количество записей, размер страницы и многое другое.
Когда вы настроите представление, не забудьте нажать кнопку ‘Обновить’ вверху.
Далее вам нужно будет отобразить записи формы на вашем сайте WordPress. Для этого скопируйте шорткод, указанный под именем вида.
Шорткод будет выглядеть следующим образом:
[display-frm-data >После этого перейдите на любой пост или страницу, где вы хотите отобразить записи формы. Как только вы окажетесь в редакторе контента, просто добавьте блок 'Shortcode'.
Теперь введите шорткод, который вы скопировали ранее, в блок шорткодов.
После этого вы можете просмотреть страницу и опубликовать ее.
Теперь вы можете посетить свой сайт, чтобы увидеть записи формы в действии.
Вот как они выглядят на нашем демонстрационном сайте:
Отображение записей в форме WordPress с помощью WPForms
Другой способ отображения записей формы на передней стороне вашего сайта WordPress — это WPForms. Однако, этот метод требует редактирования кода и рекомендуется для опытных пользователей, имеющих знания о кодировании.
WPForms — это лучший плагин контактных форм для WordPress, позволяющий создавать различные типы форм с помощью конструктора перетаскивания форм.
Обратите внимание, что если вы хотите видеть записи ваших форм в приборной панели WordPress, то вам понадобится версия WPForms Pro. Существует также версия WPForms Lite, которую вы можете использовать бесплатно и которая отправляет уведомления по электронной почте обо всех вводах в форму.
Сначала вам нужно установить и активировать плагин WPForms. Для получения более подробной информации, пожалуйста, ознакомьтесь с нашим руководством по установке плагина WordPress.
Далее вам нужно будет создать онлайн-форму с помощью WPForms. Вы можете ознакомиться с нашим пошаговым руководством о том, как создать контактную форму в WordPress.
Как только вы начнете получать записи в форме, вам нужно будет ввести следующий код в функции вашей темы.php файле или в плагине для конкретного сайта. Для получения дополнительной информации см. наше руководство о том, как легко добавить пользовательский код в WordPress.
/** * Пользовательский шорткод для отображения записей формы WPForms в виде таблицы. * * * Базовое использование: [wpforms_entries_table * * Возможные атрибуты шорткода: * id (обязательно) Идентификатор формы, в которой нужно показать записи. * user Идентификатор пользователя, или "current" для выбора по умолчанию текущего вошедшего пользователя. * fields Список идентификаторов полей формы через запятую. * number Количество записей для отображения, по умолчанию 30. * * @ссылка https://wpforms.com/developers/how-to-display-form-entries/ * * * Подсчеты в реальном времени могут быть задержаны из-за установки кэширования на сайте * * @param array $atts Атрибуты шорткода. * * @return string */ function wpf_entries_table( $atts ) < // Pull ID shortcode attributes. $atts = shortcode_atts( [ 'id' =>'', 'user' => '', 'fields' => '', 'number' => '', 'type' => 'all' // all, unread, read, or starred. ], $atts ); // Проверьте наличие атрибута ID (обязательно) и то, что WPForms действительно // установлен и активирован. if ( empty( $atts['id'] ) || ! function_exists( 'wpforms' ) ) < return; >// Получение формы по ID, указанному в шорткоде. $form = wpforms()->form->get( absint( $atts['id'] ) ); // Если форма не существует, прервемся. if ( empty( $form )) < return; >// Извлеките и отформатируйте данные формы из объекта формы. $form_data = ! empty( $form->post_content ) ? wpforms_decode( $form->post_content ) : ''; // Проверяем, показываем ли мы все разрешенные поля, или только определенные. $form_field_ids = isset( $atts['fields'] ) && $atts['fields'] !== '' ? explode( ',', str_replace( ' ', '', $atts['fields'] ) ) : []; // Настройка полей формы. if ( empty( $form_field_ids )) < $form_fields = $form_data['fields']; >else < $form_fields = []; foreach ( $form_field_ids as $field_id ) < if ( isset( $form_data['fields'][ $field_id ] ) ) < $form_fields[ $field_id ] = $form_data['fields'][ $field_id ]; >> > if ( empty( $form_fields ) ) < return; >// Здесь мы определяем, какие типы полей формы мы НЕ хотим включать, // вместо этого они должны быть полностью проигнорированы. $form_fields_disallow = apply_filters( 'wpforms_frontend_entries_table_disallow', [ 'divider', 'html', 'pagebreak', 'captcha' ] ); // Перебираем все поля формы и удаляем все недопустимые типы полей. foreach ( $form_fields as $field_id => $form_field ) < if ( in_array( $form_field['type'], $form_fields_disallow, true ) ) < unset( $form_fields[ $field_id ] ); >> $entries_args = [ 'form_id' => absint( $atts['id'] ), ]; // Сужение записей по пользователю, если использовался атрибут шорткода user_id. if ( ! empty( $atts['user'] ) ) < if ( $atts['user'] === 'current' && is_user_logged_in() ) < $entries_args['user_id'] = get_current_user_id(); >else < $entries_args['user_id'] = absint( $atts['user'] ); >> // Количество записей для показа. Если блок пуст, по умолчанию он равен 30. if ( ! empty( $atts['number'] ) ) < $entries_args['number'] = absint( $atts['number'] ); >// Фильтр типа записей all, unread, read, or starred if ( $atts['type'] === 'unread' ) < $entries_args['viewed'] = '0'; >elseif( $atts['type'] === 'read' ) < $entries_args['viewed'] = '1'; >elseif ( $atts['type'] === 'starred' ) < $entries_args['starred'] = '1'; >// Получение всех записей для формы в соответствии с заданными аргументами. // Существует множество вариантов запросов к записям. Чтобы увидеть больше, посмотрите // функцию get_entries() внутри class-entry.php (https://a.cl.ly/bLuGnkGx). $entries = wpforms()->entry->get_entries( $entries_args ); if ( empty( $entries ) ) < return 'Записи не найдены.
'; > ob_start(); echo '
| '; echo esc_html( sanitize_text_field( $form_field['label'] ) ); echo ' | '; > echo '
|---|
| '; foreach ( $entry_fields as $entry_field ) < if ( absint( $entry_field['id'] ) === absint( $form_field['id'] ) ) < echo apply_filters( 'wpforms_html_field_value', wp_strip_all_tags( $entry_field['value'] ), $entry_field, $form_data, 'entry-frontend-table' ); break; >> echo ' | '; > echo '
После добавления пользовательского кода на ваш сайт, вам нужно будет ввести следующий шорткод на любую страницу или пост для отображения записей формы.
[wpforms_entries_table >Просто замените FORMID на ID вашей формы.
Вы можете найти идентификатор формы, перейдя по ссылке WPForms » Все формы а затем смотрим на колонку Shortcode.
Чтобы добавить шорткод, просто создайте новую страницу или отредактируйте существующую.
Далее добавьте блок ‘Shortcode’.
После добавления блока просто введите ваш шорткод.
Теперь просмотрите страницу WordPress и нажмите кнопку «Опубликовать» вверху.
Вот как выглядел предварительный просмотр записей нашей формы на внешнем интерфейсе:
При необходимости вы можете дополнительно настроить отображение с помощью пользовательских стилей CSS.
Мы надеемся, что эта статья помогла вам узнать, как отображать записи формы WordPress на вашем сайте. Вы также можете ознакомиться с нашим руководством по созданию пользовательской темы WordPress или сравнением лучших программ чата для малого бизнеса.
Источник: www.wpbeginner.com