Auto rellenar formularios en WordPress

Una de las acciones más engorrosas y repetitivas para un alumno o miembro de un sitio de membresías es completar el formulario de contacto o soporte. Cada vez que tiene que ponerse en contacto con el propietario de la web, tiene que introducir los mismos datos una y otra vez.

No me refiero a las funciones de autocompletar que tú puedes configurar en tu navegador por defecto. Me refiero a los datos que recogió la membresía cuando te registraste por primera vez y que se utilizan para pagar, identificarte y saber un poco más de ti.

Así que si tienes un membership site, ¿De qué sirve recogerlos si no vuelves a utilizarlos? Ponte en el lugar de tu cliente. Eso es pensar en la experiencia de usuario.

4 formas de auto completar formularios en WordPress

Dependiendo de qué theme y qué plugin estés utilizando, posiblemente existan otras formas de hacerlo. Sin embargo, voy a explicarte aquí las soluciones más populares a día de hoy para pre-rellenar los formularios de contacto – o soporte – para los usuarios registrados en tu sitio web.

Contact form 7

Empezamos por el más sencillo y gratuito. Contact Form 7 tiene de forma nativa esta funcionalidad. Quizá, sea el más fácil de integrar ya que lo único que tienes que hacer es añadir un valor por defecto a cada campo de texto que incluyas en el formulario de tu web.

Por ejemplo, un formulario básico queda de la siguiente forma:

<label> Tu nombre (obligatorio)
    [text* your-name] </label>

<label> Tu correo electrónico (obligatorio)
    [email* your-email] </label>

<label> Asunto
    [text your-subject] </label>

<label> Tu mensaje
    [textarea your-message] </label>

[submit "Enviar"]

El mismo formulario, pero auto completando el nombre y el correo electrónico sería de la siguiente forma:

<label> Tu nombre (obligatorio)
    [text* your-name default:user_first_name] </label>

<label> Tu correo electrónico (obligatorio)
    [email* your-email default:user_email] </label>

<label> Asunto
    [text your-subject] </label>

<label> Tu mensaje
    [textarea your-message] </label>

[submit "Enviar"]

Fácil y rápido ¿verdad? Si no solucionas este problema en tu sitio de membresías es porque no quieres.

¿Qué otros datos de usuario puedes pre-rellenar en contact form 7? Pues aquí tienes una tabla completa como referencia:

Alternativamente, existe otra forma de “auto completar” los campos del formulario en Contact Form 7. Eso sería mediante el paso de variables – GET – a través de una URL.

Aunque no es un autocompletado en sentido estricto, sí que puede ser una solución interesante cuando el usuario registrado – o no – viene desde otra página en la que interactúa con enlaces o botones para luego pasarlo a una página que contiene un formulario.

Un ejemplo para ilustrarlo de forma sencilla:

Tenemos una página https://demo.es/servicios/ con dos botones: “soporte a medida” y “consultoría”. Cada uno de ellos enlaza respectivamente a las siguientes páginas https://demo.es/form/?your-subject=soporte y https://demo.es/form/?your-subject=consultoria

Sin profundizar demasiado, una variable es como un cajón que le das un nombre y es capaz de guardar valores – números, texto, etc -. Las variables pueden ser enviadas a través de una url – denominados método GET – como parametros para enviar los valores de ellas – o introducidos por el usuario en un formulario – a la misma página u otras diferentes que realizarán una operación con ellas.

Y luego en la página /form/ tenemos un formulario de contact form 7 con los siguientes campos:

<label> Tu nombre (obligatorio)
    [text* your-name] </label>

<label> Tu correo electrónico (obligatorio)
    [email* your-email] </label>

<label> Asunto
    [text your-subject default:get "Indicar un asunto"] </label>

<label> Tu mensaje
    [textarea your-message] </label>

[submit "Enviar"]

Si te fijas atentamente, en la url de uno de los botones lleva una variable llamada your-subject que es igual a “soporte” y la otra, “consultoria”.

Y por último existe una correspondencia con el campo del formulario que se llama igual que la variable: your-subject que va precedido por un default:get. Es precisamente esa instrucción, la que permite recoger la variable o parámetro de la url como valor por defecto en el campo que lleva su mismo nombre.

¿Y qué pasaría si llegas al formulario sin hacer clic en esos botones? Pues entonces, pondrá el texto: “Indicar un asunto”. Por lo tanto, debes entender que Contact Form 7 buscará el contenido del campo en ese orden: Si la página del formulario recibe la variable como parámetro, entonces introduce ese valor en el campo. Si no, el valor por defecto dentro del shortcode del campo de Contact Form.

Formularios en Elementor

