Cómo añadir un campo repetidor

Cómo Usar el Campo Repetidor en WPForms [Rápido y Fácil]

¿Te preguntas cómo insertar un campo repetidor en tu formulario para capturar más datos en cada envío?

Los campos repetidos en los formularios permiten a los usuarios introducir varios conjuntos de datos similares, al tiempo que hacen que los formularios sean más intuitivos y fáciles de usar.

En este artículo, te mostraré la forma más fácil de diseñar un campo repetidor para WPForms para aumentar la funcionalidad y la experiencia de usuario de tu sitio web.

Crear formularios con campos repetibles 🔁

Cómo crear un formulario con un campo repetidor en WordPress

Siga estos pasos para crear un formulario con campos repetidos para su sitio WordPress:

Paso 1: Instalar WPForms Pro

WPForms ofrece una solución super intuitiva y sin esfuerzo para crear campos repetidores. Para empezar, necesitará una licencia WPForms Pro.

Precios de WPForms Pro

Después de obtener WPForms Pro, instale el plugin en su sitio. Si no está familiarizado con la instalación de plugins, consulte esta guía sobre la instalación de WPForms.

Una vez que WPForms Pro esté instalado y listo, podrá crear formularios con campos repetidos y también acceder a toneladas de características impactantes y complementos como Geolocalización, Hojas de Google y más.

¿Preparado? Vaya al siguiente paso para empezar a crear un formulario con campos repetidos.

Actualice a WPForms Pro Ahora 🐻

Paso 2: Crear un nuevo formulario

En el panel de control de WordPress, sitúe el cursor sobre el menú de la barra lateral de WPForms y haga clic en Añadir nuevo.

Añadir nuevo formulario

Ahora tendrá que dar un nombre a su formulario y elegir una plantilla o crear su formulario desde cero. WPForms viene con más de 2.000 plantillas de formularios, lo que te permite crear cualquier tipo de formulario en WordPress.

Pero, con el fin de ilustrar el trabajo con campos repetidores en WPForms, voy a empezar con el formulario en blanco y construirlo desde cero.

Crear un formulario en blanco para el campo repetidor

En sólo unos segundos, se cargará la pantalla del constructor de formularios, donde podrá crear su formulario personalizado utilizando controles de arrastrar y soltar. Para simplificar, vamos a crear un formulario con sólo tres campos: Nombre, Email y Teléfono.

Pero si queremos que estos campos sean repetibles, lo primero que tenemos que hacer es insertar el campo Repetidor arrastrándolo desde el panel de la izquierda hacia la derecha.

Añadir campo repetidor

Después de insertar el campo Repetidor, haga clic en él para abrir las Opciones de campo relacionadas con él a la izquierda.

Voy a dejar la configuración de pantalla por defecto, ya que esto funciona muy bien para mi escenario.

Pero para mi configuración, voy a necesitar un diseño de tres columnas. Puedes elegir el diseño que más te convenga eligiendo uno de los 9 diseños predefinidos disponibles para el Repetidor.

Preselección de la disposición del campo del repetidor

Cuando selecciones el diseño, verás que la vista previa de la derecha cambia instantáneamente y aparecen zonas desplegables en columnas. Estas son las zonas donde puedes insertar cualquier otro campo que quieras hacer repetible.

Pero primero, vamos a renombrar el campo Repetidor mientras estamos en ello. Puedes hacerlo editando la etiqueta en las Opciones de campo.

Etiqueta del campo repetidor

A continuación, es hora de insertar los campos dentro de las zonas desplegables del campo Repetidor. Después de arrastrar los campos Nombre, Correo electrónico y Teléfono uno a uno a las zonas desplegables de los campos Repetidor, este es el aspecto del formulario:

Campos añadidos dentro del bloque Repetidor

Puede que hayas notado que aquí hay algo que no encaja. Y tiene razón. El campo Nombre está dividido en dos filas, lo que no queda bien en el contexto visual actual.

Pero esto tiene fácil arreglo. En el siguiente paso, voy a personalizar algunos de los ajustes y la apariencia t

Paso 3: Personalizar el campo del repetidor

Como quiero que todos los campos de mi sección repetidora aparezcan en una sola fila, cambiaré el formato del campo Nombre para que se alinee con los demás campos.

