Как предварительно просмотреть запись формы перед ее отправкой

Опубликовано: 2022-01-27

Вы хотите, чтобы ваши посетители просматривали свои записи в форме перед их отправкой?

Предоставление пользователям возможности предварительного просмотра своих записей значительно снижает вероятность ошибок и неточностей при заполнении форм.

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

В этом посте мы покажем вам, как добавить поле Entry Preview и настроить его различными способами в WPForms.

Создайте форму с предварительным просмотром ввода сейчас

Почему вы должны показывать предварительный просмотр записи?

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

WPForms — лучший плагин для создания форм WordPress. Получите это бесплатно!

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

Итак, если вы хотите свести к минимуму ошибки и дать своим пользователям возможность исправить любые ошибки перед отправкой, вам следует добавить поле Entry Preview, предлагаемое WPForms.

Как предварительно просмотреть запись формы перед ее отправкой

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

  1. Установите WPForms
  2. Добавить новую форму
  3. Добавить поле предварительного просмотра ввода формы
  4. Настроить уведомление и стиль предварительного просмотра
  5. Добавить подтверждение предварительного просмотра записи

Давай начнем.

1. Установите WPForms

Для начала выберите подходящий план WPForms и зарегистрируйте свою учетную запись. Затем войдите в свою учетную запись WPForms и перейдите на вкладку « Загрузки ». Откроется страница, на которой вы можете нажать кнопку « Загрузить WPForms» , чтобы загрузить zip-файл.

Кнопка «Скачать WPForms»

Пока вы находитесь на этой странице, обязательно скопируйте лицензионный ключ. Это понадобится вам позже, когда вы активируете WPForms Pro на своем сайте WordPress.

Лицензионный ключ WPForms

После того, как zip-файл загрузится на ваш компьютер, откройте панель администратора WordPress и нажмите Плагины »Добавить новый. Затем нажмите кнопку « Загрузить плагин ».

Загрузить плагин

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

Нажмите « Установить сейчас» , когда файл будет загружен.

Установить сейчас

Теперь WPForms будет установлен на ваш сайт WordPress. Это должно занять всего несколько секунд. Когда установка завершится, нажмите кнопку « Активировать плагин ».

Активировать плагин WPForms

Теперь нажмите WPForms »Настройки. По умолчанию откроется вкладка Общие настройки. Прокрутите вниз, чтобы найти поле «Лицензионный ключ», и введите здесь свой ключ (который вы скопировали ранее).

Лицензионный ключ WPForms

Затем нажмите кнопку « Подтвердить ключ ». Это завершит установку WPForms Pro на вашем сайте.

2. Добавьте новую форму

Теперь откройте панель администрирования WordPress вашего сайта и нажмите WPForms »Add New на левой боковой панели. Теперь вы можете дать имя своей форме, чтобы вам было легче найти ее позже.

Добавить новую форму

Прокрутите вниз, чтобы выбрать шаблон, чтобы начать создание формы. Как и все поля WPForms, поле Entry Preview поддерживается в большинстве из более чем 300 доступных шаблонов.

Выберите шаблон

Когда вы выбрали шаблон, на следующем шаге мы добавим поле Entry Preview.

3. Добавьте поле предварительного просмотра ввода формы

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

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

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

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

Поле Entry Preview с разрывом страницы в области предварительного просмотра построителя форм

Вот как выглядит предварительный просмотр в действии, когда пользователь заполняет форму:

Предварительный просмотр простой формы

Вы также можете разместить поле Entry Preview несколько раз в своей форме. Например, если у вас есть многостраничная форма, вы можете разместить поле предварительного просмотра после каждой страницы. Это означает, что ваши пользователи могут просмотреть информацию, которую они заполнили на предыдущих страницах, пока они продолжают заполнять остальную часть вашей формы.

предварительный просмотр нескольких полей ввода формы

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

4. Настройте уведомление и стиль предварительного просмотра

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

Вы можете использовать кнопку-переключатель Отобразить уведомление о предварительном просмотре, чтобы отобразить сообщение над предварительным просмотром записи или полностью скрыть его.

Включение уведомления поля Entry Preview

Кроме того, у вас есть возможность отредактировать уведомление о предварительном просмотре по своему вкусу или оставить сообщение по умолчанию без изменений.

Далее вы можете изменить стиль Entry Preview. Перейдите на вкладку « Дополнительно » в параметрах поля «Предварительный просмотр», чтобы выбрать один из 4 различных стилей предварительного просмотра:

  • Базовый
  • Компактный
  • Таблица
  • Стол, Компактный

Выбор стиля Entry Preview

Стиль по умолчанию — « Базовый», который отображает построчный предварительный просмотр записи формы.

Предварительный просмотр простой формы

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

Компактная форма стиля

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

5. Добавьте подтверждение предварительного просмотра записи

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

В отличие от поля «Предварительный просмотр записи», ваши пользователи не могут изменять свои записи, когда отображается подтверждение предварительного просмотра. Вместо этого он показывает вашим пользователям только копию их отправки, которую больше нельзя изменить.

Чтобы настроить подтверждения предварительного просмотра ввода, перейдите в « Настройки» — «Подтверждения» в конструкторе форм WPForms. Здесь вы можете включить предварительный просмотр записи после кнопки подтверждения .

Включение подтверждения предварительного просмотра записи

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

Выбор стиля подтверждения предварительного просмотра записи

Вы по-прежнему можете использовать предварительный просмотр записей (которые появляются при заполнении формы) вместе с подтверждением предварительного просмотра (которое появляется только после отправки записей). Или вы можете использовать только один или другой из этих вариантов. Все зависит от ваших предпочтений и того, чего вы пытаетесь достичь с помощью своих форм.

Подтверждение предварительного просмотра

И это все! Теперь вы можете разрешить своим пользователям просматривать запись формы перед ее отправкой.

Затем установите ограничения доступа к формам WordPress.

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

Вы также можете прочитать наше руководство по лучшим плагинам панели уведомлений WordPress для продвижения ваших продаж и специальных предложений на вашем сайте.

Готовы построить свою форму? Начните сегодня с самого простого плагина для создания форм WordPress. WPForms Pro включает множество бесплатных шаблонов и предлагает 14-дневную гарантию возврата денег.

Создайте форму с предварительным просмотром ввода сейчас

Если эта статья помогла вам, подпишитесь на нас в Facebook и Twitter, чтобы получить больше бесплатных руководств и руководств по WordPress.