Come visualizzare un messaggio personalizzato al di fuori di WPForms

Introduzione

Sei interessato a visualizzare un messaggio personalizzato al di fuori di WPForms? Puoi ottenerlo sfruttando JavaScript e noi siamo qui per guidarti attraverso il processo!

In questo tutorial, ti guideremo attraverso il processo di aggiunta di un messaggio personalizzato alla tua pagina. Questo messaggio visualizzerà dinamicamente i valori dei campi del modulo al di fuori di WPForms, permettendoti di integrare e mostrare senza problemi i dati inseriti dall'utente sulla tua pagina. Iniziamo!

Immergiamoci e impariamo come aggiungere efficacemente valori alla tua pagina.

Creazione della tua pagina di reindirizzamento

La sezione iniziale della nostra pagina presenterà un messaggio personalizzato composto da tre elementi span HTML vuoti. Uno span HTML è un elemento HTML inline, non semantico, utilizzato per incorporare contenuti inline all'interno della nostra pagina.

Nei passaggi successivi, il nostro modulo trasmetterà sia il nome che il cognome, nonché la selezione degli interessi dell'utente, tramite una stringa di query che costruiremo in seguito.

Una stringa di query è una parte integrante di un URL che contiene dati o parametri utilizzati per la comunicazione con un server web, facilitando il recupero di informazioni. Si trova dopo il punto interrogativo (?) in un URL ed è composta da coppie chiave-valore separate da e commerciale (&). Per una guida completa sull'utilizzo dei valori dei campi del modulo all'interno di una stringa di query, puoi fare riferimento a questa documentazione, che fornisce un'analisi dettagliata per ogni campo del modulo.

Per iniziare la creazione di questi span vuoti, inizieremo incorporando un blocco HTML personalizzato sulla nostra pagina. Questo paragrafo introduttivo risiederà all'interno di questo blocco poiché richiede l'inclusione di puro HTML per gli span.

Per aggiungere un blocco HTML personalizzato alla tua pagina WordPress, fai semplicemente clic sul segno più (+), cerca HTML personalizzato e seleziona il blocco per inserirlo nella tua pagina.

Successivamente, copia questo HTML e aggiungilo al tuo blocco HTML sulla pagina.

<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>

Creazione del modulo

Ora, creiamo il nostro modulo e aggiungiamo i campi necessari. Se hai bisogno di assistenza durante questo processo di creazione del modulo, assicurati di consultare questa utile guida per istruzioni passo passo.

In questo tutorial, manteniamo le cose semplici creando un modulo di contatto di base. Il suo obiettivo principale è consentire ai nostri utenti di condividere i loro interessi con noi, permettendoci di inviare loro una newsletter più personalizzata ogni mese. Per raggiungere questo obiettivo, raccoglieremo il loro nome, indirizzo email e i loro interessi utilizzando un campo a discesa . Inoltre, forniamo una sezione commenti per eventuali messaggi aggiuntivi che desiderano comunicare.

Personalizzazione dell'URL di reindirizzamento

Nel nostro prossimo passaggio, personalizzeremo l'URL di reindirizzamento in base alle nostre esigenze. Dopo aver creato il tuo modulo e aggiunto i campi necessari, vai alle Impostazioni del generatore di moduli e quindi seleziona Conferme.

Nel menu a discesa Tipo di conferma, scegli "Vai all'URL (Reindirizzamento)". Nel campo URL di reindirizzamento della conferma, inserisci l'URL della pagina di ringraziamento che hai stabilito nel passaggio iniziale. Per questa illustrazione, il nostro URL è https://myexamplesite.com/thanks.

Per popolare la nostra pagina con il nome e gli interessi raccolti dal modulo, estenderemo questo URL aggiungendo una stringa di query. Questa stringa di query includerà gli ID degli span che abbiamo introdotto e li assegnerà a specifici campi del modulo. Di conseguenza, il nostro URL completo apparirà come https://myexamplesite.com/thanks?firstName={field_id="0|first"}&lastName={field_id="0|last"}&interest={field_id="16"}.

Analizziamo questa stringa di query per chiarezza. Dato che il nostro modulo raccoglie sia il nome che il cognome, dobbiamo separare questi valori per garantire che vengano trasmessi correttamente all'interno dell'URL. L'ID del campo per il nostro campo Nome è 0, ma poiché stiamo raccogliendo il nome e il cognome in questo campo, la nostra stringa di query includerà questi usando una barra verticale (|) seguita da first o last, a seconda di quale stiamo chiamando. Quindi puoi vedere nella stringa che stiamo chiamando {field_id="0|first"} e assegnandolo all'ID dello span firstName e il {field_id="0|last"} è assegnato allo span lastName.

La selezione a discesa Interesse viene passata utilizzando {field_id="16"} e verrà assegnata allo span interest.

Aggiunta dello snippet

Ora, integriamo lo snippet nella nostra configurazione. Se non sei sicuro del processo di aggiunta di snippet al tuo sito, puoi consultare questa guida completa per istruzioni dettagliate.

In questo tutorial, abbiamo utilizzato il plugin WPCode per gestire il nostro snippet.

Per iniziare, crea un nuovo snippet personalizzato. Dagli un nome appropriato. Nel menu a discesa Tipo di codice, seleziona Snippet JavaScript. Per il menu a discesa Posizione, puoi scegliere Piè di pagina dell'intero sito. Ciò garantirà che il nostro snippet JavaScript sia posizionato ed eseguito correttamente sul tuo sito dopo che la pagina è stata caricata.

/**
 * 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'];
        }
	

Come puoi osservare, stiamo analizzando l'URL, scomponendolo meticolosamente per estrarre i valori della stringa di query. Successivamente, utilizziamo la proprietà textContent per allocare precisamente questi parametri agli ID span corrispondenti nella nostra pagina di Ringraziamento.

Ed ecco fatto! Da questo momento in poi, ogni volta che un visitatore compilerà il nostro modulo di contatto, sarà accolto da un messaggio personalizzato con il suo nome e i suoi interessi nella pagina di Ringraziamento reindirizzata. È semplicissimo! 🎉

Vuoi precompilare automaticamente un altro modulo con le stringhe di query? Dai un'occhiata al nostro tutorial su Come usare le stringhe di query per precompilare i campi del modulo da un altro modulo.