Come visualizzare un messaggio personalizzato al di fuori di WPForms

Introduzione

Siete interessati a visualizzare un messaggio personalizzato al di fuori di WPForms? È possibile farlo sfruttando JavaScript e noi siamo qui per guidarvi in questo processo!

In questo tutorial vi guideremo attraverso il processo di aggiunta di un messaggio personalizzato alla vostra pagina. Questo messaggio visualizzerà dinamicamente i valori dei campi dei moduli al di fuori di WPForms, permettendovi di integrare e mostrare senza problemi i dati inseriti dagli utenti nella vostra pagina. Iniziamo!

Scopriamo come aggiungere valori alla vostra pagina in modo efficace.

Creare la pagina di reindirizzamento

La sezione iniziale della nostra pagina conterrà un messaggio personalizzato composto da tre spazi HTML vuoti. Uno span HTML è un elemento HTML inline, non semantico, utilizzato per incorporare contenuti inline nella nostra pagina.

Nei passaggi successivi, il nostro modulo trasmetterà sia il nome e il cognome, sia la selezione degli interessi dell'utente, attraverso una query string che costruiremo in seguito.

Una query string è una parte integrante di un URL che contiene dati o parametri utilizzati per comunicare 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 ampere (&). Per una guida completa sull'uso dei valori dei campi del modulo all'interno di una stringa di query, si può fare riferimento a questa documentazione, che fornisce una descrizione dettagliata di ciascun campo del modulo.

Per avviare la creazione di queste campate vuote, inizieremo incorporando un blocco HTML personalizzato nella nostra pagina. Questo paragrafo introduttivo risiederà all'interno di questo blocco, poiché richiede l'inclusione di HTML puro per le campate.

Per aggiungere un blocco HTML personalizzato alla vostra pagina WordPress, fate semplicemente clic sul segno più (+), cercate HTML personalizzato e selezionate il blocco per inserirlo nella vostra pagina.

Quindi, copiare questo HTML e aggiungerlo al blocco HTML della 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 avete bisogno di assistenza durante il processo di creazione del modulo, date un'occhiata a questa pratica guida con istruzioni passo-passo.

In questo tutorial, ci limiteremo a creare un modulo di contatto di base. Il suo obiettivo principale è quello di consentire ai nostri utenti di condividere i loro interessi con noi, permettendoci di inviare loro una newsletter più personalizzata ogni mese. A tale scopo, raccoglieremo il loro nome, l'indirizzo e-mail e i loro interessi utilizzando un campo a tendina. Inoltre, forniremo una sezione commenti per qualsiasi messaggio aggiuntivo che desiderino trasmettere.

Personalizzazione dell'URL di reindirizzamento

Nel prossimo passo, adatteremo l'URL di reindirizzamento alle nostre esigenze. Dopo aver creato il modulo e aver aggiunto i campi necessari, si deve andare nelle Impostazioni del costruttore di moduli e selezionare Conferme.

Nel menu a discesa Tipo di conferma, scegliere "Vai all'URL (reindirizzamento)". Nel campo URL di reindirizzamento della conferma, inserire l'URL della pagina di ringraziamento creata nella fase iniziale. Per questa illustrazione, l'URL è https://myexamplesite.com/thanks.

Per popolare la nostra pagina con il nome e gli interessi raccolti dal modulo, estenderemo questo URL aggiungendo una query string. Questa stringa di query includerà gli ID degli intervalli introdotti e li assegnerà a campi specifici 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"}.

Decostruiamo questa stringa di query per maggiore chiarezza. Dato che il nostro modulo raccoglie sia il nome che il cognome, dobbiamo separare questi valori per garantire che siano trasmessi correttamente all'interno dell'URL. L'ID del campo per il nostro Nome campo è 0ma poiché stiamo raccogliendo il nome e il cognome in questo campo, la nostra stringa di query li includerà utilizzando una pipeline (|) seguita da prima o ultimoa seconda di quale stiamo chiamando. Quindi si può vedere che nella stringa stiamo chiamando {field_id="0|first"} e assegnarlo allo span ID di firstName e il {field_id="0|last"} è assegnata al file lastName span.

Il Interesse La selezione del menu a tendina viene passata utilizzando il metodo {field_id="16"} e saranno assegnati al interest span.

Aggiunta dello snippet

Ora, integriamo lo snippet nella nostra configurazione. Se non siete sicuri del processo di aggiunta degli snippet al vostro sito, potete consultare questa guida completa per avere istruzioni dettagliate.

In questa esercitazione, abbiamo utilizzato il plugin WPCode per gestire il nostro snippet.

Per iniziare, si deve creare un nuovo snippet personalizzato. Assegnargli un nome adeguato. Nel menu a tendina Tipo di codice, selezionare Snippet JavaScript. Per il menu a tendina Location, si può scegliere Site Wide Footer. In questo modo, il nostro snippet JavaScript verrà posizionato ed eseguito in modo appropriato sul sito al termine del caricamento della pagina.

/**
 * 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 si può notare, stiamo sezionando l'URL, scomponendolo meticolosamente per estrarre i valori della stringa di query. Successivamente, utilizziamo il metodo textContent per assegnare con precisione questi parametri ai corrispondenti ID degli span sul nostro Grazie pagina.

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. È così semplice! 🎉

Desiderate popolare automaticamente un altro modulo con le stringhe di query? Date un'occhiata al nostro tutorial su Come usare le stringhe di query per pre-popolare i campi del modulo da un altro modulo.