Formulário pop-up para o Blogger*

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!