Introdução
Está interessado em exibir uma mensagem personalizada fora do WPForms? É possível fazer isso usando JavaScript, e estamos aqui para guiá-lo pelo processo!
Neste tutorial, vamos guiá-lo através do 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 em sua página. Vamos começar!
Vamos mergulhar e aprender como adicionar valores à sua página de forma eficaz.
Criar a sua página de redireccionamento
A secção de abertura da nossa página apresentará uma mensagem personalizada que inclui três intervalos HTML vazios. Um span HTML é um elemento HTML em linha, não semântico, utilizado para incorporar conteúdo em linha na nossa página.
Nos passos seguintes, o nosso formulário transmitirá o primeiro e o último nome, bem como a seleção de interesses do utilizador, através de uma cadeia de consulta que construiremos mais tarde.
Uma cadeia de consulta é uma parte integrante de um URL que contém dados ou parâmetros utilizados para a comunicação com um servidor Web, facilitando a recuperação de informações. Situa-se a seguir ao ponto de interrogação (?) num URL e é composta por pares de valores-chave separados por sinais de adição (&). Para obter um guia completo sobre a utilização de valores de campos de formulário numa cadeia de consulta, pode consultar esta documentação, que fornece uma descrição pormenorizada de cada campo de formulário.
Para iniciar a criação destes vãos vazios, começaremos por incorporar um bloco HTML personalizado na nossa página. Este parágrafo introdutório residirá neste bloco, uma vez que necessita da inclusão de HTML puro para os vãos.
Para adicionar um bloco HTML personalizado à sua página do WordPress, basta clicar no sinal de mais (+), procurar HTML personalizado e selecionar 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>
Criar o formulário
Agora, vamos criar o nosso formulário e adicionar os campos necessários. Se precisar de ajuda durante este processo de criação de formulários, consulte este guia prático para obter instruções passo a passo.
Neste tutorial, vamos manter as coisas simples, criando um formulário de contacto básico. O seu principal objetivo é permitir que os nossos utilizadores partilhem os seus interesses connosco, permitindo-nos enviar-lhes uma newsletter mais personalizada todos os meses. Para isso, vamos recolher o nome, o endereço de e-mail e os interesses dos utilizadores utilizando um campo Dropdown. Além disso, estamos a fornecer uma secção de comentários para quaisquer mensagens adicionais que queiram transmitir.
Personalizar o URL de redireccionamento
Na próxima etapa, adaptaremos o URL de redireccionamento às nossas necessidades. Depois de criar o formulário e adicionar os campos necessários, vá para as Definições do criador de formulários e selecione Confirmações.
No menu pendente Tipo de confirmação, opte por "Ir para URL (Redirecionar)". No campo URL de redireccionamento da confirmação, introduza o URL da página de agradecimento que estabeleceu no passo 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 esse URL anexando uma cadeia de consulta. Esta cadeia de consulta incluirá os IDs dos intervalos que introduzimos e atribui-los-á a campos de formulário 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 desconstruir essa cadeia de consulta para maior clareza. Dado que o nosso formulário recolhe o primeiro e o último nome, temos de separar estes valores para garantir que são corretamente transmitidos no URL. O ID do campo do nosso Nome campo é 0mas como estamos a recolher o primeiro e o último nome neste campo, a nossa cadeia de consulta irá incluí-los utilizando um pipeline (|) seguido de primeiro ou últimodependendo de qual deles estamos a chamar. Assim, podemos ver que na string estamos a chamar {field_id="0|first"} e atribuindo-o ao ID do vão de firstName e o {field_id="0|last"} é atribuído ao lastName span.
O Interesse a seleção do menu pendente está a ser passada utilizando o {field_id="16"} e será atribuído ao interest span.
Terá de atualizar o URL para corresponder ao seu próprio site, mas também terá de atualizar os IDs de campo para corresponder ao seu próprio formulário. Se precisar de ajuda para saber onde encontrar as IDs de campo, consulte este tutorial.
Adicionar o snippet
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 completo para obter instruções detalhadas.
Neste tutorial, utilizámos o plugin WPCode para tratar do nosso snippet.
Para começar, comece por criar 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, você pode optar por Rodapé de todo o site. Isso garantirá que nosso snippet de JavaScript seja colocado e executado adequadamente no seu site depois que a página terminar de carregar.
Dica profissional: Se tiver a versão licenciada do plug-in que lhe permite adicionar um snippet apenas a uma página específica, recomendamos que o faça. Isto garante que o seu snippet personalizado não será executado em todas as suas páginas, mas apenas na sua página de agradecimento. Para saber mais sobre esse recurso, consulte a documentação do plug-in sobre snippets específicos 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, decompondo-o meticulosamente para extrair os valores da cadeia de consulta. Em seguida, utilizamos a função textContent para atribuir com exatidão estes parâmetros aos IDs de intervalo correspondentes na nossa Obrigado página.
E já está! A partir deste momento, sempre que um visitante preencher o nosso formulário de contacto, será recebido com uma mensagem personalizada com o seu nome e interesses na página de agradecimento redireccionada. É simples assim! 🎉
Gostaria de preencher automaticamente outro formulário com cadeias de consulta? Veja o nosso tutorial sobre Como utilizar cadeias de consulta para preencher previamente campos de formulário a partir de outro formulário.