Cómo permitir que los visitantes dupliquen los campos de un formulario

Hay muchas ocasiones en las que los usuarios de tus formularios probablemente desearían poder simplemente duplicar los campos de tus formularios. Los campos para nombres adicionales, datos de contacto, horas trabajadas, etc. son fáciles de añadir cuando los usuarios pueden simplemente repetirlos.

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

Cómo permitir que los visitantes dupliquen los campos de un formulario

Primero, obtenga WPForms

Vale, ya sé que he dicho que este tutorial sólo consta de 5 pasos, así que esto parece extra 😉 Pero, es algo obvio que necesitarás WPForms instalado y activado en tu sitio WordPress para duplicar los campos de tus formularios.

Página de inicio de WPForms

Así que, ¡consigue primero el plugin WPForms!

1. Seleccione o cree su formulario

El campo Repetidor es una gran característica incluida con los formularios que usted construye a través de WPForms. Con él, los usuarios del formulario pueden añadir más entradas o duplicar bloques enteros del formulario.

Pero no es necesario crear un nuevo formulario para que los usuarios puedan duplicar campos.

Es posible que ya utilices formularios en tu sitio que te gustaría modificar con el campo Repetidor. Simplemente haz clic en Editar debajo del formulario para el que deseas abrir el constructor de formularios.

Editar un formulario

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

Ofrecemos una amplia selección de plantillas de formularios que incluyen la funcionalidad del campo Repetidor.

Navegar por las plantillas de formularios de campos repetidores

O bien, puede elegir una plantilla de formulario diferente y añadir rápidamente el campo Repetidor con el constructor de formularios.

Y, como siempre, puedes crear tu propio formulario desde cero empezando con un formulario en blanco.

Cree su formulario WordPress ahora

2. Añadir el campo Repetidor

Una vez que tengas tu formulario seleccionado y cargado en el constructor de formularios, puedes añadir el campo Repetidor.

Lo verás entre los campos de la parte izquierda de la pantalla.

Añadir el campo Repetidor a un formulario

Simplemente haz clic en el campo Repetidor, arrástralo a tu formulario y suéltalo donde quieras.

A continuación, al igual que el campo Diseño, el campo Repetidor permite añadir otros campos del formulario.

Añadir campos al área de campo Repetidor

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

En un formulario de inscripción de grupo, por ejemplo, es probable que los usuarios deseen incluir varios nombres de participantes para inscribirse al mismo tiempo.

Vista frontal del campo Repetidor

Antes de que WPForms ofreciera el campo Repetidor, usted podría haber atascado su formulario con un puñado de campos de Nombre que su usuario *podría* necesitar.

O puede haber utilizado ajustes de lógica condicional para incluir campos de Nombre adicionales si el usuario quería incluir más.

Aplicación de ajustes de lógica condicional

Sea cual sea el caso, ahora el campo Repetidor hace que duplicar campos sea mucho más fácil para ti y para los usuarios de tus formularios.

Lea también: Formas de utilizar WPForms para sitios web educativos

3. Visualizar filas o bloques

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

Selección del campo Repetidor para mostrar filas

No sólo puede personalizar los campos dentro del área de campo Repetidor para que se añadan como Filas individuales, sino que también puede permitir que se dupliquen Bloques ent eros de campos.

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

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

Vista frontal del bloque de campo Repetidor

Como puede ver arriba, los botones + añadir o - eliminar están al final de cada Fila.

Los bloques, en cambio, sirven para combinar campos que se repiten juntos y que no caben en una sola Fila.

Selección de la visualización del campo Repetidor como Bloques

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

En mi ejemplo a continuación, seleccioné Bloques como la forma de mostrar mis campos repetibles. A continuación, incluí los campos en el área de campos repetibles que quiero que los usuarios puedan duplicar como una sección.

Vista frontal de los bloques de campo del repetidor

Ahora, cuando los usuarios del formulario añaden otro participante, pueden proporcionar toda la información que he solicitado en el formulario para cada Bloque.

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

4. Elija un diseño

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

Selección de la disposición del campo Repetidor

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

Si tiene filas repetidas de nombres y edades de 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.

Selección de la disposición en 2 columnas del campo Repetidor

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

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

Podría utilizar un Layout de 2 columnas para personalizar esta parte del formulario.

Selección de la disposición en 2 columnas del campo Repetidor

Entonces, se vería algo como esto para el usuario:

Vista frontal del campo Repetidor Disposición en 2 columnas

Consejo profesional: Utilice un campo Nombre sencillo, de una línea, para mantener las columnas espaciadas uniformemente, como hice arriba.

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

5. Personalizar la vista de botones

Lo último que hay que personalizar dentro de la sección de campos repetibles son los botones + y - para añadir y eliminar campos repetibles.

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

Por defecto, estos botones muestran + o - al final de cada Fila, pero puede personalizar estos iconos cuando utilice un Bloque.

Navegación a la configuración del botón de campo Repetidor

Dado que los botones se alojan debajo del bloque en lugar de al final de la fila, la posibilidad de alargarlo mediante la personalización mantiene el orden visual.

En primer lugar, seleccione el tipo de botón.

Selección del tipo de botón del campo Repetidor

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í puede cambiar el texto de la etiqueta del botón.

