Como Criar Formulários Pop-Up em Landing Pages – SharpSpring Brasil

Com o editor de landing pages da SharpSpring, você pode editar o código da landing page para personalizar totalmente o seu site.

Este artigo detalha como criar uma janela pop-up com um formulário em sua landing page.

Usuários com acesso:

Administradores
Gerentes de Empresa
Gerentes de Marketing

Preparando a Landing Page

Na barra de ferramentas superior da SharpSpring, clique em Conteúdo > Formulários.
Crie ou edite um formulário.
Na barra de ferramentas superior da SharpSpring, clique em Conteúdo > Páginas.
Crie ou edite uma landing page.
Adicione um botão para a landing page.
Clique no botão que foi adicionado.
No painel direito, no campo Definir um URL Personalizado, digite #popup.

Adicionando o Código do Formulário

Os formulários pop-up podem ser usados de diferentes maneiras. Eles podem ser semelhantes às janelas que aparecem no canto da tela do computador, ou podem sobrepor à página inteira. De qualquer maneira, é necessária edição de código.

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

No painel esquerdo, clique em </> Editar Código, no menu à esquerda.
Cole o seguinte código em uma linha vazia da aba Body:

<div id="popup" class="modalDialog">
 <div>
  <a href="#close" title="Close" class="close">X</a>
   <div>
    <!-- PASTE YOUR FORM EMBED CODE BELOW! -->

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

3. Localize o texto PASTE YOUR FORM EMBED CODE BELOW! dentro do código.
4. Cole o código incorporado do seu formulário entre PASTE YOUR EMBED CODE ABOVE! e PASTE YOUR FORM EMBED CODE BELOW!.
5. Clique em Salvar.
6. Clique na aba Head.
7. Cole o seguinte código, 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>

8. Clique em Salvar e Fechar.

Usuários com acesso:

Preparando a Landing Page

Adicionando o Código do Formulário

Artigos relacionados