### [Como Exibir Mensagem Personalizada Fora do WPForms](https://wpforms.com/developers/how-to-display-personalized-message-outside-wpforms/)
**Publicado:** 27 de setembro de 2023
**Autor:** Equipe Editorial
**Resumo:** Neste tutorial, guiaremos você pelo processo de adição de 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!
**Conteúdo:**
## Introdução
Você está interessado em exibir uma mensagem personalizada fora do WPForms? Você pode conseguir isso aproveitando o JavaScript, e nós estamos aqui para guiá-lo através do processo!
Neste tutorial, guiaremos você pelo processo de adição de 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 spans HTML vazios. Um span HTML é um elemento HTML inline, não semântico, empregado 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 um 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 um 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 dentro de 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 (+), procurar 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 HTML na página.
```
Obrigado
pelo seu interesse em !
Alguém entrará em contato em breve!
```
## 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 para instruções passo a passo](https://wpforms.com/docs/creating-first-form/ "Criando Seu Primeiro Formulário").
Neste tutorial, estamos mantendo 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-lhes um boletim informativo mais personalizado a cada mês. 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 o URL de Redirecionamento
Em nossa próxima etapa, adaptaremos o URL de redirecionamento às nossas necessidades. Após criar seu formulário e adicionar os campos necessários, vá para 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 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 do formulário, estenderemos este URL anexando uma string de consulta. Esta string de consulta incluirá os IDs dos spans que introduzimos e os atribuirá a campos de formulário específicos de nosso formulário. Consequentemente, nosso URL completo 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 o primeiro e o último nome, devemos segregar esses valores para garantir que sejam transmitidos corretamente dentro do URL. O ID do campo para nosso campo **Nome** é 0, mas como estamos coletando o primeiro e o último nome 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 dropdown **Interesse** está sendo passada usando `{field_id="16"}` e será atribuída ao span `interest`.
Você precisará atualizar o URL para corresponder ao seu próprio site, mas também precisará atualizar os IDs dos campos para corresponder ao seu próprio formulário. Se precisar de ajuda para encontrar seus IDs de campo, [revise este tutorial](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "Como Localizar ID do Formulário e ID do Campo").
## Adicionando o snippet
Agora, vamos integrar o snippet à nossa configuração. Se você não tiver certeza sobre o processo de adição de snippets ao seu site, pode [consultar este guia completo para obter instruções detalhadas](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Como Adicionar PHP ou JavaScript Personalizado para WPForms").
Neste tutorial, empregamos o [plugin WPCode](https://wordpress.org/plugins/insert-headers-and-footers/ "plugin WPCode") para gerenciar 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.
**Dica Pro**: Se você tiver a versão licenciada do plugin que permite adicionar um snippet apenas a uma página específica, recomendamos fazer isso. Isso garante que seu snippet personalizado não seja executado em todas as suas páginas, mas apenas em sua página de Agradecimento. Para saber mais sobre este recurso, consulte a documentação do plugin sobre [Snippets Específicos de Página](https://wpcode.com/introducing-wpcode-easy-wordpress-code-manager-to-future-proof-your-website-customizations/ "Apresentando WPCode Pro – Salve Snippets na Nuvem, Snippets Específicos de Página e Mais").
```
/**
* Exibe mensagem personalizada fora do formulário usando dados enviados pelo formulário.
*
* @link https://wpforms.com/developers/how-to-display-personalized-message-outside-wpforms/
*/
// Função para obter parâmetros de consulta de URL
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;
}
// Obter parâmetros de consulta
var params = getQueryParameters();
// Preencher spans com valores de parâmetros de consulta
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. Subsequentemente, utilizamos a propriedade `textContent` para alocar precisamente esses parâmetros aos IDs de span correspondentes em nossa página de **Agradecimento**.
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 **Agradecimento** 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](https://wpforms.com/developers/how-to-use-query-strings-to-pre-populate-form-fields-from-another-form/ "Como Usar Strings de Consulta para Preencher Campos de Formulário de Outro Formulário").
**Categorias:** Tutoriais
**Tags:** Javascript
---