Para atender à necessidade de muitos blogueiros, especialmente no Blogger, de adicionar uma página estática com um formulário de contatos eficiente, resolvi criar um modelo objetivo e fácil de usar, totalmente gratuito e que vou ensinar a fazer agora. Todos podem adicionar usando o recurso de página estática padrão do Blogger e sem limite de quantidade de mensagens.

Quem não sabe da novidade de se poder criar páginas estáticas no Blogger, leia:

• Como criar Páginas Estáticas padrões do Blogger

AVISO: Devido a erros no sistema de recebimento dos emails (o servidor não está suportando tantos usuários, este formulários foi desativado.Sugerimos que use outro modelo, como este do seguinte tutorial:

• JotForm – Formulário de contato gratuito para blogs

O modelo que vou ensinar aqui pode ser visto e testado na seguinte página de testes. Veja o funcionamento e como ficará ao adicionar em seu blog:

• Modelo do Formulário de Contatos para teste

Agora, vamos por a mão na massa, ou melhor, nos códigos.

Passo 1 – Preparando a página estática.
A primeira coisa a fazer é criar uma página estática. Para isso vá ao painel do Blogger, clique no menu “Postagem” ~> “Editar páginas” e clique no botão “NOVA PÁGINA”.

O que vai abrir é um editor de posts exatamente como você já está acostumado a ver, como é o padrão do Blogger. Dê um título para essa página e clique na aba “Editar HTML” do editor, como ilustra a imagem:

Isso é importante, pois a única coisa que você vai precisar fazer é colar o código do formulário aí. Mas ainda não acabou. Veja que na base do editor há um link que diz “Opções de postagem”. Clique aí pra definir a quebra de linhas na aba que abrir:

Marque as mesmas opções mostradas, principalmente a que diz “Ignorar linhas novas”. Feito isso você já pode passar para o próximo passo e adicionar o código HTML do formulário de contatos.

Passo 2 – Adicionando o código HTML
Na área de texto do editor, cole o seguinte código HTML e só mude o que indicarmos logo abaixo.



<script language="javascript">
    function verifica(){
        if ((document.FormContato.nome.value == "") || (document.FormContato.email.value == "") || (document.FormContato.mensagem.value == "")){
            alert("Preencha os campos marcados com '*'");
            return false;
        }
        else
            return true;
    }
</script>
<form action="http://www.ferramentasblog.com.br/templates/formmail.php" method="post" name="FormContato" onsubmit="return verifica();">
<input type="hidden" name="receber" value="SEU_EMAIL@SERVICO.COM" />
<p style="border-bottom: 1px dotted #3A6DA1;"><font style="font-size:18px; font-weight:bold">Formulário de Contato:</font><br />Preencha os campos abaixo para entrar em contato conosco.<br />Não esqueça de seu e-mail para respondermos, se for necessário.<br /><font style="font-size:12px">Os campos marcados com "<font color="#FF0000"><b>*</b></font>" são obrigatórios.</font></p>
<br /><br />
<table border="0" width="450">
  <tr>
    <td><b>Nome<font color="#FF0000">*</font>:</b><br /><input name="nome" type="text" size="50" maxlength="50" /><br /><i><font style="font-size:10px">máximo de 50 caracteres</font></i></td>
  </tr>
  <tr>
    <td height="60" valign="bottom"><b>E-mail para contato<font color="#FF0000">*</font>:</b><br /><input name="email" type="text" size="50" maxlength="200" /><br /><i><font style="font-size:10px">máximo de 200 caracteres</font></i></td>
  </tr>
  <tr>
    <td height="80" valign="bottom"><b>Assunto (motivo do contato):</b><br /><input name="assunto" type="text" size="50" maxlength="100" /><br /><i><font style="font-size:10px">máximo de 100 caracteres</font></i></td>
  </tr>
  <tr>
    <td height="210" valign="bottom"><b>Mensagem<font color="#FF0000">*</font>:</b><br /><textarea name="mensagem" cols="50" rows="10"></textarea><br /><div align="right"><i><font style="font-size:10px">Criado por <a href="http://www.ferramentasblog.com/">[ FerramentasBlog.com ]</a></font></i></div></td>
  </tr>
</table>
<p style="border-top: 1px dotted #3A6DA1;"><b>Seu contato é muito importante para nós!</b><br />Agora, basta clicar em "ENVIAR" para recebermos sua mensagem.<br /><br /><input name="enviar" type="submit" value="ENVIAR" /></p>
</form>

Onde está indicado de vermelho é para colocar o seu e-mail, exatamente o e-mail que receberá os contatos que forem enviados para você..
Cole todo esse código sem mudar nada além de adicionar o seu e-mail, como disse acima, no editor da página que estamos criando. Então clique no botão “PUBLICAR PÁGINA”.

Pedimos que não retire os créditos de criação do formulário.