Como Exibir Mensagem Personalizada Fora do WPForms

Introdução

Você tem interesse em exibir uma mensagem personalizada fora do WPForms? Você pode conseguir isso usando JavaScript, e nós estamos aqui para guiá-lo durante o processo!

Neste tutorial, vamos guiá-lo pelo processo de adicionar uma mensagem personalizada à sua página. Esta mensagem exibirá dinamicamente os valores dos campos do formulário fora do WPForms, permitindo que você integre e exiba perfeitamente os dados inseridos pelo usuário em sua página. Vamos começar!

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

Criando sua página de redirecionamento

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

Nas etapas subsequentes, nosso formulário transmitirá o primeiro e o último nome, bem como a seleção de interesse do usuário, por meio de uma string de consulta que construiremos mais tarde.

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

Para iniciar a criação desses spans vazios, começaremos incorporando um bloco de HTML Personalizado em nossa página. Este parágrafo introdutório residirá dentro deste bloco, pois necessita da inclusão de HTML puro para os spans.

Para adicionar um bloco de HTML Personalizado à sua página do WordPress, basta clicar no sinal de mais (+), pesquisar por HTML Personalizado e selecionar o bloco para inseri-lo em sua página.

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

Criando o formulário

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

Neste tutorial, vamos manter as coisas simples, criando um formulário de contato básico. Seu objetivo principal é permitir que nossos usuários compartilhem seus interesses conosco, permitindo-nos enviar um boletim informativo mais personalizado todos os meses. Para conseguir isso, coletaremos o nome, endereço de e-mail e seus interesses usando um campo Dropdown. Além disso, estamos fornecendo uma seção de comentários para quaisquer mensagens adicionais que eles gostariam de transmitir.

Personalizando a URL de Redirecionamento

Em nossa próxima etapa, personalizaremos a URL de redirecionamento para nossas necessidades. Após criar seu formulário e adicionar os campos necessários, vá para as Configurações do construtor de formulários e, em seguida, selecione Confirmações.

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

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

Vamos desconstruir esta string de consulta para clareza. Dado que nosso formulário coleta nome e sobrenome, devemos segregar esses valores para garantir que sejam transmitidos corretamente dentro da URL. O ID do campo para nosso campo de Nome é 0, mas como estamos coletando o nome e o sobrenome neste campo, nossa string de consulta incluirá estes usando um pipeline (|) seguido por first ou last, dependendo de qual estamos chamando. Assim, você pode ver na string que estamos chamando {field_id="0|first"} e atribuindo-o ao ID do span firstName e o {field_id="0|last"} é atribuído ao span lastName.

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

Adicionando o snippet

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

Neste tutorial, empregamos o plugin WPCode para lidar com nosso snippet.

Para começar, crie um novo snippet personalizado. Dê a ele um nome adequado. No menu suspenso Tipo de Código, selecione Snippet de JavaScript. Para o menu suspenso Localização, você pode optar por Rodapé do Site. Isso garantirá que nosso snippet JavaScript seja colocado e executado adequadamente em 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 você pode observar, estamos dissecando a URL, detalhando-a meticulosamente para extrair os valores da string de consulta. Subsequentemente, utilizamos a propriedade textContent para alocar precisamente esses parâmetros aos IDs de span correspondentes em nossa página de Obrigado.

E aí está! A partir de agora, sempre que um visitante preencher nosso formulário de contato, ele será recebido com uma mensagem personalizada apresentando seu nome e interesses na página de Obrigado redirecionada. É simples assim! 🎉

Gostaria de preencher automaticamente outro formulário com strings de consulta? Dê uma olhada em nosso tutorial sobre Como Usar Strings de Consulta para Preencher Campos de Formulário de Outro Formulário.