Guia do Usuário JotForm / Características avançadas /

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

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

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:

modal

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):

 

2. Agora que você já configurou o campo de Parágrafo, clique no ícone azul de rolo de tinta no canto superior direito para abrir o assistente DESIGNER DE FORMULÁRIOS:


3. Na aba ESTILOS, você irá encontrar uma seção identificada como "Adicionar Código CSS". Nela você deve colar o código abaixo.

/*Main Box Content*/
.modalBox {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
  color: black;
z-index: 99999;
opacity:0;
  -webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

/*When the href are clicked*/
.modalBox:target {
opacity:1;
  pointer-events:auto;
}

/*Positioning of the child box*/
.modalBox > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 0px;
background: white;
}

/*Positioning and style of the close button*/
.close {
background: white;
color: black;
line-height: 25px;
position: absolute;
right: 1px;
text-align: center;
top: 1px;
width: 35px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: none;
  border: none;
}

/*Style when mouse hovers on the close button*/
.close:hover {
  background: black;
  color: white;
}

/*Default style of the open pop-up button*/
.button {
    background-color: black;
    border: none;
    color: white;
    padding: 2px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

 

Para que você possa se localizar melhor, antes de cada bloco de código nós colocamos um comentário indicando exatamente o que aquele trecho de código está fazendo.  

 

4.  Role a tela e clique em SALVAR:

 

Para entender em detalhes como funciona a inserção de código CSS no seu formulário, confira o seguinte guia (em Inglês): How to Inject Custom CSS Codes

 

Como definir se o pop-up será aberto automaticamente ou manualmente?

É muito simples! Para que o pop-up seja aberto manualmente, é só adicionar #open ao final do link de compartilhamento do formulário. Alternativamente, para que ele só possa ser aberto manualmente, em vez de #open, você deve adicionar #close.

Abre manualmente com #close: https://form.jotform.com/70331350848958#close

Abre automaticamente com #open: https://form.jotform.com/70331350848958#open

 

Se você irá integrar o formulário ao seu website e deseja que o pop-up seja aberto automaticamente, igualmente você deve adicionar #open ao link a ser inserido no atributo src. No exemplo abaixo, feito utilizando o recurso iFrame, você pode ver que o #open foi inserido ao final do link do atributo src.

Fácil, né? Agora você já tem a sua janela pop-up!

Comentários e sugestões são bem-vindos abaixo. Se você tem uma pergunta, escreva para que o Fórum de Suporte possa ajudar você. 

Enviar Comentário