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. Rellena automáticamente los campos del formulario utilizando la información que ya tienes, como el nombre de un visitante de su perfil o datos pasados a través de un enlace.

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.

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.

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

La población dinámica de campos te permite rellenar automáticamente los campos del formulario basándose en las elecciones del usuario, la página específica que está viendo, los enlaces que hizo clic (cadenas de consulta) o la información de su perfil de inicio de sesión.

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

Primero, vamos al sitio web de WPForms y creamos una cuenta. Simplemente haz clic en ‘Obtener WPForms ahora’, elige el plan que deseas y finaliza el registro.

Una vez que te hayas registrado, accederás a tu página de cuenta de WPForms. Aquí es donde puedes descargar el plugin y obtener tu clave de licencia. Querrás mantener esta pestaña abierta para el siguiente paso.

Ahora agreguemos WPForms a tu sitio.

Ve a tu panel de WordPress, haz clic en Plugins » Añadir nuevo plugin.

En la siguiente pantalla, busca “WPForms”.

Cuando aparezca, haz clic en Instalar ahora, luego en Activar para habilitarlo correctamente.

Después de eso, ve a WPForms » Ajustes.

Pega tu clave de licencia en el cuadro, haz clic en ‘Verificar clave’.

WPForms ya está configurado y listo. Desde aquí, puedes empezar a crear tu formulario de WordPress y configurar el llenado dinámico de campos para autocompletar tus campos.

Para hacer esto, visita WPForms » Añadir 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.

Para este tutorial, sin embargo, usaremos una plantilla.

WPForms viene con más de 2,000 plantillas para elegir. Para reducir las opciones, puedes usar la barra de búsqueda y escribir "pedido".

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

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 un nuevo campo de formulario que liste automáticamente opciones del contenido de tu sitio web (como productos o publicaciones).

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.

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

Simplemente cambia al menú Avanzado desde la columna izquierda.

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

Si deseas completar automáticamente el nombre o correo electrónico de un usuario cuando haya iniciado sesión, simplemente agrega un campo de 'Texto de una sola línea', edita la etiqueta y abre Avanzado » Valor predeterminado.

En la pestaña, puedes elegir {Nombre_del_Usuario} o {Correo_electrónico_del_usuario_conectado} de la lista de 'Etiquetas inteligentes'.

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.

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.

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.

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

WPForms también te permite llenar dinámicamente los campos del formulario usando parámetros de URL.

Esta función te permite crear enlaces inteligentes que pasan automáticamente información al formulario. Esto es perfecto para boletines por correo electrónico, donde puedes autocompletar un campo según el enlace en el que hizo clic el suscriptor.

Primero, necesitas crear un formulario nuevo o editar uno existente en WPForms. Para más detalles, consulta nuestra guía sobre cómo crear un formulario de contacto en WordPress.

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

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

Analicemos el código oculto en este enlace:

• ? – El signo de interrogación le dice al navegador que el enlace real ha terminado y que los “datos especiales” están comenzando.
• wpf – Este prefijo le dice a WordPress que los datos pertenecen a WPForms.
• 15 – Este es el número de ID específico del formulario al que te diriges.
• _1 – Este es el número de ID del campo específico que deseas completar.
• =valor – Todo lo que sigue al signo igual es el dato que aparecerá en el campo del formulario.

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

https://example.com/contact/?wpf15_2=Vintage%20Flower%20Vase

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.

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.

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

Simplemente agrega el identificador de subcampo después del ID del campo en tu URL, así:

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.

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.

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.

Más guías para mejorar formularios de WordPress

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:

• Los mejores creadores de formularios en línea
• Cómo estilizar y personalizar tus formularios de WordPress
• Cómo crear formularios AMP en WordPress
• Cómo crear formularios multilingües en WordPress
• Cómo Crear Formularios Conversacionales en WordPress
• Cómo rastrear el recorrido del usuario en formularios de clientes potenciales de WordPress
• Consejos para crear formularios más interactivos en WordPress y aumentar las conversiones
• La guía definitiva para usar formularios de WordPress

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.