Para ello, haga clic en el campo Nombre para abrir sus Opciones de campo, donde encontrará el menú desplegable Formato en el panel izquierdo. Haz clic en el desplegable Formato y selecciona Simple.

Formato del campo Nombre

Observará que el campo Nombre se ha reducido a un solo campo para que esté en consonancia con los demás campos.

Campo repetidor listo

En este punto, el campo repetidor está listo. Pero antes de proceder a publicar el formulario, vamos a repasar algunos ajustes adicionales del campo Repetidor que puede que desee comprobar.

(Opcional) Configuración adicional del campo del repetidor

Haga clic en el campo Repetidor para abrir de nuevo las Opciones de campo.

Si se desplaza hacia abajo por el panel de la izquierda, verá opciones para establecer el tiempo mínimo y máximo que el campo repetidor puede ser duplicado por el visitante. Simplemente introduzca los números para establecer convenientemente sus límites.

Límites del campo del repetidor

A continuación, volvamos a la parte superior del panel Opciones de campo. Esta vez, haz clic en Bloques bajo las opciones de Visualización.

Modo Bloques Repetidores

Cuando se utiliza el campo Repetidor en el modo Bloques, se obtienen configuraciones adicionales. Por ejemplo, también puedes personalizar los botones "añadir" y "eliminar" que utilizarán los visitantes para duplicar el campo o eliminar una copia del mismo.

Puede elegir entre diferentes tipos de botones y editar las etiquetas de los botones.

Configuración del bloque repetidor

Además, también tiene la libertad de añadir un grupo de campos en varias filas cuando utiliza el modo Bloques. Con Filas, solo estás limitado a añadir campos en una única fila.

Las filas funcionan bien para requisitos simples, como el formulario que estoy construyendo en este tutorial. Sin embargo, la opción Bloques te da más control para casos de uso más avanzados en los que necesitas hacer repetible un grupo más grande de campos.

Cuando hayas terminado de hacer cambios, asegúrate de pulsar el botón Guardar.

Guardar formulario

¡Buen trabajo! Ya casi estás listo para publicar el formulario.

Paso 4: Publique su formulario con campos repetidos

WPForms hace que sea fácil incrustar sus formularios y empezar a recoger las presentaciones. Puede comenzar el proceso de incrustación haciendo clic en el botón Incrustar en la parte superior del constructor de formularios.

Incrusta tu formulario con el botón de incrustación

Después de eso, aparecerá un modal que le permitirá seleccionar su método de incrustación. Seleccionemos Crear nueva página.

Crear una nueva página

A continuación, introduzca un nombre para su formulario y haga clic en Vamos.

Integrar en página

Después, se abrirá el editor de bloques de WordPress. El formulario que acabas de crear con el campo repetidor ya debería estar incrustado aquí.

Ahora sería el momento perfecto para dar estilo a tu formulario utilizando el editor de bloques. En concreto, puedes probar a añadir un tema a tu formulario para darle un aspecto moderno.

Puedes seleccionar un tema haciendo clic en cualquier parte del formulario para abrir las opciones del Bloque en el panel de la derecha. Desplázate hasta la sección Temas y elige uno.

Tema del formulario - Flynn

Ahora que tu formulario tiene un aspecto tan bonito e impresionante, publícalo cuando estés listo. Sólo tienes que pulsar el botón Publicar en la parte superior.

Publicar formulario

Cuando haya terminado de publicar el formulario, lo único que le queda por hacer es probar el formulario incrustado para asegurarse de que funciona como se espera en el frontend.

Aquí hay una demostración rápida de mí probando el formulario y comprobando que todo está bien con la funcionalidad del campo Repetidor mediante el envío de una entrada de prueba:

Utilización del campo repetidor

Y todo está funcionando exactamente como se esperaba 🙂 .

Ahí lo tienes. Con el campo repetidor, ahora puedes crear fácilmente formularios dinámicos que el usuario puede controlar. Esa es la clave para impulsar el compromiso del usuario y la satisfacción necesaria para recopilar envíos de formularios a escala.

Crear un formulario con un campo repetidor

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.

Más preguntas sobre el campo repetidor de WPForms

La creación de formularios de campo repetidor es un tema de interés muy popular entre nuestros lectores. He aquí algunas respuestas rápidas a algunas de las preguntas más frecuentes:

