Tutoriales de WordPress de Confianza, cuando más los necesitas.
Guía para Principiantes de WordPress
Copa WPB
25 Millones+
Sitios web que usan nuestros plugins
16+
Años de experiencia en WordPress
3000+
Tutoriales de WordPress de expertos

Cómo usar el llenado dinámico de campos en WordPress para autocompletar formularios

Hemos visto que esto sucede mucho: alguien comienza a completar un formulario en tu sitio de WordPress y lo abandona a mitad de camino. Tal vez el formulario solicita detalles que ya han proporcionado, o tal vez simplemente se siente demasiado largo.

Ahí es donde la población dinámica de campos puede ayudar. Te permite completar automáticamente los campos del formulario con información que ya conoces sobre tus visitantes, como su nombre de un perfil de usuario o detalles pasados a través de una URL.

Después de probar varios plugins, WPForms se destaca como la opción más efectiva. Somos grandes admiradores aquí en WPBeginner porque hace que la creación de formularios inteligentes y fáciles de usar sea increíblemente sencilla.

Si deseas crear formularios más fluidos que las personas realmente completen, estás en el lugar correcto.

En esta guía, te mostraremos cómo configurar la población dinámica de campos en WordPress usando WPForms. De esta manera, puedes mejorar la experiencia del usuario mientras sigues recopilando los datos que necesitas.

Autocompleta campos de formularios en WordPress con población dinámica de campos

¿Qué es la Población Dinámica de Campos?

La población dinámica de campos es una técnica que permite a los propietarios de sitios web completar automáticamente los campos de un formulario basándose en la selección del usuario, el tipo de formulario, las cadenas de consulta o la lógica condicional.

Por ejemplo, una tienda de comercio electrónico puede crear un formulario donde el campo del producto se rellena dinámicamente utilizando los productos existentes en WooCommerce o cualquier otro software de comercio electrónico.

De manera similar, un sitio web de bienes raíces puede poblar automáticamente los campos de listados, agentes y tipo de propiedad en sus formularios de citas y generación de leads.

Los usuarios avanzados y desarrolladores también pueden usar parámetros de URL para completar campos de formularios dinámicamente con enlaces inteligentes de boletines por correo electrónico u otras interacciones del sitio web.

Teniendo esto en cuenta, te mostraremos cómo usar fácilmente la población dinámica de campos en WordPress. Aquí tienes un resumen rápido de todos los pasos que cubriremos en esta guía:

¡Empecemos!

Método 1. Autocompletar archivos de formulario usando población dinámica de campos

Primero, necesitas instalar y activar el plugin WPForms. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

WPForms es el mejor plugin de formularios de contacto de WordPress del mercado. Te permite crear fácilmente formularios en línea usando una sencilla herramienta de arrastrar y soltar.

También viene con población dinámica de campos, lógica condicional y campos de formulario avanzados. Juntas, estas características te permiten crear formularios más inteligentes e interactivos en tu sitio web.

En WPBeginner, usamos WPForms para crear nuestro formulario de contacto. Tenemos una gran experiencia con él, y puedes ver nuestra reseña completa de WPForms para más información.

Al activar el plugin, necesitas visitar la página WPForms » Configuración para ingresar tu clave de licencia. Puedes encontrar esta información en tu cuenta en el sitio web de WPForms.

Clave de licencia de WPForms

💡 Nota: También hay una versión gratuita de WPForms que puedes probar para ver si te gusta la plataforma.

A continuación, necesitas visitar WPForms » Agregar Nuevo para crear tu primer formulario.

Se te pedirá que proporciones un nombre para tu formulario y luego elijas cómo quieres construir tu formulario.

Con WPForms, puedes empezar con un lienzo en blanco, usar el Constructor de Formularios con IA, o seleccionar una plantilla predeterminada. Si quieres usar WPForms AI, todo lo que necesitas hacer es escribir una indicación y la herramienta generará el formulario por ti.

Formularios de IA de WPForms en acción

Para este tutorial, sin embargo, usaremos una plantilla.

WPForms viene con más de 2,000 plantillas para elegir. Para acotar la elección, puedes usar la barra de búsqueda y escribir "order".

Una vez que hayas encontrado la plantilla que quieres usar, simplemente pasa el cursor sobre ella y haz clic en 'Usar Plantilla'. Por ejemplo, usaremos la plantilla 'Formulario de Facturación / Pedido'.

Seleccionar plantilla de formulario de pedido

WPForms ahora cargará tu formulario con campos preseleccionados. Puedes hacer clic para editar los campos del formulario o usar la función de arrastrar y soltar para moverlos hacia arriba y hacia abajo. También puedes agregar y eliminar campos del formulario con solo un clic.

Agreguemos ahora un nuevo campo al formulario para poblarlo con opciones dinámicas.

Puedes agregar un campo de desplegable, opción múltiple o casilla de verificación a tu formulario para usar opciones de elección dinámica. Simplemente haz clic en un campo de la columna izquierda y arrástralo para agregarlo a tu formulario.

Agregar campos al formulario

🧑‍💻 Consejo Pro: Puedes usar Opciones de IA para generar las opciones para tu campo desplegable, de opción múltiple o de casilla de verificación. Así, en lugar de escribir manualmente cada opción, puedes ingresar una indicación como "Tipos de materiales para camisetas" o "Lista de sabores populares de pastel", y WPForms generará las opciones por ti.

A continuación, puedes hacer clic para editar los campos del formulario.

Simplemente cambia al menú Avanzado desde la columna izquierda.

Cambiar a la pestaña avanzada

Desde aquí, necesitas seleccionar 'Opciones Dinámicas'.

WPForms soporta tipos de publicación y taxonomías registradas en tu sitio de WordPress.

Para este tutorial, seleccionaremos 'Tipo de publicación' como 'Opciones dinámicas' y 'Productos' como la 'Fuente de publicación dinámica'.

Seleccionar opciones dinámicas

WPForms ahora cargará y mostrará automáticamente los campos en la vista previa del formulario.

Para incrustar el formulario, simplemente haz clic en el botón 'Incrustar' en la parte superior del constructor de formularios. Desde aquí, puedes seleccionar una página existente para incrustar el formulario o crear una nueva página.

Incrustar WPForms

Alternativamente, puedes usar el bloque WPForms para agregar el formulario a una publicación o página de WordPress. Continúa y edita la publicación o página donde deseas agregar el formulario.

Una vez que estés en el editor de contenido de WordPress, puedes agregar el bloque WPForms a tu área de edición de publicaciones. Después de eso, simplemente selecciona el formulario que creaste anteriormente del menú desplegable.

Agregar bloque de WPForms en WordPress

Ahora puedes guardar tu publicación o página.

A continuación, es posible que desees visitar tu sitio web para ver tu formulario con valores de campo dinámicos en acción.

Vista previa de WPForm

Método 2. Autocompletar campos de formulario usando parámetros de URL

WPForms también te permite rellenar campos de formulario dinámicamente usando parámetros de URL. Esta función te permite crear enlaces inteligentes que pasan automáticamente información al formulario y la rellenan para que tus usuarios la envíen.

Primero, necesitas crear un nuevo formulario o editar uno existente en WPForms. Una vez que hayas terminado de crear tu formulario, querrás cambiar a la pestaña 'Configuración' en la columna izquierda y luego seleccionar la pestaña 'General'.

En esta pantalla, necesitas hacer clic en el interruptor para la opción 'Habilitar autocompletar por URL'.

Habilitar la opción de prellenado por URL

Ahora puedes guardar tu formulario y salir del creador de formularios. Tu formulario está listo para poblar campos dinámicamente usando parámetros de URL.

Creación de enlaces con parámetros de URL

WPForms acepta campos de formulario dinámicos pasados a través de parámetros de URL en un formato específico.

https://example.com/contact/?wpf15_1=value

Vamos a desglosarlo.

  • La parte de la URL antes del signo de interrogación ‘?’ es la URL de la página que tiene tu formulario. Por ejemplo, la página de tu formulario de contacto.
  • ?wpf – Indica el inicio de los parámetros de campo del formulario de WPForm.
  • 15 – Es el ID de tu formulario
  • _1 – Es el ID del campo
  • =valor – = Indica el inicio del valor que deseas pasar al formulario, seguido del valor real del campo.

Aquí tienes un ejemplo de una URL donde estamos pasando el título de un producto como un campo de texto a un formulario de comentarios.

https://example.com/contact/?wpf15_2=Vintage%20Flower%20Vase
Añadir URL a tu publicación

Aquí, nota cómo hemos usado %20 para indicar los espacios entre palabras en el título del producto.

Cómo encontrar los IDs de formulario y campo en WPForms

Para crear parámetros de URL, necesitarás conocer los IDs del formulario y del campo.

Para encontrar estos valores, simplemente edita tu formulario y verás el ID del formulario en la barra de direcciones de tu navegador.

Encontrar el ID del formulario en WPForms

De manera similar, para encontrar el ID del campo del formulario, solo necesitas hacer clic en él para editarlo.

Verás las propiedades del campo del formulario en la columna izquierda, junto con el ID del campo en la parte superior.

Encontrar el ID del campo del formulario

Ahora, ¿qué pasaría si quisieras pasar un valor a un subcampo?

Simplemente agrega el identificador del subcampo después del ID del campo en tu URL de esta manera:

