Como Adicionar uma Janela Pop-Up ao seu Formulário

December 16, 2021

Olá!

Se você já se perguntou como colocar uma janela pop-up no seu formulário, mas não sabe como, é aqui que você vai aprender! Você pode usá-la para exibir um anúncio, uma informação complementar ao seu formulário ou uma mensagem que não fará parte do corpo principal do seu formulário. 

Observação: os exemplos utilizados neste guia foram feitos a partir da versão 4.0 do Jotform. Vamos lá, clique nos seguintes links de demonstração para ver como o pop-up funciona:

Exemplo 1 | Formulário: https://form.jotform.com/70331350848958 – note que neste exemplo, o mecanismo de abrir e fechar a janela pop-up é manual, ou seja, é preciso que o usuário clique para abrir ou fechar o pop-up.

Exemplo 2 | Formulário integrado a um website: https://shots.jotform.com/charlie/pop-up-modal-form.html – note que neste exemplo, o mecanismo de abrir a janela pop-up é automático, ou seja, o pop-up já estará aberto quando você acessar a página.

Veja o passo-a-passo a seguir para implementar o mesmo no seu formulário:

1. Abra o formulário no seu Criador de Formulários. Clique em ADICIONAR ELEMENTO e insira um elemento de PARÁGRAFO ao seu formulário.

Clique no símbolo <> para editar o código fonte e insira nele o código HTML abaixo:

<p><a class="button" href="#open" rel="nofollow">Abrir Pop-Up</a></p>
<div id="open" class="modalBox">
<div>
<p><a class="close" title="Close" href="#close" rel="nofollow">X</a></p>
<h2>Benvindo!</h2>
<p>Esta é uma janela pop-up.</p>
<p>Customize com a sua própria mensagem.</p>
</div>
</div>

Você reparou que algumas palavras no código acima estão destacadas em negrito? São as partes que você pode editar e escrever o seu próprio texto. Se você já tem familiaridade com desenvolvimento web, você pode estruturar o HTML da maneira que desejar. 

Acompanhe o passo-a-passo abaixo (você pode ampliar a imagem abaixo clicando nela):

Este guia foi útil?
Contatar o Suporte:

Nossa equipe de suporte ao cliente está disponível 24 hrs e nosso tempo de resposta está entre uma e duas horas.
Nossa equipe pode ser contatada através dos links:

Fórum de Suporte: https://www.jotform.com/answers/

Contate o Suporte da Jotform: https://www.jotform.com/contact/

Enviar Comentário:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comentar:

Podo CommentSeja o primeiro a comentar.