Formulário pop-up para o Blogger*


Imagem: Gamleys Toys
Update 07/03/08: O serviço WebFormDesigner, utilizado no desenvolvimento desse formulário, está cobrando U$ 5,00 para novas inscrições. Uma opção gratuita é o Kontactr.
Gostaria de ter um formulário de contato em janela pop-up no seu blogue? Vou mostrar que não é tããão difícil... Só um pouquinho ;-)

Se você já usa o formulário de contato compulsivo que mostrei anteriormente, não vai ter maiores dificuldades para configurar este em pop-up. Na verdade ele é até mais fácil que o outro.

Você vai precisar de uma conta no WebFormDesigner. Depois de cadastrar-se no serviço você recebe por e-mail um número de identificação (ID). Anote este número, você vai usá-lo mais adiante.

Você também vai precisar hospedar alguns arquivos para o formulário funcionar. Caso ainda não tenha, crie uma conta no Google Pages para isso, é grátis! E como você já é usuário do Blogger fica tudo sob a mesma Google Account. Se preferir utilize qualquer outra hospedagem a seu critério.

Baixe este arquivo, nele estão compactadas duas páginas HTML: CONTATO.html e SUCESSO.html e um arquivo de código JavaScript: TestaFormulario.js, usado para fazer a validação nos campos do formulário. Além desses arquivos você também precisará hospedar uma imagem para usar no cabeçalho das páginas.

Suba o arquivo TestaFormulario.js e anote sua URL. Abra o arquivo SUCESSO.html no bloco de notas ou outro editor de sua preferência e altere o endereço da imagem no campo URL_CABECALHO. Salve o arquivo, suba e anote sua URL.

Agora abra o arquivo CONTATO.html e substitua os campos abaixo:

URL_TESTA_FORMULARIO - URL do arquivo TestaFormulario.js;
URL_CABECALHO - URL da imagem de cabeçalho;
SEU_ID_WEBFORMDESIGNER - ID no WebFormDesigner;
URL_CONFIRMACAO - URL da página SUCESSO.html.
Depois de customizar o arquivo acima, suba-o e anote sua URL. Finalmente, crie um link onde preferir, substituindo os campos URL_CONTATO pelo endereço onde foi hospedado o arquivo CONTATO.html, conforme o exemplo abaixo:
<a href="URL_CONTATO" target="popupwindow" onclick='window.open("URL_CONTATO", "popupwindow", "scrollbars=yes,width=550,height=520");return true'>Entre em contato</a>
P.S.: Cultive o hábito de Baixar o modelo completo (também conhecido como becape) do seu template sempre que entrar no modo de edição HTML. Cautela e canja de galinha não faz mal a ninguém.

* Conteúdo exclusivo desenvolvido na CCP**
** Central Compulsiva de POG!

Comentários

  1. Compulsivo, hoje recebi um meme do Marcelo Mota onde tinha que indicar 5 blogs, e indiquei o seu. Espero que participe!

    http://blogdolenon.blogspot.com/2008/03/meme-do-livro.html

    Valeu e até mais!

    .:: by Lenon ::.

    ResponderExcluir
  2. O melhor do post foi a imagem no início.
    Eu tinha um "pula pirata"!!!!
    Deu saudades...

    ResponderExcluir
  3. E ai Soneca, beleza velho?

    Esse é o tipo de artigo difícil de ilustrar... Comecei jogar palavras a esmo no Google Imagens. Qualquer coisa que tivesse alguma ligação, mesmo que subjetiva, com o tema... De repente dei de cara com essa. Perfeito!

    Welcome back my friend...

    []'s
    Compulsivo

    ResponderExcluir
  4. O kontactr já oferece um botão "contact me", que abre um formulário pop-up em Flash. Eu, que já estava com preguiça, preferi logo instalar o botão e pronto...

    ResponderExcluir
  5. Johnny, você diz esse aqui?

    []'s
    Compulsivo

    ResponderExcluir
  6. Esse mesmo! Coloquei até um link para essa postagem lá.

    Compulsivo, o pop-pup dos comentários do blogger fica estranho no firefox. Coloquei o meu pra abrir em outra janela.

    E não consigo visualizar os seus trackbacks do haloscan.

    ResponderExcluir
  7. Boa tarte, Compulsivo. Expetacular sua dica. Gostei tanto que a usei em meu blog. Gostaria que, se possível, desse uma olhada (umbyte.blogspot.com), pois fiz algumas alterações no formulário. Mas mantive o link de referência como pedido. Caso não concorde com as alterações, por favor me informe, que eu retiro.
    Mais uma vez, parabéns pela dica.

    ResponderExcluir
  8. Bom, legal isso, só que eh o seguinte, quando eu coloco o codigo no meu HTML, todos os outros meu Pop ups, levam ao mesmo lugar, como mudar?


    A Equipe

    ResponderExcluir
  9. Velho, é chute, pois não testei. Mas você pode mudar o nome da função Javascript, para cada PopUp...

    Onde está:
    function abrir()
    e
    ...href="javascript:abrir(...

    Por:
    function abrir2()
    e
    ...href="javascript:abrir2(...

    []'s
    Compulsivo

    ResponderExcluir
  10. Seu blog é hiper interessane,vai levar dias até ver tudo,gostei da idéia do formulario,to cadastrando agora,obrigado!

    ResponderExcluir
  11. Olá, Compulsivo!!

    O WebFormDesigner está aceitando SIM novas inscrições. Fiz uma bem depois dessa postagem e do Update!

    Abraços!

    8)

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Nomes de todas as igrejas do Brasil

O que significa DVDRip, DVDScr, R5, etc?

Remover idiomas em arquivos Dual Audio