Os formulários SharpSpring são uma das maneiras que você pode rastrear leads em uma campanha gota-a-gota.

Este artigo detalha como configurar o formulário pop-up no seu site, para quando um visitante clica em um link ou em um botão.

Adicionando Formulários Pop-Up

Formulários Pop-up podem ser usados de diversas maneiras. Eles podem ser algo parecido com uma janela no canto da tela do computador, ou podem funcionar como uma camada extra em cima de uma página. Para criar e adicionar um formulário pop-up em seu site, faça o seguinte:

1. Na barra de ferramentas superior da SharpSpring, clique em Conteúdo > Formulários.

2. Crie ou edite um formulário.

3. Copie o código incorporado do formulário.

4. Em uma nova aba do navegador, localize o HTML da página no seu site.

5. Cole o seguinte código. O  div id denominado  popup  pode ser substituído por qualquer rótulo que desejar:

<div id="popup" class="modalDialog">
     <div> <a href="#close" title="Close" class="close">X</a>

<!-- PASTE YOUR FORM EMBED CODE BELOW!   -->

<!-- PASTE FORM EMBED CODE ABOVE!   -->      

</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>

6. Crie um link ou adicione um botão no seu site.

7. Defina #popup como a localização de URL para este link ou botão. Confira o seguinte código de exemplo:

<a href="#popup">This is a popup link</a>

8. Cole o código incorporado do seu formulário entre o texto PASTE ABOVE e PASTE BELOW no código fornecido no Passo 5.

Ao adicionar formulários pop-up, esteja ciente de que você também pode possuir múltiplos formulários pop-up em uma única página, criando ID's únicos para cada  div class modalDialog.

Nota: a SharpSpring oferece Serviços Profissionais para lhe assistir na codificação personalizada.