Cómo mostrar un mensaje personalizado fuera de WPForms

Introducción

¿Está interesado en mostrar un mensaje personalizado fuera de WPForms? Puede lograrlo aprovechando JavaScript, ¡y estamos aquí para guiarle en el proceso!

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

Sumerjámonos de lleno y aprendamos a añadir valores a su página de forma eficaz.

Creación de la página de redireccionamiento

La sección inicial de nuestra página incluirá un mensaje personalizado compuesto por tres espacios HTML vacíos. Un HTML span es un elemento HTML en línea, no semántico, empleado para incrustar contenido en línea dentro de nuestra página.

En los pasos siguientes, nuestro formulario transmitirá tanto el nombre como el apellido, 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 integrante 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 se compone de pares clave-valor separados por ampersands (&). Para obtener una guía completa sobre el uso de los valores de los campos de formulario dentro de una cadena de consulta, puede consultar esta documentación, que ofrece un desglose detallado para cada campo de formulario.

Para iniciar la creación de estos espacios vacíos, comenzaremos incorporando un bloque 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 los espacios.

Para añadir un bloque HTML personalizado a su página de WordPress, simplemente haga clic en el signo más (+), busque HTML personalizado y seleccione el bloque para insertarlo en su página.

A continuación, copie este código HTML y añádalo al bloque HTML de 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 el proceso de creación del formulario, consulta esta práctica guía con instrucciones paso a paso.

En este tutorial, vamos a mantenerlo sencillo mediante la elaboración de un formulario de contacto básico. Su objetivo principal es permitir que nuestros usuarios compartan sus intereses con nosotros, lo que nos permitirá enviarles un boletín más personalizado cada mes. Para ello, recogeremos su nombre, dirección de correo electrónico y sus intereses mediante un campo desplegable. Además, ofreceremos una sección de comentarios para cualquier mensaje adicional que deseen transmitir.

Personalización de la URL de redireccionamiento

En el siguiente 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 selecciona Confirmaciones.

En el menú desplegable Tipo de confirmación, elija "Ir a URL (Redirigir)". En el campo URL de redirección de confirmación, introduzca la URL de la página de agradecimiento que estableció en el paso inicial. Para esta ilustración, nuestra URL es https://myexamplesite.com/thanks.

Para rellenar nuestra página con el nombre y los intereses recogidos en el formulario, ampliaremos esta URL añadiendo una cadena de consulta. Esta cadena de consulta incluirá los ID de los espacios que hemos introducido 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"}.

Descompongamos esta cadena de consulta para mayor claridad. Dado que nuestro formulario recoge tanto el nombre como los apellidos, debemos separar estos valores para asegurarnos de que se transmiten correctamente dentro de la URL. El ID de campo de nuestro Nombre campo es 0pero como estamos recopilando el nombre y los apellidos en este campo, nuestra cadena de consulta los incluirá utilizando una tubería (|) seguida de primero o últimodependiendo de cuál estemos llamando. Así que puedes ver en la cadena que estamos llamando a {field_id="0|first"} y asignándolo a span ID de firstName y el {field_id="0|last"} se asigna al lastName span.

En Interés la selección desplegable se pasa utilizando el método {field_id="16"} y se asignará al interest span.

Añadir el fragmento

Ahora, vamos a integrar el snippet en nuestra configuración. Si no estás seguro del proceso de añadir snippets a tu sitio, puedes consultar esta completa guía para obtener instrucciones detalladas.

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

Para empezar, cree un nuevo fragmento personalizado. Dele un nombre adecuado. En el menú desplegable Tipo de código, seleccione Fragmento JavaScript. En el menú desplegable Ubicación, puede optar por Pie de página de todo el sitio. Esto garantizará que nuestro fragmento de JavaScript se coloque y ejecute adecuadamente en su sitio una vez 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, descomponiéndola meticulosamente para extraer los valores de la cadena de consulta. A continuación, utilizamos el método textContent para asignar con precisión estos parámetros a los ID de tramo correspondientes en nuestro Gracias página.

Y ya está. A partir de ahora, cada vez que un visitante rellene nuestro formulario de contacto, recibirá un mensaje personalizado con su nombre e intereses en la página de agradecimiento redirigida. ¡Así de sencillo! 🎉

¿Le gustaría rellenar automáticamente otro formulario con cadenas de consulta? Eche un vistazo a nuestro tutorial sobre Cómo utilizar cadenas de consulta para rellenar previamente campos de formulario desde otro formulario.