Como criar Formulários de Contato

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

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.

E, se vc gostou da dica, deixe o seu comentário aqui ou entre em contato pelo nosso formulário (esse eu vou ensinar noutro artigo). Enviesua dica e/ou dúvida. Colocaremos o seu comentário aqui e criaremos um artigo mencionando sua ajuda! PARTICIPE…