Cómo permitir que los visitantes dupliquen campos de formulario

Publicado: 2024-06-14

Hay muchas ocasiones en las que los usuarios de su formulario probablemente deseen poder simplemente duplicar los campos de sus formularios. Los campos para nombres adicionales, detalles de contacto, horas trabajadas, etc. son fáciles de agregar cuando los usuarios pueden simplemente repetirlos.

Ahora, con el campo Repetidor de WPForms, ¡los usuarios de su sitio web pueden hacer precisamente eso! En este tutorial, te mostraré cómo modificar tus formularios para permitir campos duplicados en solo 5 pasos.

Cómo permitir que los visitantes dupliquen campos de formulario

En este articulo

  • 1. Seleccione o cree su formulario
  • 2. Agregue el campo repetidor
  • 3. Mostrar filas o bloques
  • 4. Elige un diseño
  • 5. Personaliza la vista de botones
  • Bonificación: el campo repetidor en acción
  • Preguntas más frecuentes

Primero, obtenga WPForms

Ok, sé que dije que este tutorial solo requiere 5 pasos, así que parece extra. Pero es un hecho que necesitarás WPForms instalado y activado en tu sitio de WordPress para duplicar los campos de tus formularios.

WPForms home

Entonces, ¡primero obtenga el complemento WPForms!

1. Seleccione o cree su formulario

El campo Repetidor es una gran característica incluida en los formularios que crea a través de WPForms. Con él, los usuarios de su formulario pueden agregar más entradas o duplicar bloques completos del formulario.

Pero no es necesario crear un formulario nuevo para comenzar a permitir a los usuarios duplicar campos.

Es posible que ya utilice formularios en su sitio que le gustaría modificar con el campo Repetidor. Simplemente haga clic en Editar debajo del formulario para el que desea abrir el generador de formularios.

Editing a form

Pero, si necesita crear un nuevo formulario, puede comenzar eligiendo entre miles de plantillas de formulario proporcionadas en la galería de WPForms.

Ofrecemos una amplia selección de plantillas de formulario que vienen con la funcionalidad de campo Repetidor integrada.

Browsing the Repeater field form templates

O puede elegir una plantilla de formulario diferente y agregar rápidamente el campo Repetidor con el creador de formularios.

Y, como siempre, usted mismo puede crear su formulario desde cero comenzando con un formulario en blanco.

Crea tu formulario de WordPress ahora

2. Agregue el campo repetidor

Una vez que haya seleccionado y cargado su formulario en el creador de formularios, puede agregar el campo Repetidor .

Lo verás entre los campos del lado izquierdo de la pantalla.

Adding the Repeater field to a form

Simplemente haga clic en el campo Repetidor, arrástrelo a su formulario y suéltelo donde desee.

Luego, al igual que el campo Diseño, el campo Repetidor permite agregarle otros campos en su formulario.

Adding fields to the Repeater field area

Entonces, ¿qué campos pertenecen a la sección Campo repetidor? Los campos que desea permitir que los usuarios de su formulario dupliquen.

En un formulario de registro de grupo, por ejemplo, los usuarios probablemente deseen incluir varios nombres de participantes para registrarse al mismo tiempo.

Front-end view of the Repeater field

Antes de que WPForms ofreciera el campo Repetidor, es posible que haya obstruido su formulario con un puñado de campos de Nombre que su usuario * podría * necesitar.

O es posible que haya utilizado configuraciones de lógica condicional para incluir campos de Nombre adicionales si el usuario quisiera incluir más.

Applying conditional logic settings

Cualquiera que haya sido el caso, el campo Repetidor ahora hace que duplicar campos sea mucho más fácil para usted y los usuarios de su formulario.

3. Mostrar filas o bloques

Ahora, antes de continuar, eche un vistazo a las opciones de visualización que se aplican al campo Repetidor.

Selecting the Repeater field to display rows

No solo puede personalizar los campos dentro del área de campos repetidores para que se agreguen como filas individuales, sino que también puede permitir que se dupliquen bloques completos de campos.

Consejo profesional : navegue a la pestaña Avanzado para ocultar la etiqueta del campo Repetidor como lo hice yo.

Cuando selecciona los campos en el área del Repetidor para que se muestren como Filas, los usuarios de su formulario duplicarán cada línea horizontal.

Front-end view of the Repeater field block

Como puede ver arriba, los botones + agregar o eliminar están al final de cada fila.

