Como exibir uma mensagem personalizada fora do WPForms

Introdução

Você tem interesse em exibir uma mensagem personalizada fora do WPForms? Você pode fazer isso usando JavaScript, e estamos aqui para orientá-lo no processo!

Neste tutorial, nós o orientaremos no processo de adicionar uma mensagem personalizada à sua página. Essa mensagem exibirá dinamicamente os valores do campo de formulário fora do WPForms, permitindo que você integre e exiba perfeitamente os dados de entrada do usuário na sua página. Vamos começar!

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

Criar sua página de redirecionamento

A seção de abertura da nossa página apresentará uma mensagem personalizada composta por três intervalos HTML vazios. Uma extensão HTML é um elemento HTML não semântico em linha empregado para incorporar conteúdo em linha em nossa página.

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

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

Para iniciar a criação desses espaços vazios, começaremos incorporando um bloco HTML personalizado à nossa página. Este parágrafo introdutório residirá nesse bloco, pois ele exige a inclusão de HTML puro para os espaços.

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

Em seguida, copie esse HTML e adicione-o ao bloco HTML da 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 ajuda durante o processo de criação do formulário, consulte este guia prático para obter instruções passo a passo.

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

Personalização do URL de redirecionamento

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

No menu suspenso Confirmation Type (Tipo de confirmação), opte por "Go to URL (Redirect)". No campo Confirmation Redirect URL (URL de redirecionamento de confirmação), digite o URL da página de agradecimento que você estabeleceu na etapa inicial. Para esta ilustração, nosso URL é https://myexamplesite.com/thanks.

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

Vamos desconstruir essa string de consulta para maior clareza. Como nosso formulário coleta o nome e o sobrenome, precisamos separar esses valores para garantir que sejam transmitidos corretamente no URL. O ID do campo do nosso Nome campo é 0mas como estamos coletando o nome e o sobrenome nesse campo, nossa string de consulta os incluirá usando um pipeline (|) seguido de primeiro ou últimodependendo de qual deles estivermos chamando. Portanto, você pode ver na string que estamos chamando {field_id="0|first"} e atribuindo-o à ID do intervalo de firstName e o {field_id="0|last"} é atribuído ao lastName extensão.

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

Adicionando o snippet

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

Neste tutorial, usamos o plug-in 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. Na lista suspensa Location (Localização ), você pode optar por Site Wide Footer (Rodapé de todo o site). Isso garantirá que nosso snippet de JavaScript seja colocado e executado adequadamente em seu site depois que a página terminar de carregar.

/**
 * 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 o URL, dividindo-o meticulosamente para extrair os valores da string de consulta. Em seguida, utilizamos a função textContent para alocar com precisão esses parâmetros aos IDs de intervalo correspondentes em nosso Obrigado página.

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

Gostaria de preencher automaticamente outro formulário com query strings? Dê uma olhada em nosso tutorial sobre Como usar cadeias de consulta para preencher previamente campos de formulário de outro formulário.