Cómo usar cadenas de consulta para pre-rellenar campos de formulario desde otro formulario

¿Quieres optimizar la experiencia de rellenar formularios de tus usuarios en WordPress? Autocompletar campos de formulario con información de un formulario anterior puede mejorar la experiencia del usuario y garantizar la precisión de los datos. Este tutorial te guiará a través del proceso de pasar información entre formularios utilizando cadenas de consulta pre-rellenadas.

Antes de entrar en los pasos para lograr esto, profundicemos un poco sobre las cadenas de consulta y ¡por qué son geniales!

¿Qué son las cadenas de consulta?

Piensa en las cadenas de consulta como mensajeros útiles entre diferentes partes de tu sitio web. Son fragmentos de información que se añaden al final de una URL, ayudando a las páginas web a comunicarse entre sí. Normalmente las verás después de un signo de interrogación en una dirección web, seguido de pares clave-valor separados por ampersands.

¿Cómo funcionan?

Imagina que estás rellenando un formulario en un sitio web. Cuando pulsas Enviar, el formulario envía tus datos al servidor del sitio web. Pero, ¿qué pasa si quieres pasar esos datos a otro formulario o página sin que los usuarios tengan que rellenarlo de nuevo? Ahí es donde entran las cadenas de consulta.

Al añadir cadenas de consulta a la URL de redirección después del envío del formulario, esencialmente estás diciendo: ¡Eh, aquí tienes información del primer formulario. Úsala para pre-rellenar campos en el siguiente! Es como dejar un rastro de migas de pan para que tu sitio web lo siga.

¿Por qué son beneficiosas?

1. Ahorra tiempo: A los usuarios les encanta la comodidad. Las cadenas de consulta les ahorran la molestia de volver a escribir información que ya han proporcionado.
2. Precisión: ¿Alguna vez has cometido un error tipográfico al rellenar un formulario? Con las cadenas de consulta, extraes datos directamente del primer formulario, lo que reduce la posibilidad de errores.
3. Mayores conversiones: Al optimizar el proceso de rellenado de formularios, facilitas que los usuarios completen acciones en tu sitio, lo que conduce a tasas de conversión más altas.
4. Experiencia fluida: Todo se trata de una navegación sin problemas para tus usuarios. El autocompletado de formularios crea un viaje fluido a través de tu sitio web, mejorando la experiencia del usuario.

En resumen, las cadenas de consulta son como hilos mágicos que conectan diferentes partes de tu sitio web. Pasan información entre formularios, facilitando la vida tanto a ti como a tus usuarios. ¡Con menos escritura y más automatización, todos ganan!

Dicho esto, ¡vamos a ello!

Uso de las cadenas de consulta

Comenzaremos creando dos formularios separados. Si necesitas ayuda para crear formularios, consulta esta documentación.

1) Creación del formulario de la página de inicio

Primero, crea tu primer formulario y añade todos los campos que necesites a este formulario.

Haz clic en Guardar por ahora, ya que volveremos a este formulario más tarde.

2) Creación de un formulario adicional

En este paso, vamos a crear otro formulario que recibirá la información pre-rellenada. Añade todos los campos necesarios, asegurándote de que se alinean con la información que deseas pre-rellenar.

A continuación, navega a la pestaña Ajustes » General y haz clic en la flecha desplegable para entrar en las opciones Avanzadas. Aquí, puedes activar el botón para Habilitar autocompletar por URL.

3) Configuración de la redirección al enviar el formulario

Ahora es el momento de unirlo todo. Vamos a editar el formulario que creamos en el primer paso, el formulario de la página de inicio. En el constructor de formularios, ve a Ajustes » Confirmaciones.

Una vez aquí, cambia el Tipo de confirmación a Ir a URL (Redirección) y en el campo URL de redirección de confirmación, copia y pega esta URL.

http://example.com/quote/?wpf1036_1={field_id="1"}&wpf1036_2={field_id="2"}

Con la URL anterior, habrá algunas cosas que necesitarás cambiar. Por ejemplo:

1. Reemplaza ejemplo.com con tu propio dominio.
2. Reemplaza la palabra presupuesto con el nombre de tu página.
3. Ajusta wpf1036_1 y wpf1036_2 para que coincidan con el ID del formulario de destino y los IDs de campo respectivos.
4. Actualiza {field_id="1"} con el ID del campo del formulario de la página de inicio para el campo Nombre.

Si necesitas ayuda para encontrar los números de ID de tus campos específicos, mira este tutorial.

Una vez que hayas añadido eso a tu URL de redirección de confirmación, haz clic en Guardar en el formulario.

Ahora, cuando los usuarios vean el formulario de la página de inicio, podrán introducir su nombre y dirección de correo electrónico, y cuando hagan clic en el botón Enviar , la página se redirigirá a otro formulario que pre-rellenará automáticamente los campos Nombre y Dirección de correo electrónico con la información recopilada del formulario de tu página de inicio.

Y eso es todo lo que necesitas para usar una cadena de consulta para pre-rellenar los campos de tu formulario. ¿Te gustaría ver con qué otros campos puedes usar esto? Echa un vistazo a nuestra documentación sobre Cómo habilitar la configuración de autocompletar por URL en WPForms.

Preguntas frecuentes

P: ¿Por qué no se pre-rellena el siguiente formulario?

R: Si notas que tus campos no se pre-rellenan, por favor, comprueba que en tu segundo formulario has habilitado la configuración.

Abre el constructor de formularios del segundo formulario y ve a la pestaña Ajustes » General. Luego haz clic en el desplegable Avanzado hacia la parte inferior de tu pantalla y activa el botón para Habilitar autocompletar por URL.

P: ¿Qué hago si estoy usando nombre y apellido para mi campo de nombre?

R: Si no estás usando el formato Simple para tu nombre, simplemente listarías tu campo de nombre en la URL de esta manera.

http://my-example-site.com/quote/?wpf1036_1_first={field_id="1|first"}&wpf1036_1_last={field_id="1|last"}&wpf1036_2={field_id="2"}

Lo mismo se puede decir para el campo de Dirección. Tu formato para desglosar la dirección aparecería así.

&wpf1036_3_address1={field_id="3|address1"}&wpf1036_3_address2={field_id="3|address2"}&wpf1036_3_city={field_id="3|city"}&wpf1036_3_state={field_id="3|state"}&wpf1036_3_postal={field_id="3|postal"}