Resumen de IA
¿Te gustaría autocompletar un campo de texto para un usuario basándote en el enlace que haga clic? Los enlaces se pueden configurar para enviar información a un campo, de modo que el usuario pueda ahorrar un paso al rellenar tu formulario.
Este tutorial te mostrará cómo aprovechar las cadenas de consulta para autocompletar un campo en un formulario.
En este artículo
Nota: ¿Buscas crear cadenas de consulta más avanzadas para WPForms? Consulta nuestro tutorial sobre activar el autocompletado por URL para obtener más información sobre cómo crear cadenas de consulta. Si deseas pre-rellenar campos de formulario con información extraída de otro formulario, consulta nuestro artículo sobre pre-rellenar formularios con cadenas de consulta.
¿Qué es una cadena de consulta?
Una cadena de consulta es una parte de una URL que entrega o recupera información. En algunos sitios, por ejemplo, las cadenas de consulta se utilizan para realizar búsquedas de publicaciones o productos.
Si alguna vez has notado una URL con un signo de interrogación en medio, has visto una cadena de consulta en acción. Una URL con una cadena de consulta se verá algo así:
http://example.com/plugin?name=wpforms
En este ejemplo, te mostraremos cómo usar una cadena de consulta para insertar una palabra o frase específica en un campo del formulario.
Para ello, crearemos un enlace especial en el que los usuarios podrán hacer clic si desean obtener más información sobre "Eventos y Fiestas". La URL de ese enlace llevará al usuario a nuestro formulario "Solicitar más información". La cadena de consulta que crearemos autocompletará nuestro campo "Me gustaría saber más sobre:" con "Eventos y Fiestas".
Nota: ¿Buscas autocompletar la fecha de hoy, o el nombre y correo electrónico de un usuario conectado? Usar Etiquetas inteligentes en WPForms es una excelente manera de lograr esto.
Crear un Formulario Nuevo
Antes de empezar, primero deberás asegurarte de que WPForms está instalado y activado en tu sitio de WordPress y que has verificado tu licencia. Luego, puedes crear un nuevo formulario o editar uno existente para acceder al constructor de formularios.
Si estás creando un nuevo formulario, deberás proporcionarle un título y elegir una plantilla. Aquí usaremos la plantilla Formulario de contacto simple.
Para este ejemplo, crearemos un enlace que autocompletará un campo de Texto de línea única en nuestro formulario. Para añadir este campo a tu formulario, haz clic en él o arrástralo y suéltalo en el área de vista previa.
Añadir una etiqueta inteligente de variable de cadena de consulta
A continuación, necesitamos configurar el valor predeterminado para el campo de Texto de línea única (al que hemos renombrado como "Me gustaría saber más sobre") para que esté listo para aceptar información de una cadena de consulta.
Para hacer esto, haz clic en el campo para abrir la pantalla de Opciones del campo. Desde aquí, deberás abrir la pestaña Avanzado, desplazarte hasta el cuadro etiquetado como Valor predeterminado y luego hacer clic en Mostrar etiquetas inteligentes.
En la lista desplegable, selecciona la opción llamada Variable de cadena de consulta.
Una vez que hayas hecho esta selección, notarás que se ha añadido {query_var key=""} al cuadro Valor predeterminado. Entre esas comillas vacías, necesitas añadir un nombre (llamado clave) para representar este campo. Esta clave se usará más adelante en nuestra cadena de consulta.
Daremos a nuestro campo una clave llamada “contact-reason”. Es importante tener en cuenta que el nombre que utilices para esta clave será visible en la URL que configuremos más adelante, por lo que el nombre debe ser lógico para el propósito de la clave. Además, asegúrate de que tu clave no incluya espacios; en su lugar, reemplaza los espacios con un guion “-” o un guion bajo “_”.
Publicar tu formulario
Ahora que has configurado el formulario, puedes volver a tu panel de WordPress. Luego, puedes crear una nueva página o editar una existente para publicar el formulario que acabas de crear.
Para publicar tu formulario, primero haz clic en el botón + (más) para añadir un nuevo bloque.
Para localizar el bloque WPForms, puedes buscar “WPForms” o abrir la categoría Widgets. Luego, haz clic en el bloque llamado WPForms.
Esto añadirá el bloque WPForms a la pantalla del editor. A continuación, incrusta tu formulario seleccionándolo en el menú desplegable Seleccionar un formulario.
Ahora que tu formulario está incrustado en la página, puedes publicarlo y visitarlo en el frontend de tu sitio.
Crear un enlace con una cadena de consulta
A continuación, necesitarás crear otra página nueva o editar una existente donde podamos añadir un enlace a este formulario.
En este ejemplo, nuestro formulario está en nuestra página de contacto, por lo que un enlace estándar se vería algo así: https://example.com/contact.
En la nueva página, añadiremos algo de texto y enlazaremos nuestro texto “Eventos y Fiestas” a la página donde se encuentra nuestro formulario (https://example.com/contact).
Ahora mismo, ese enlace simplemente abrirá la página de Contacto. A continuación, modificaremos este enlace para que contenga una cadena de consulta. Este enlace modificado no solo abrirá la página de contacto, sino que pasará una cadena de consulta que rellenará automáticamente el campo de Texto de Línea Única en nuestro formulario:
https://example.com/contact?contact-reason=EventsandParties
Así es como construimos este nuevo enlace, en orden de sus componentes:
- El enlace normal (https://example.com/contact)
- Un signo de interrogación
- La clave que designaste anteriormente (en este ejemplo, contact-reason)
- Un signo igual
- El texto que deseas que se rellene automáticamente
Al hacer clic en este enlace, nuestro cuadro de Texto de Línea Única se rellenará automáticamente con cualquier texto que aparezca después del signo igual. En este caso, el enlace anterior pondrá “EventsandParties” en ese campo:
Para añadir espacios al texto que aparece en este campo, simplemente coloca %20 donde quieras que aparezca un espacio. Por ejemplo, el código https://example.com/contact?contact-reason=Events%20and%20Parties añadirá un espacio al texto de autocompletado resultante, que se lee “Events and Parties”:
Nota: ¿Deseas rellenar automáticamente dos o más campos con tu cadena de consulta? Simplemente asegúrate de añadir un símbolo “&” (ampersand) antes de incluir una clave y un texto adicionales.
Por ejemplo: https://example.com/contact?contact-reason=Events%20and%20Parties&second-field=OtherValue
Para poder utilizar otros símbolos, por ejemplo “(“, “)”, o “@”, necesitarás usar una herramienta como Codificar/Decodificar URL, para convertir estos símbolos a sus códigos correspondientes.
¡Eso es todo! Esperamos que este tutorial te haya ayudado a configurar enlaces con cadenas de consulta que rellenarán automáticamente un campo de texto en un formulario.
A continuación, ¿te gustaría rellenar campos dinámicamente con el contenido de tu sitio? Asegúrate de consultar nuestra guía sobre opciones de campos dinámicos para obtener todos los detalles.