¿Qué es un campo repetidor?

Un campo repetidor es una herramienta versátil que permite a los usuarios añadir dinámicamente varios conjuntos de campos idénticos en un formulario. Imagíneselo como un botón "copiar" para un grupo de campos. Aumenta la flexibilidad a la hora de introducir datos repetibles, como registros múltiples.

¿Por qué elegir el campo repetidor WPForms?

La belleza del campo repetidor de WPForms es que facilita la recopilación de datos para usted y sus visitantes.

  • Diseño centrado en el usuario: La introducción de campos repetidos permite a los usuarios decidir el alcance de sus entradas. Es un guiño sutil a la autonomía del usuario y mejora su experiencia general.
  • Flexibilidad en el diseño de formularios: No todos los formularios son iguales. Con los campos de repetición, puede atender a diversos escenarios, ya sea una sola entrada o múltiples entradas, asegurándose de que su formulario se adapta a diversos requisitos.
  • Estructuración coherente de los datos: Uno de los retos de los campos múltiples son los datos incoherentes. Los datos permanecen estructurados y uniformes con campos repetidos, lo que simplifica el procesamiento y el análisis backend.
  • Reducción de la longitud del formulario: En lugar de tener un formulario largo e intimidante con numerosos campos, los campos repetidos proporcionan un aspecto más limpio, garantizando que los usuarios no se sientan abrumados a primera vista.

Tanto si eres un empresario que quiere mejorar la integración de sus clientes como si eres un bloguero que quiere recopilar datos de forma eficaz, el campo repetidor de WPForms tiene un valor incalculable.

A continuación, aprenda a crear un formulario de acordeón en WordPress

¿Está buscando una forma sencilla de añadir un diseño de formulario de acordeón a su sitio web WordPress? Echa un vistazo a nuestro post sobre el método más sencillo para crear un formulario de acordeón utilizando WPForms para impulsar la usabilidad y experiencia de usuario de tu sitio web.

Cree su formulario WordPress ahora

¿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.

Osama Tahir

Osama es un escritor senior en WPForms. Se especializa en desmontar plugins de WordPress para probarlos y compartir sus ideas con el mundo.Má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.

10 comments on "Cómo usar el campo repetidor en WPForms [Rápido y fácil]"

    1. Hola Celeste. Gracias por tu comentario. Parece una gran petición. Queremos que esta función sea lo más útil posible.

      Si tiene una licencia de WPForms, puede registrarla con nuestros asesores de confianza del equipo de soporte. Por favor, envíe un ticket de soporte y comparta los mismos detalles que publicó aquí.

  1. ¿Cómo se añaden los valores de los campos de repetición a los formularios de notificación? Los campos no aparecen en las etiquetas inteligentes.

    1. Hola Allen.

      Los campos se incluirán en el correo electrónico de notificación si utiliza la opción {all_fields} etiqueta. Si desea personalizar el correo electrónico, por favor enviar una solicitud de asistencia y nuestros asesores de confianza del equipo de asistencia podrán ofrecerle una solución para su caso de uso específico.

    1. Hola Daniel, actualmente, WPForms no soporta agregar un campo repetidor dentro de otro repetidor. Apreciamos su interés en esta funcionalidad y la consideraremos para futuras actualizaciones. Mientras tanto, puede explorar el uso de la lógica condicional o múltiples campos repetidores separados para lograr un resultado similar.

  2. ¿Es posible utilizar el campo repetidor con las opciones avanzadas (como los desplegables de pagos, etc.)? Esto es muy necesario y sería genial tener

    1. Hola Sasha,

      Gracias por su comentario sobre el uso de desplegables de pago en el campo Repetidor. Aunque este y otros campos no son compatibles actualmente, estoy de acuerdo en que sería muy útil.

      Lo he añadido como petición de funcionalidad y lo tendremos en cuenta a la hora de planificar futuras actualizaciones. Puede obtener más información sobre todas las funciones actuales en nuestra guía completa sobre el uso del campo Repetidor.

      Para un asesoramiento personalizado, puede ponerse en contacto con nuestros Asesores de Confianza en el equipo de soporte si tiene una licencia de WPForms. Envíe un ticket de soporte y se pondrán en contacto con usted lo antes posible.

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.