Los bloques, por otro lado, son buenos para combinar campos que se repetirán juntos y que no caben en una sola fila.

Selecting the Repeater field display as Blocks

Y con Bloques, los botones + agregar o – eliminar están debajo de toda la sección de campos. Más sobre esos botones, más adelante.

En el siguiente ejemplo, seleccioné Bloques como forma de mostrar mis campos repetibles. Luego incluí los campos en el área de campo Repetidor que quiero que los usuarios puedan duplicar como una sección.

Front-end view of Repeater field blocks

Ahora, cuando los usuarios del formulario agregan otro participante, pueden proporcionar toda la información que solicité en el formulario para cada bloque.

De esta manera, los usuarios del formulario pueden duplicar secciones enteras del formulario a la vez.

4. Elige un diseño

A continuación, consulte las diferentes formas en que puede organizar el diseño de sus campos repetibles.

Selecting the Repeater field layout

Puede configurar sus campos en filas individuales, columnas espaciadas uniformemente y columnas desiguales.

Si tiene filas repetibles de nombres y edades de los participantes, por ejemplo, puede elegir un diseño que coloque un espacio más grande para el nombre y un espacio más pequeño para la edad.

Selecting the Repeater field 2 column layout

Entonces, mi ejemplo de filas y columnas de diseño en el generador de formularios anterior se vería así para un usuario de formulario:

¿O recuerda el bloque que le mostré al final del paso 3 con el nombre del participante, la información de contacto de emergencia y otros campos?

Podría utilizar un diseño de 2 columnas para personalizar esta parte del formulario.

Selecting the Repeater field 2 column layout

Entonces, se vería así para el usuario:

Front-end view of the Repeater field 2 column layout

Consejo profesional : utilice un campo de nombre simple de una línea para mantener las columnas espaciadas uniformemente como lo hice anteriormente.

Modificar estos aspectos del campo Repetidor simplemente ayuda a mantener todo ordenado y organizado en todo el formulario.

5. Personaliza la vista de botones

Lo último que debe personalizar dentro de la sección de campos repetidores son los botones + y – para agregar y eliminar campos repetibles.

Estos son los botones en los que el usuario de su formulario hará clic para agregar nombres, secciones de registro o cualquier otro campo que haya puesto a disposición para duplicar.

De forma predeterminada, estos botones muestran + o – al final de cada fila, pero puedes personalizar estos íconos cuando utilizas un bloque.

Navigating to the Repeater field button settings

Dado que los botones están ubicados debajo del bloque en lugar del final de la fila, permitir que se alargue mediante la personalización aún mantiene las cosas visualmente ordenadas.

Primero, seleccione el tipo de botón .

Selecting the Repeater field button type

Las opciones aquí incluyen:

  • Botones con iconos
  • Botones
  • Iconos con texto
  • Iconos
  • Texto sin formato

Si su botón muestra texto de cualquier tipo, puede personalizarlo en el siguiente cuadro. Aquí es donde puedes cambiar lo que lee la etiqueta del botón .

Customizing the Repeater field button labels

En un formulario de registro de grupo, por ejemplo, puede personalizar su botón para que diga "Agregar participante".

Finalmente, puede elegir el límite mínimo y máximo para sus campos repetibles.

Setting the Repeater field button limit

De forma predeterminada, este límite está establecido en un mínimo de 1 y un máximo de 10. Eso significa que los usuarios del formulario pueden registrar hasta 10 participantes en este formulario.

Entonces, al aplicar la configuración que se muestra arriba, el botón en nuestro formulario de registro de grupo se vería así para los usuarios:

Front-end view of the Repeater field button

Como siempre, cuando esté satisfecho con sus campos personalizados y repetibles, asegúrese de guardar su formulario para publicarlo cuando esté listo.

¡Y eso es todo! Ahora sabe cómo permitir que los visitantes del sitio web dupliquen campos en sus formularios.

Bonificación: el campo repetidor en acción

Le he mostrado cómo utilizar el área del campo Repetidor en un formulario de registro de grupo, pero me gustaría compartir un par de otros buenos ejemplos de esta función en acción.

Formulario de hoja de horas del empleado

Primero, eche un vistazo a esta hoja de horas de los empleados que ofrecemos como plantilla:

Full view of the employee timesheet form template

Primero se recopilan los detalles de los empleados, incluido su nombre, correo electrónico del empleado, identificación del empleado y el total de horas de la semana.

