Cómo mostrar un mensaje personalizado fuera de WPForms

Introducción

¿Te interesa mostrar un mensaje personalizado fuera de WPForms? Puedes lograrlo utilizando JavaScript, ¡y estamos aquí para guiarte en el proceso!

En este tutorial, te guiaremos a través del proceso de añadir un mensaje personalizado a tu página. Este mensaje mostrará dinámicamente los valores de los campos del formulario fuera de WPForms, permitiéndote integrar y mostrar sin problemas los datos introducidos por el usuario en tu página. ¡Empecemos!

Sumérgete y aprende cómo añadir valores a tu página de manera efectiva.

Creación de tu página de redirección

La sección inicial de nuestra página presentará un mensaje personalizado que consta de tres etiquetas span HTML vacías. Una etiqueta span HTML es un elemento HTML en línea, no semántico, que se utiliza para incrustar contenido en línea dentro de nuestra página.

En los siguientes pasos, nuestro formulario transmitirá tanto el nombre como los apellidos, así como la selección de intereses del usuario, a través de una cadena de consulta que construiremos más adelante.

Una cadena de consulta es una parte integral de una URL que contiene datos o parámetros utilizados para la comunicación con un servidor web, facilitando la recuperación de información. Se sitúa después del signo de interrogación (?) en una URL y está compuesta por pares clave-valor separados por ampersands (&). Para una guía completa sobre el uso de los valores de los campos del formulario dentro de una cadena de consulta, puedes consultar esta documentación, que proporciona un desglose detallado para cada campo del formulario.

Para iniciar la creación de estas etiquetas span vacías, comenzaremos incorporando un bloque de HTML personalizado en nuestra página. Este párrafo introductorio residirá dentro de este bloque, ya que requiere la inclusión de HTML puro para las etiquetas span.

Para añadir un bloque de HTML personalizado a tu página de WordPress, simplemente haz clic en el signo más (+), busca HTML personalizado y selecciona el bloque para insertarlo en tu página.

A continuación, copia este HTML y añádelo a tu bloque de HTML en la página.

<p>Thanks <span id="firstName"></span> <span id="lastName"></span> 
for your interest in <span id="interest"></span>! 
Someone will be in touch with you soon!</p>

Creación del formulario

Ahora, vamos a crear nuestro formulario y añadir los campos necesarios. Si necesitas ayuda durante este proceso de creación del formulario, asegúrate de consultar esta útil guía con instrucciones paso a paso.

En este tutorial, lo mantendremos sencillo creando un formulario de contacto básico. Su objetivo principal es permitir a nuestros usuarios compartir sus intereses con nosotros, lo que nos permitirá enviarles un boletín más personalizado cada mes. Para lograr esto, recopilaremos su nombre, dirección de correo electrónico y sus intereses utilizando un campo de Desplegable. Además, proporcionamos una sección de comentarios para cualquier mensaje adicional que deseen transmitir.

Personalización de la URL de redirección

En nuestro próximo paso, adaptaremos la URL de redirección a nuestras necesidades. Después de crear tu formulario y añadir los campos necesarios, dirígete a la configuración del constructor de formularios y luego selecciona Confirmaciones.

Dentro del menú desplegable Tipo de confirmación, elige “Ir a URL (Redirección)”. En el campo URL de redirección de confirmación, introduce la URL de la página de agradecimiento que estableciste en el paso inicial. Para esta ilustración, nuestra URL es https://myexamplesite.com/thanks.

Para poblar nuestra página con el nombre e intereses recopilados del formulario, extenderemos esta URL añadiendo una cadena de consulta. Esta cadena de consulta incluirá los IDs de los spans que introdujimos y los asignará a campos específicos de nuestro formulario. En consecuencia, nuestra URL completa aparecerá como https://myexamplesite.com/thanks?firstName={field_id="0|first"}&lastName={field_id="0|last"}&interest={field_id="16"}.

Vamos a desglosar esta cadena de consulta para mayor claridad. Dado que nuestro formulario recopila tanto el nombre como los apellidos, debemos segregar estos valores para asegurar que se transmitan correctamente dentro de la URL. El ID del campo para nuestro campo de Nombre es 0, pero dado que estamos recopilando el nombre y los apellidos en este campo, nuestra cadena de consulta incluirá estos usando una barra vertical (|) seguida de first o last, dependiendo de cuál estemos llamando. Así que puedes ver en la cadena que estamos llamando {field_id="0|first"} y asignándolo al ID del span firstName y el {field_id="0|last"} se asigna al span lastName.

La selección del menú desplegable Interés se está pasando usando el {field_id="16"} y se asignará al span interest.

Añadir el fragmento

Ahora, integremos el fragmento en nuestra configuración. Si no estás seguro sobre el proceso de añadir fragmentos a tu sitio, puedes consultar esta guía completa para obtener instrucciones detalladas.

En este tutorial, hemos empleado el plugin WPCode para manejar nuestro fragmento.

Para empezar, crea un nuevo fragmento personalizado. Dale un nombre adecuado. En el menú desplegable Tipo de código, selecciona Fragmento de JavaScript. Para el menú desplegable Ubicación, puedes optar por Pie de página de todo el sitio. Esto asegurará que nuestro fragmento de JavaScript se coloque y ejecute adecuadamente en tu sitio después de que la página haya terminado de cargarse.

/**
 * Display personalized message outside of the form using form submitted data.
 *
 * @link https://wpforms.com/developers/how-to-display-personalized-message-outside-wpforms/
 */

// Function to get URL query parameters
        function getQueryParameters() {
            var queryParams = {};
            var queryString = window.location.search.slice(1);
            var queryVars = queryString.split('&');

            for (var i = 0; i < queryVars.length; i++) {
                var pair = queryVars[i].split('=');
                var key = decodeURIComponent(pair[0]);
                var value = decodeURIComponent(pair[1]);
                queryParams[key] = value;
            }

            return queryParams;
        }

        // Get query parameters
        var params = getQueryParameters();

        // Populate spans with query parameter values
	    if (params.hasOwnProperty('firstName')) {
            document.getElementById('firstName').textContent = params['firstName'];
        }

        if (params.hasOwnProperty('lastName')) {
            document.getElementById('lastName').textContent = params['lastName'];
        }
        if (params.hasOwnProperty('interest')) {
            document.getElementById('interest').textContent = params['interest'];
        }
	

Como puede observar, estamos diseccionando la URL, desglosándola meticulosamente para extraer los valores de la cadena de consulta. Posteriormente, utilizamos la propiedad textContent para asignar con precisión estos parámetros a los IDs de span correspondientes en nuestra página de Gracias.

¡Y ahí lo tiene! A partir de este momento, cada vez que un visitante complete nuestro formulario de contacto, será recibido con un mensaje personalizado que incluirá su nombre e intereses en la página de Gracias redirigida. ¡Así de simple! 🎉

¿Le gustaría autocompletar otro formulario con cadenas de consulta? Eche un vistazo a nuestro tutorial sobre Cómo usar cadenas de consulta para pre-rellenar campos de formulario desde otro formulario.