Como Exibir Mensagem Personalizada Fora do WPForms

Introdução

Está interessado em exibir uma mensagem personalizada fora do WPForms? Pode conseguir isto aproveitando o JavaScript, e nós estamos aqui para guiá-lo através do processo!

Neste tutorial, vamos guiá-lo através do processo de adicionar uma mensagem personalizada à sua página. Esta mensagem exibirá dinamicamente os valores dos campos do formulário fora do WPForms, permitindo-lhe integrar e apresentar perfeitamente os dados inseridos pelo utilizador na sua página. Vamos começar!

Vamos mergulhar e aprender como adicionar valores à sua página de forma eficaz.

Criação da sua página de redirecionamento

A secção de abertura da nossa página apresentará uma mensagem personalizada composta por três spans HTML vazios. Um span HTML é um elemento HTML inline, não semântico, utilizado para incorporar conteúdo inline na nossa página.

Nos passos subsequentes, o nosso formulário transmitirá o primeiro e o último nome, bem como a seleção de interesse do utilizador, através de uma string de consulta que construiremos mais tarde.

Uma string de consulta é uma parte integrante de um URL que contém dados ou parâmetros usados para comunicação com um servidor web, facilitando a recuperação de informações. Está situada após o ponto de interrogação (?) num URL e é composta por pares de chave-valor separados por ampersands (&). Para um guia completo sobre como usar valores de campos de formulário numa string de consulta, pode consultar esta documentação, que fornece uma análise detalhada para cada campo de formulário.

Para iniciar a criação destes spans vazios, começaremos por incorporar um bloco de HTML Personalizado na nossa página. Este parágrafo introdutório residirá dentro deste bloco, uma vez que necessita da inclusão de HTML puro para os spans.

Para adicionar um bloco de HTML Personalizado à sua página WordPress, clique simplesmente no sinal de mais (+), procure por HTML Personalizado e selecione o bloco para o inserir na sua página.

Em seguida, copie este HTML e adicione-o ao seu bloco HTML na 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>

Criação do formulário

Agora, vamos criar o nosso formulário e adicionar os campos necessários. Se precisar de alguma ajuda durante este processo de criação de formulário, certifique-se de consultar este guia útil para instruções passo a passo.

Neste tutorial, vamos mantê-lo simples, criando um formulário de contacto básico. O seu objetivo principal é permitir que os nossos utilizadores partilhem os seus interesses connosco, permitindo-nos enviar-lhes um boletim informativo mais personalizado todos os meses. Para conseguir isto, recolheremos o seu nome, endereço de e-mail e os seus interesses usando um campo Dropdown. Adicionalmente, estamos a fornecer uma secção de comentários para quaisquer mensagens adicionais que gostariam de transmitir.

Personalização do URL de Redirecionamento

No nosso próximo passo, vamos adaptar o URL de redirecionamento às nossas necessidades. Após criar o seu formulário e adicionar os campos necessários, dirija-se às Definições do construtor de formulários e, em seguida, selecione Confirmações.

No menu suspenso Tipo de Confirmação, opte por “Ir para URL (Redirecionamento)”. No campo URL de Redirecionamento de Confirmação, insira o URL da página de Agradecimento que você estabeleceu na etapa inicial. Para esta ilustração, o nosso URL é https://myexamplesite.com/thanks.

Para preencher a nossa página com o nome e os interesses recolhidos do formulário, estenderemos este URL adicionando uma string de consulta. Esta string de consulta incluirá os IDs dos spans que introduzimos e atribuí-los-á a campos específicos do nosso formulário. Consequentemente, o nosso URL completo aparecerá como https://myexamplesite.com/thanks?firstName={field_id="0|first"}&lastName={field_id="0|last"}&interest={field_id="16"}.

Vamos decompor esta string de consulta para maior clareza. Dado que o nosso formulário recolhe tanto o primeiro como o último nome, devemos segregar estes valores para garantir que são corretamente transmitidos dentro do URL. O ID do campo para o nosso campo Nome é 0, mas como estamos a recolher o primeiro e o último nome neste campo, a nossa string de consulta incluirá estes usando um pipeline (|) seguido de first ou last, dependendo de qual estamos a chamar. Assim, pode ver na string que estamos a chamar {field_id="0|first"} e a atribuí-lo ao ID do span firstName e o {field_id="0|last"} é atribuído ao span lastName.

A seleção do menu suspenso Interesse está a ser passada usando o {field_id="16"} e será atribuída ao span interest.

Adição do trecho de código

Agora, vamos integrar o snippet na nossa configuração. Se não tiver a certeza sobre o processo de adicionar snippets ao seu site, pode consultar este guia abrangente para instruções detalhadas.

Neste tutorial, empregámos o plugin WPCode para gerir o nosso snippet.

Para começar, crie um novo snippet personalizado. Dê-lhe um nome adequado. No menu suspenso Tipo de Código, selecione Snippet de JavaScript. Para o menu suspenso Localização, pode optar por Rodapé de Todo o Site. Isto garantirá que o nosso snippet JavaScript é devidamente colocado e executado no seu site após o carregamento da página.

/**
 * 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 pode observar, estamos a dissecar o URL, a decompô-lo meticulosamente para extrair os valores da string de consulta. Subsequentemente, utilizamos a propriedade textContent para alocar precisamente estes parâmetros aos IDs de span correspondentes na nossa página de Agradecimento.

E aí tem! A partir deste ponto, sempre que um visitante preencher o nosso formulário de contacto, será recebido com uma mensagem personalizada apresentando o seu nome e interesses na página de Agradecimento redirecionada. É tão simples! 🎉

Gostaria de pré-preencher outro formulário com strings de consulta? Dê uma vista de olhos ao nosso tutorial sobre Como Usar Strings de Consulta para Pré-Preencher Campos de Formulário a Partir de Outro Formulário.