post

Adicionando valor variável dinamicamente no input do formulário popup do Elementor

Publicado em: 02/09/2022 / Atualizado em: 02/09/2022

Categorias: BlogElementorWordpress

Nesse pequeno artigo, quero mostrar como adicionar dinamicamente um valor em um campo de texto (input text) usando o formulário e popup nativos do Elementor.

Nesse tutorial, estou simulando uma situação onde o site tem uma pagina com alguns recursos/mídias para download, mas quer que o usuário deixe seu nome e e-mail antes de receber os materiais.

Nesse caso, o formulário, depois de preenchido, vai enviar no e-mail do usuário, um link com a mídia hospedada em um drive (google drive, onedrive, dropbox, etc). Para que assim o usuário baixe as mídias com segurança.

O desafio era fazer isso usando apenas 1 único formulário, que vai receber dinamicamente o link em um campo oculto do formulário, que será enviado junto com o e-mail do Elementor.

Segue passo a passo abaixo:

1. Crie a pagina com as mídias para download

Para este exemplo, criei uma pagina com 3 banners, que seriam a capa das mídias que o cliente pode escolher.

2. Criando o formulário popup no Elementor

Acesse “Modelos > Popup” em seu painel WordPress (com o Elementor instalado).

Crie seu primeiro popup.

Dentro do editor, adicione um formulário, neste exemplo, vou usar apenas 3 campos (1° Link do arquivo, 2° Nome do usuário, 3° E-mail). Como mostra abaixo:

Deixei o tipo do campo do link como “oculto”. Para que ele não mostre para o usuário, e o resultado fica assim:

Além disso, deixe o ID do campo de um jeito que fique fácil para você usar, nesse caso, coloquei o ID de “arquivo”, como segue abaixo:

3. Adicione um código JavaScript junto ao seu popup

Ainda no editor do popup, adicione um bloco de HTML do Elementor, logo abaixo do seu formulário.

Sua ordem de camadas vai ficar assim:

Dentro desse campo HTML, você vai adicionar um trecho de código JavaScript. Segue código abaixo:

<script>
  jQuery(document).ready(function() {
    jQuery("#form-field-arquivo").val(urlArquivo);
  });
</script>

Obs: Onde esta form-field-arquivo é o ID do campo do formulário, o final esta como “…-arquivo” pois eu editei o ID do meu campo lá no passo anterior para “arquivo“, fique atento. Qualquer coisa, usa o inspecionar do navegador, para verificar o ID do seu campo oculto.

Em “Ações após o envio”, selecione a ação “E-mail 2”, que é a responsável por enviar um e-mail ao usuário após o preenchimento.

Na seção “E-mail 2”, configure como o exemplo abaixo:

Feito isso, você já pode salvar.

4. Configurando capas e popup

Agora, vamos voltar lá a pagina com as minhas capas, que criamos no 1° tópico desse artigo, e vamos configurar algumas coisas, entre elas, nosso popup.

Primeiro, vamos clicar em cima da nossa capa (imagem), e vamos configurar o popup no campo “link”, para quando alguém clicar em cima da imagem, abrir o popup.

Agora, pesquise pelo popup criado, com o nome que você deu a ele, clicando em cima da palavra “popup”, e editando as “configurações”.

Na seção “Avançado”, vamos configurar uma class chamada “abrirPopup“.

Próximo passo é configurar o atributo que vai armazenar seu link, dentro daquela imagem especifica.

No exemplo acima, crie um atributo chamado “urlarquivo” (use o mesmo nome para ficar igual ao código seguinte) e atribui um link exemplo: “https://aqui-vai-seu-link.com.br“.

Pronto! Uma das minhas capas para download estão prontas, agora só precisa fazer isso para as outras capas, cada uma com seu link de download especifico.

5. Código JavaScript para captar o link do atributo

Agora vamos adicionar nosso script, que vai controlar a ação de pegar o link do atributo da capa, e transportar para o campo oculto do formulário.

Acesse em seu painel do wordpress “Elementor > Código personalizado”, clica em “adicionar novo”.

De um nome ao código, para fácil identificação futura. Depois cole o código abaixo:

<script>
var urlArquivo;
jQuery(".abrirPopup").click(function(e) {
    e.preventDefault();
    jQuery("#form-field-arquivo").val(jQuery(this).attr("urlarquivo"));
	urlArquivo = jQuery(this).attr("urlarquivo");
});
</script>

Seu código precisa ficar assim:

Feito isso, pode clicar em “Publicar”. Você pode selecionar para carregar o código em todo site, ou escolher a pagina especifica.

Feito isso, salve e publique. Pronto!

Dica extra: Para evitar que pessoas achem seu link sem querer, e burlem o sistema de adicionar o e-mail antes, você pode optar em guardar suas mídias em um drive online (Onedrive, google drive, dropbox) que seja possível bloquear com senha. E no corpo do “E-mail 2”, do formulário do Elementor, você manda a senha para o acesso. Assim, mesmo se a pessoa inspecionar a pagina, para obter os links, ele ainda precisará da senha para desbloquear o drive.

Publicações recomendadas:


Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News


Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/1926

ID de Referência: 1926

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários