Criando Formulários Pop-Up na Landing Page

---

Preparando a Página de Destino

Para criar uma landing page que utilize formulários pop-up, primeiro crie um formulário. Em seguida, crie ou edite uma landing page e adicione um botão à landing page. Então:

1. Clique no botão que foi adicionado.
2. Digite #popup no campo Definir uma URL Personalizada no painel direito.

---

Adicionando Código do Formulário

Os 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. Tudo o que é necessário é um pouco de codificação.

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

Uma vez que a landing page foi criada e preparada, faça o seguinte para adicionar o código do formulário pop-up:

1. Clique    Editar Código no menu à esquerda.
2. Cole o seguinte código em uma linha vazia na aba Body:

   <div id="popup" >
    <div>
     <a href="#close" title="Fechar" >X</a>
      <div>
       <!-- COLE SEU CÓDIGO DE INCORPORAÇÃO DE FORMULÁRIO AQUI! -->
   
       <!-- COLE O CÓDIGO DE INCORPORAÇÃO DO FORMULÁRIO ACIMA! --> 
      </div>
     </div>
   </div>

   

3. Localize o texto COLE SEU CÓDIGO DE INCORPORAÇÃO DE FORMULÁRIO AQUI! dentro do código e cole seu código de incorporação do formulário entre os textos COLE SEU CÓDIGO DE INCORPORAÇÃO DE FORMULÁRIO AQUI! e COLE O CÓDIGO DE INCORPORAÇÃO DO FORMULÁRIO ACIMA!.
4. Clique em Salvar.
5. Clique na aba Head.
6. Cole o seguinte na aba Head:

   <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;
    max-width: 100%;
    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>

7. Clique em Salvar e Fechar.