Criar e abrir formulário de contato em lightbox com shadowbox

7 comentários
contato em PopUp

Formulário de Contato - Lightbox com Shadowbox

Ter um design bacana e atraente aumenta a taxa de retorno dos visitantes no blog.
Pensando nisso, resolvemos mostrar como criar e abrir um formulário de contato em lightbox com shadowbox.

Muitos Webmasters tem curiosidade em saber como são feitos aqueles formulários de contato que ficam nos menus e quando clicados abrem uma pequena e elegante tela popup com campos para que você entre em contato com o respectivo site.



Parece algo realmente complicado e complexo de se fazer, mas não é, e através deste artigo você irá criar seu formulário e abri-lo com um efeito lightbox bem bonito.

Ferramentas para criar o formulário de contato em lightbox com shadowbox

Para criá-lo, você precisará de dois itens: o plugin jquery e o formulário em si.

Plugin efeito lightbox com shadowbox

Para começarmos o formulário, é necessário que você tenha acesso ao plugin. Primeiro, insira script o abaixo, em seu blog, dentro do código fonte acima da tag </head>

<link href='http://natannofmovie.webs.com/shadowbox.css' rel='stylesheet' type='text/css'/>

<script src='http://natannofmovie.webs.com/shadowbox.js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: &quot;#000&quot;,
overlayOpacity: &quot;0.6&quot;,
});
</script>

Para quem usa o Blogger, o processo é o seguinte: vá até o painel do Blogger. No menu lateral clique em modelo e, em seguida, editar HTML. Dentro do código fonte dê CTRL+F e procure pela tag </head>

Para quem usa o Wordpress, é necessário ver compatibilidade ou plugin apropriado.

Após inserir o conjunto de códigos acima, salve.

Formulário de Contato

Para adquirirmos o formulário de contato, é necessário que você acesse o site do jotform, e prepare um formulário gratuitamente, ou acesse formulário de contato com jotform.

Após criá-lo e colocar seu e-mail para receber as respostas do formulário, você irá selecionar Setup & Embed acima do formulário e, em seguida, clicar em código fonte.



Uma tela popup se abrirá com um pequeno código de script. Veja o exemplo na imagem abaixo:

Jotform
O código será similar a este:

<script type="text/javascript" src="http://portuguese.jotform.com/jsform/41493256937666"></script>

Pronto! Agora você já tem seu formulário de contato!

Continuando.. Prepare a explicação abaixo em um Bloco de Notas ou Notepad++

Com o script shadowbox dentro do código fonte no seu blog e com acesso ao link do formulário de contato, você irá selecionar somente o endereço do formulário que você adquiriu no jotform, como no exemplo abaixo:

<script type="text/javascript" src="http://portuguese.jotform.com/jsform/41493256937666"></script>

Ao selecionar o link do fomulário, você irá criar um link shadowbox da seguinte forma:

<a href='endereço da página na web' rel='shadowbox;width=800;height=600' title='Postagens'>Contato</a>

Você irá trocar o "endereço da página na web" pelo link do jotform selecionado anteriormente. O conjunto ficaria assim:

<a href='http://portuguese.jotform.com/jsform/41493256937666' rel='shadowbox;width=800;height=600' title='Postagens'>Contato</a>

Agora, seu formulário de contato irá abrir com um efeito lightbox com shadowbox.

Sempre que alguém clicar na palavra Contato, o formulário irá abrir como um elegante PopUp.

Este conjunto pode ser inserido em um Gadget no código fonte ou em um menu. Para inseri-lo em um menu, ele deverá ficar entre <li> e </li> desta forma:

<li>

<a href='http://portuguese.jotform.com/jsform/41493256937666' rel='shadowbox;width=800;height=600' title='Postagens'>Contato</a>
</li>

Você pode vê-lo em funcionamento aqui.

Este artigo está disponível para publicação em outros blogs ou sites desde que seja seguida a Política do BG

7 comentários :

  1. Para quem já tem ligfhtbox para img, videos etc, ainda é necessário colocar este para o contato?
    muito bom o tutorial, cara blz!

    ResponderExcluir
    Respostas
    1. Olá Fco, o light-box já é nativo do blogger, neste caso é necessário inserir sim! Para quem usa shadowbox ou outro plugin jquery no blog não é necessário basta apenas ver se o plugin da suporte a páginas na web. neste caso em específico seria necessário que eu uma avalia-se, para ver se é necessário instalar ou não o plugin jquery. Para todos os casos aconselho que você insira o plugin citado acima.
      Abraços Andrew Silva do BG.

      Excluir
    2. Tive trabalho mas, consegui, muito bom, Valeu!

      Excluir
    3. Olá Fco, agradeço o contato e fico feliz em saber que você tenha conseguido aplicar o tutorial do formulário de contato acima.
      Qualquer duvida entre em contato comigo.
      Abraços Andrew Silva do BG.

      Excluir
  2. Respostas
    1. Oi marcos, o BG não parou estávamos de mudança de Estado. Saímos do Rio de janeiro para Santa Catarina, estamos com uma seleção de vários artigos novos que ajudarão os outros blogueiros. Essa semana ainda começaremos com força total! Abraços, Andrew Silva do BG.

      Excluir

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.