The employee details section of the template

Luego, los empleados pueden ingresar sus días y horas específicos trabajados para la semana, esencialmente usando este formulario como una hoja de horas semanal.

The weekly timesheet section of the form template

Utiliza bloques y columnas repetibles que permiten a los usuarios duplicar campos para el día de la semana en que trabajaron, junto con el tiempo de entrada y salida de ese día. Estos campos se pueden repetir hasta 14 veces, o una semana de turnos dobles.

¿Quiere utilizar este formulario en su sitio web? ¡Consigue la plantilla!

Formulario de lista de clase

Ahora, consulte esta lista de clases que también ofrecemos como plantilla:

Full view of the class roster form template

Comienza recopilando la información del profesor para facilitar el seguimiento de cada envío.

The teacher information section of the form template

Luego, con el campo Repetidor, los profesores pueden agregar fácilmente información para cada estudiante en su lista, como el nivel de grado, la fecha de nacimiento o cualquier otro dato que quieran incluir para el mantenimiento de registros.

The class roster section of the form template

Los profesores pueden utilizar esta lista para hasta 20 estudiantes. O, como siempre, esta plantilla de formulario es totalmente personalizable, por lo que se puede modificar el número máximo de entradas permitidas.

¿Te gusta este formulario? ¡Consigue la plantilla!

¿Por qué debería permitir que los visitantes dupliquen campos de formulario?

¡Es bueno para los usuarios de su formulario! Permitir a los visitantes duplicar campos de formulario hace que el proceso de completar formularios sea mucho más fácil, particularmente cuando los usuarios necesitan ingresar información similar o repetitiva. Esto puede ahorrar tiempo a los visitantes de su sitio y hacer que su experiencia al completar formularios sea más conveniente y eficiente.

¡Y también es bueno para ti! Cuando los usuarios pueden duplicar campos de formulario, le resulta más fácil recopilar y organizar datos para su análisis, porque los puntos de datos similares están agrupados y son más manejables.

Además, simplemente mantiene su formulario organizado y visualmente atractivo. Los visitantes de su sitio no se sentirán abrumados por largas secciones de campos vacíos y no tendrá que crear un complicado rastro de reglas lógicas condicionales para mantener ocultos campos adicionales.

¡El campo repetidor es beneficioso para todos!

Preguntas más frecuentes

En WPForms, siempre estamos encantados de ofrecer orientación sobre las funciones y herramientas que ofrecemos. Entonces, aquí están las respuestas a algunas de nuestras preguntas más frecuentes sobre la duplicación de campos de formulario:

¿Qué significa permitir a los visitantes duplicar campos de formulario?

Permitir a los visitantes duplicar campos de formulario significa brindarles la opción de crear múltiples instancias de un campo específico dentro de un formulario. De esta manera, pueden ingresar información similar o repetitiva de manera más eficiente.

En WPForms, nos referimos a estos duplicados como campos repetidores, ya que los usuarios del formulario pueden repetir estos campos para ingresar más información.

¿Cómo puedo implementar la duplicación de campos en los formularios de mi sitio web?

Los métodos de implementación pueden variar según la plataforma o las herramientas que esté utilizando.

En cuanto a WPForms, permitimos la duplicación de campos con un simple clic o una acción de arrastrar y soltar. En otros casos, es posible que necesite utilizar código personalizado o complementos para agregar esta funcionalidad.

¿Debo establecer un límite en la cantidad de veces que se puede duplicar un campo de formulario?

Establecer límites puede ayudar a mantener la usabilidad del formulario y evitar que los usuarios creen una cantidad excesiva de campos, lo que podría afectar el rendimiento del formulario o la gestión de datos.

Con el campo Repetidor de WPForms, puede establecer un límite máximo para entradas duplicadas, para controlar este aspecto de su formulario.

Crea tu formulario de WordPress ahora

A continuación, consulte esta guía rápida y sencilla

He compartido bastante información sobre cómo permitir que los visitantes dupliquen campos, pero aún hay más que aprender sobre el uso del campo Repetidor. Esta característica ofrece tanto que hay mucho que cubrir.

Para conocer algunos consejos adicionales, rápidos y sencillos, incluidas ideas de personalización que no se tratan aquí, asegúrese de consultar nuestro tutorial sobre el campo Repetidor.

¿Listo para construir tu formulario? Comience hoy con el complemento de creación de formularios de WordPress más sencillo. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo le ayudó, síganos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.