Personalización de las etiquetas de los botones del campo Repetidor

En un formulario de inscripción de grupo, por ejemplo, puede personalizar el botón para que diga "Añadir participante".

Por último, puede elegir el Límite mínimo y máximo para sus campos repetibles.

Ajuste del límite del botón del campo Repetidor

Por defecto, este Límite está establecido en un mínimo de 1 y un máximo de 10. Esto significa que los usuarios del formulario pueden registrar hasta 10 participantes en este formulario.

Por lo tanto, al aplicar la configuración mostrada anteriormente, el botón de nuestro formulario de registro de grupo tendría el siguiente aspecto para los usuarios:

Vista frontal del botón de campo Repetidor

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 ya sabe cómo permitir que los visitantes de su sitio web dupliquen los campos de sus formularios.

Bonificación: el campo de repetición en acción

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

Formulario de control horario de los empleados

En primer lugar, eche un vistazo a esta hoja de horas del empleado que le ofrecemos como plantilla:

Vista completa de la plantilla de hoja de horas del empleado

En primer lugar, se recogen los datos del empleado, como su nombre, correo electrónico, ID de empleado y el total de horas de la semana.

La sección de datos del empleado de la plantilla

A continuación, los empleados pueden introducir los días concretos y las horas trabajadas durante la semana, utilizando esencialmente este formulario como una hoja de horas semanal.

La sección de la hoja de horas semanales del modelo de formulario

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

¿Quieres utilizar este formulario en tu sitio web? ¡Consigue la plantilla!

Formulario de lista de clase

Ahora, eche un vistazo a esta lista de clase que también ofrecemos como plantilla:

Vista completa de la plantilla de formulario de lista de clase

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

La sección de información sobre el profesor del modelo de formulario

A continuación, con el campo Repetidor, los profesores pueden añadir fácilmente información sobre cada alumno de su lista, como el curso, la fecha de nacimiento o cualquier otro dato que deseen incluir para llevar un registro.

La sección de lista de clase de la plantilla de formulario

Los profesores pueden utilizar esta lista para un máximo de 20 alumnos. 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!

Consulte también esta guía para saber si debe o no utilizar el campo Repetidor de WPForms o el campo Diseño con lógica condicional para optimizar aún más su formulario.

¿Por qué debo permitir que los visitantes dupliquen los campos del formulario?

Es bueno para los usuarios de los formularios. Permitir a los visitantes duplicar los campos de los formularios facilita mucho el proceso de cumplimentación, sobre todo cuando los usuarios tienen que introducir información similar o repetitiva. Esto puede ahorrar tiempo a los visitantes de tu sitio y hacer que su experiencia de rellenar formularios sea más cómoda y eficiente.

Y también es bueno para usted. Cuando los usuarios pueden duplicar los campos de un formulario, te resulta más fácil recopilar y organizar los datos para su análisis, ya que los puntos de datos similares se agrupan y son más manejables.

Además, mantiene el formulario organizado y visualmente atractivo. Los visitantes de tu sitio no se verán abrumados por largas secciones de campos vacíos, y no tendrás que crear un enrevesado camino de reglas lógicas condicionales para mantener ocultos los campos adicionales.

En el Campo de Repetidores todos salimos ganando.

PREGUNTAS FRECUENTES

En WPForms, siempre estamos encantados de ofrecer orientación sobre las características y herramientas que proporcionamos. Por lo tanto, 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 los campos de un formulario?

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

En WPForms, nos referimos a estos duplicados como campos Repetidores, ya que los usuarios de formularios 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 aplicación pueden variar en función de la plataforma o las herramientas que utilice.

En cuanto a WPForms, habilitamos la duplicación de campos con un simple clic o acción de arrastrar y soltar. En otros casos, puede que necesites utilizar código personalizado o plugins para añadir esta funcionalidad.

¿Debo establecer un límite al número 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 un número excesivo de campos, lo que podría afectar al rendimiento del formulario o a la gestión de datos.

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

Cree su formulario WordPress ahora

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

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

Para obtener más consejos rápidos y sencillos -incluidas ideas de personalización que no se tratan aquí- no dejes de echar un vistazo a nuestro tutorial sobre el campo Repetidor.

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin más sencillo para crear formularios en WordPress. WPForms Pro incluye un montón de plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha ayudado, síguenos en Facebook y Twitter para más tutoriales y guías gratuitas sobre WordPress.

Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPForms, por qué es importante y cómo puede apoyarnos.

Kacie Cooper

Kacie es escritora y creadora de plantillas para WPForms. Lleva blogueando sobre WordPress y escribiendo sobre él desde 2016Más información...

El mejor plugin de WordPress para crear formularios arrastrando y soltando

Fácil, rápido y seguro. Únete a más de 6 millones de propietarios de sitios web que confían en WPForms.

Active JavaScript en su navegador para rellenar este formulario.

Añadir un comentario

Nos alegra que haya decidido dejar un comentario. Por favor, tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de privacidad, y todos los enlaces son nofollow. NO utilice palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.

Este formulario está protegido por Cloudflare Turnstile y se aplican la Política de privacidad y las Condiciones del servicio de Cloudflare.