https://example.com/contact/?wpf15_3_city=london

Para más detalles, puedes consultar la documentación para desarrolladores de WPForms, que muestra más ejemplos de uso de diferentes parámetros para todo tipo de campos de formulario.

Ahora puedes usar esta función en combinación con tu software CRM o tu servicio de marketing por correo electrónico para enviar enlaces de formularios inteligentes a tus usuarios. La mayoría de las plataformas de marketing vienen con sus propias etiquetas MERGE personalizadas que puedes agregar en la URL inteligente para completar automáticamente información personal en el formulario.

⚠️ Descargo de responsabilidad: También puedes usar la función de población dinámica de campos con otros complementos de formularios como Formidable Forms, Gravity Forms, u otros. Sin embargo, recomendamos usar WPForms porque facilita todo el proceso, y lo conocemos bien porque creamos el producto.

Para más detalles, consulta nuestra comparación entre WPForms vs Formidable Forms vs Gravity Forms.

Consejo adicional: Agregar autocompletado para campos de dirección

Otra forma de mejorar tus formularios es agregando campos de dirección con autocompletado en WordPress. Esta función hace que sea más rápido y fácil para los usuarios ingresar sus direcciones, al mismo tiempo que reduce errores.

Por ejemplo, en una tienda en línea, el autocompletado puede acelerar el proceso de pago.

A medida que los clientes comienzan a escribir su dirección, aparecen sugerencias basadas en su ubicación actual. Estas sugerencias a menudo son impulsadas por las API de Google Places y Google Maps.

autocompletado de direcciones

Al ayudar a los compradores a completar el pago rápidamente, puedes aumentar las ventas y fomentar la repetición de compras.

Para obtener más información, puedes consultar nuestra guía sobre cómo configurar el autocompletado para campos de dirección en WordPress.

Preguntas frecuentes: Población dinámica de campos en WordPress para autocompletar formularios

Ahora que sabes cómo configurar la población dinámica de campos en WordPress, repasemos algunas preguntas comunes que los usuarios tienen sobre cómo funciona.

¿Qué es la población dinámica de campos?

La población dinámica de campos es el proceso de completar automáticamente los campos de un formulario con información que ya tienes sobre tus usuarios. Estos podrían ser datos de su perfil de usuario o detalles pasados a través de una URL.

Agiliza la experiencia de completar formularios, haciéndola más rápida, más fácil de usar y ayuda a reducir el abandono de formularios.

¿Qué tan seguro es usar parámetros de URL para la población dinámica de campos?

El uso de parámetros de URL es generalmente seguro siempre y cuando tu sitio se ejecute a través de HTTPS, lo que cifra los datos en tránsito.

Dicho esto, siempre debes mantener tu sitio de WordPress y los plugins de formularios actualizados y seguir las prácticas de seguridad básicas para proteger la información sensible.

¿Puedo usar la población dinámica de campos con cualquier plugin de formularios?

Muchos plugins de formularios premium admiten la población dinámica de campos, incluido WPForms, que recomendamos por su facilidad de uso y flexibilidad.

Solo asegúrate de verificar la compatibilidad y la configuración con tu plugin específico. WPForms, que recomendamos, ofrece soporte y documentación extensos para implementar esta función.

¿Cuáles son los beneficios de la población dinámica de campos?

Esta función mejora la experiencia del usuario al ahorrar tiempo y minimizar la entrada repetitiva. Como resultado, es más probable que los usuarios completen tus formularios, lo que puede generar tasas de conversión más altas. Es especialmente útil para páginas de pago de comercio electrónico, formularios de captura de leads y registro de usuarios.

Esperamos que este artículo te haya ayudado a aprender cómo usar la población dinámica de campos en WordPress para autocompletar formularios. También puedes consultar nuestras guías sobre:

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

Descargo de responsabilidad: Nuestro contenido es compatible con el lector. Esto significa que si haces clic en algunos de nuestros enlaces, podemos ganar una comisión. Consulta cómo se financia WPBeginner, por qué es importante y cómo puedes apoyarnos. Aquí está nuestro proceso editorial.

El Kit de herramientas definitivo para WordPress

Obtén acceso GRATUITO a nuestro kit de herramientas: ¡una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Interacciones del lector

2 CommentsLeave a Reply

  1. ¡Hola, gran artículo!

    Me preguntaba si esto funcionaría con un código QR. En otras palabras, ¿puedo crear un código QR a partir de esta URL con todos los parámetros de los campos del formulario y, cuando se escanee, dirigirá al usuario a la página y rellenará todos los campos?

    Gracias.

Deja una respuesta

Gracias por elegir dejar un comentario. Ten en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de comentarios, y tu dirección de correo electrónico NO será publicada. Por favor, NO uses palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.