Как разрешить посетителям дублировать поля формы

Опубликовано: 2024-06-14

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

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

Как разрешить посетителям дублировать поля формы

В этой статье

  • 1. Выберите или создайте свою форму
  • 2. Добавьте поле повторителя.
  • 3. Отображение строк или блоков
  • 4. Выберите макет
  • 5. Настройте вид кнопок
  • Бонус: поле повторителя в действии
  • Часто задаваемые вопросы

Сначала получите WPForms

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

WPForms home

Итак, сначала установите плагин WPForms!

1. Выберите или создайте свою форму

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

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

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

Editing a form

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

Мы предлагаем широкий выбор шаблонов форм со встроенными в них функциями повторения полей.

Browsing the Repeater field form templates

Или вы можете выбрать другой шаблон формы и быстро добавить поле «Повторитель» с помощью конструктора форм.

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

Создайте свою форму WordPress прямо сейчас

2. Добавьте поле повторителя.

После того как форма выбрана и загружена в конструктор форм, вы можете добавить поле «Повторитель» .

Вы увидите его среди полей в левой части экрана.

Adding the Repeater field to a form

Просто щелкните поле «Повторитель», перетащите его в форму и поместите туда, где вы хотите.

Затем, как и поле «Макет», поле «Повторитель» позволяет добавлять в него другие поля вашей формы.

Adding fields to the Repeater field area

Итак, какие поля относятся к разделу полей Повторителя? Поля, которые вы хотите разрешить пользователям вашей формы дублировать.

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

Front-end view of the Repeater field

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

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

Applying conditional logic settings

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

3. Отображение строк или блоков

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

Selecting the Repeater field to display rows

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

Совет для профессионалов : перейдите на вкладку «Дополнительно», чтобы скрыть метку поля «Повторитель», как это сделал я.

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

Front-end view of the Repeater field block

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

С другой стороны, блоки хороши для объединения повторяющихся полей, которые не могут поместиться только в одну строку.

Selecting the Repeater field display as Blocks

А в случае с блоками кнопки + добавить или – удалить находятся под всем разделом полей. Подробнее об этих кнопках позже.

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

Front-end view of Repeater field blocks

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

Таким образом, пользователи формы могут дублировать целые разделы формы одновременно.

4. Выберите макет

Далее ознакомьтесь с различными способами организации макета повторяющихся полей.

Selecting the Repeater field layout

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

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

Selecting the Repeater field 2 column layout

Итак, мой пример столбцов «Строки» и «Макет» в конструкторе форм выше будет выглядеть для пользователя формы следующим образом:

Или помните тот блок, который я показывал вам в конце шага 3, с именем участника, контактной информацией для экстренных случаев и другими полями?

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

Selecting the Repeater field 2 column layout

Тогда для пользователя это будет выглядеть примерно так:

Front-end view of the Repeater field 2 column layout

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

Изменение этих аспектов поля «Повторитель» просто помогает сохранить порядок и порядок во всей форме.

5. Настройте вид кнопок

Последнее, что нужно настроить в разделе полей повторителя, — это кнопки + и – для добавления и удаления повторяющихся полей.

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

По умолчанию эти кнопки отображают + или – в конце каждой строки, но вы можете настроить эти значки при использовании блока.

Navigating to the Repeater field button settings

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

Сначала выберите тип кнопки .

Selecting the Repeater field button type

Варианты здесь включают в себя:

  • Кнопки с иконками
  • Кнопки
  • Иконки с текстом
  • Иконки
  • Простой текст

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

Customizing the Repeater field button labels

Например, в форме регистрации группы вы можете настроить кнопку на надпись «Добавить участника».

Наконец, вы можете выбрать минимальный и максимальный лимит для повторяющихся полей.

Setting the Repeater field button limit

По умолчанию этот предел установлен минимум на 1 и максимум на 10. Это означает, что пользователи формы могут зарегистрировать в этой форме до 10 участников.

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

Front-end view of the Repeater field button

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

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

Бонус: поле повторителя в действии

Я показал вам, как использовать область поля «Повторитель» в форме регистрации группы, но хотел бы поделиться еще парой хороших примеров использования этой функции в действии.

Форма табеля учета рабочего времени сотрудника

Во-первых, взгляните на этот график учета рабочего времени сотрудника, который мы предлагаем в качестве шаблона:

Full view of the employee timesheet form template

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

The employee details section of the template

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

The weekly timesheet section of the form template

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

Хотите использовать эту форму на своем сайте? Получите шаблон!

Форма списка классов

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

Full view of the class roster form template

Все начинается со сбора информации от учителя для облегчения отслеживания каждой подачи.

The teacher information section of the form template

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

The class roster section of the form template

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

Нравится эта форма? Получите шаблон!

Почему я должен разрешать посетителям дублировать поля формы?

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

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

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

Поле Репитера – это беспроигрышный вариант для всех!

Часто задаваемые вопросы

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

Что значит разрешить посетителям дублировать поля формы?

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

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

Как я могу реализовать дублирование полей в формах моего сайта?

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

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

Должен ли я установить ограничение на количество дублирований поля формы?

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

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

Создайте свою форму WordPress прямо сейчас

Далее ознакомьтесь с этим быстрым и простым руководством.

Я поделился довольно большим количеством информации о том, как разрешить посетителям дублировать поля, но еще больше информации можно узнать об использовании поля «Повторитель». Эта функция предлагает так много всего, что есть о чем рассказать.

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

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

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