Otra forma de auto completar formularios para usuarios registrados en WordPress es mediante los Elementor Forms. Una potente solución incorporada a finales de 2018 para trabajar con formularios de forma visual y sencilla. Obviamente, deberás tener Elementor Pro instalado en tu sitio WordPress.

Paso #1 Agregar el módulo de formulario en una página de Elementor.

Paso #2 Con el formulario por defecto, verás los campos situados a la izquierda donde puedes añadir, borrar o editar sus propiedades. Ahora, haz clic en el campo “nombre” y en la ventana emergente, haz clic en avanzado. Tal y como ilustra la siguiente imagen:

Paso #3 Trabajar con Etiquetas dinámicas de campos. Haz clic en ese icono. Entonces se abrirá un desplegable con todas las opciones posible con las que poder pre-rellenar un campo de formulario en Elementor. Aunque nos vamos a centrar en los datos del usuario porque es el objetivo del post, fíjate que puedes añadir un montón de datos de WordPress para rellenar el campo que tú quieras.

Paso #4 Seleccionamos “User Info” del desplegable.

Paso #5. Una vez seleccionado User info, aparecerá en “Default value” y justo al lado, podrás ver una llave inglesa que cuando hagas clic, verás los ajustes que te permitirán elegir qué valo del usuario de WordPress quieres asignar por defecto al campo Nombre.

Paso #6 Luego, tendrás que repetir el mismo proceso con el campo Email. Salvo que en los ajustes de User info, eligirás “Email” en vez de nombre.

Y listo. Ya tienes un formulario de contacto o soporte hecho con Elementor Pro que se pre-rellena con los datos del usuario registrado en tu sitio web. 🙂

WPForms

Trabajar el auto completado de formularios con WPForms también es realmente sencillo. Te lo explico a continuación:

Paso #1 Crear un nuevo formulario. Le damos un nombre, seleccionamos plantilla en blanco y luego hacemos clic en guardar.

Paso #2 Debes ir a Ajustes generales del formulario y activar un Checkbox que dice “Activar Completado dinámico de campos”.

Paso #3 Agregamos dos campos nuevos al formulario: un campo de texto y otro de email. Importante: no utilizar el campo “nombre” ya que no tiene esta capacidad. Seleccionamos el campo nombre haciendo clic sobre él y vamos a Opciones Avanzadas > Valor por defecto:

Paso #4 Se abre un desplegable donde puedes elegir entre múltiples opciones. La que nos interesa es “Nombre del usuario”. Al seleccionarla, se cerrará el desplegable y el valor por defecto quedará como en la siguiente imagen:

Paso #5 Le damos a guardar y continuamos repitiendo el proceso pero esta vez, con el campo Email. Donde seleccionaremos “Correo electrónico del usuario” y debería quedar de la siguiente forma:

Guardamos el formulario y ¡ya lo tenemos! ¿Verdad que es realmente sencillo configurar autocompletar los campos con WPForms? De ahí que sea uno de nuestros plugins favoritos (:

Gravity Forms

Por último, realizaremos el mismo proceso con uno de los plugins más populares – de pago – para crear formularios potentes en WordPress: Gravity Forms. Personalmente es el que más rápido logra realizar este proceso de prellenado de campos aunque también tiene el mismo problema que WPForms, ya que no podemos utilizar el campo específico de nombre sino el de “Linea de texto”. ¡Vamos a ello!

Paso #1 Creamos el formulario.

Paso #2 Añadimos dos campos al formulario: linea de texto (Campo estándar) e Email (Campos avanzados).

Paso #3 Hacemos clic en el campo sin nombre y le cambiamos la etiqueta de campo por “Nombre” para identificarlo fácilmente. En la pestaña Avanzado, en “Valor por defecto” hay un icono a la derecha del campo. Hacemos clic y desplegamos las posibles opciones. Seleccionamos “Nombre de usuario” y debería quedar tal que así:

También podrías elegir “Nombre para mostrar”. Pero debes saber que, en ninguno de los dos casos, corresponde al nombre o apellidos del perfil. El “nombre para mostrar” corresponde al Alias de usuario. Aún teniendo esta limitación, es una buena opción para identificar al usuario directamente.

Paso #4 Repetir el proceso con el campo de email pero seleccionando esta vez “Email del usuario”. Guardamos el formulario y ya tendríamos los campos prellenados.

Como has podido ver, esto solo es la punta del icebergs de las muchas cosas que se pueden hacer con un formulario, sea cual sea el plugin, dentro de WordPress. Déjanos algún comentario aquí abajo si tienes alguna duda o te gustaría que hiciésemos contenidos similares para sacarle todo el jugo a los formulario a los formularios de tu web 😉

(4 votos, promedio: 5,00 de 5)