Criando Formulários Pop-Up em Seu Site

Última atualização: 9 de outubro de 2024


Formulários Lead Gen & CRM são uma das maneiras de você acompanhar leads em uma campanha de gotejamento.

Este artigo detalhará como configurar seu formulário para aparecer em seu site quando um visitante clicar em um link ou botão.

Disponível Com:
Teste ✓  
Essencial ✓  
Avançado ✓  
Ultimate ✓  
Barra de Ferramentas:
FormuláriosFormulários
 
Usuários:
Administradores ✓  
Gerentes de Empresa ✓  
Gerentes de Marketing ✓  
Gerentes de Vendas    
Vendedores    
Vendedores Jr.    

Adicionando Formulários Pop-Up

Formulários pop-up podem ser usados de várias maneiras. Eles podem ser algo semelhante a uma janela modal no canto da tela do computador, ou podem servir como uma sobreposição sobre toda a página do site.

Nota: Constant Contact oferece Serviços Profissionais para ajudar com codificação personalizada.

Para criar e adicionar um formulário pop-up ao seu site, crie ou edite um formulário e copie o código de incorporação do formulário:
 

  1. Em uma nova aba do navegador, localize o HTML da página em seu site. 
  2. Cole o seguinte código. O div id nomeado popup pode ser substituído por qualquer rótulo que você desejar: 
    <div id="popup" >
     <div> <a href="#close" title="Fechar" >X</a>

<!-- COLE SEU CÓDIGO DE INCORPORAÇÃO DO FORMULÁRIO ABAIXO!   -->

<!-- COLE O CÓDIGO DE INCORPORAÇÃO DO FORMULÁRIO ACIMA!   -->      

</div>
      </div>

<style> .modalDialog {
   position: fixed;
   font-family: Arial, Helvetica, sans-serif;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.8);
   z-index: 9999;
   overflow-y: scroll;
   overflow: scroll;
   display: none;
}
.modalDialog:target {
   display: block;
}
.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    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: 1px 1px 3px #000;
}
.close:hover {
    background: #00d9ff;
}
.noscroll { 
  overflow: hidden;
}
</style>
  3. Crie um link ou adicione um botão em seu site.
  4. Defina #popup como o local da URL para este link ou botão. Consulte o exemplo de código a seguir: 
    <a href="#popup">Este é um link pop-up</a>
  5. Cole o código de incorporação do seu formulário entre o texto COLE ACIMA e COLE ABAIXO no código fornecido na Etapa 5.

Ao adicionar formulários pop-up, esteja ciente de que você também pode ter múltiplos formulários pop-up em uma única página criando IDs exclusivos para cada div class modalDialog

    Outros artigos