Criar um Formulário de Contatos para Blog: Ferramentas ContactForm

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:

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:

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:

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”.

pagina-estatica-blogger-menu

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:

edito-pagina-estatica-editar-html

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:

ignorar linhas

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.

64 Comentários

  1. muito obrigado,há tempo procurava um formulário mais simplificado,testei e adorei!Já está instalado no meu blog.
    Parabéns pelas dicas excelentes.

    Responder

  2. Maravilha, mesmo quando eu não sei o que estou procurando, venho até aqui e saio com mais conhecimento, e me aproximo mais de meus leitores.
    Só tenho elogios, e rasgação de seda mesmo com vocês.
    Mil beijos e obrigado.

    Responder

  3. Fantástico esse formulário. Pena que não existe o campo para um site, é um ótimo meio de se conhecer novos locais na internet.

    Mas tá muito bom mesmo, parabéns mais uma vez, Lemos.

    Responder

  4. Olá Marcos,

    Gostei da dica e ainda consegui colocá-la em prática.

    Obrigada,
    Andrea

    Responder

  5. Marcos,

    Acompanho diariamente seu blog.
    Acho seu trabalho muito profissional e de grande qualidade.
    Já utilizei várias dicas suas no meu blog.
    Quero te agradecer pelo disponibilidade dos códigos e pelas dicas.
    Parabéns!

    João Tobias
    João Tobias

    Responder

  6. Muit,muito obrigado! Eu estava há muito tempo atrás de um formulário de contatos simples de instalar e ótimo que nem esse. Parabéns,você é demais!

    Responder

  7. Adorei, desisti de pintar uma parede para navegar na sua quarentena!
    Repito só o comentário do Pedro, não como reclamação, porque mais uma vez o Ferramentas do Blog me ajuda, mas como um pedido. Seria legal um campo que indicasse site, página na web!
    No mais, parabéns!

    Abraços!

    Responder

  8. Muito bom todo o conteúdo do site. Não precisa sem nenhum expert, para dar uma boa repaginada na sua pág on line. Adorei. Estão todos de parabéns. Mudei a cara do meu blog graças a ajuda de vc's.

    Um abraço

    Responder

  9. Perfeito!!!
    Eu tinha um formulário de contato do Wuffo, mas nunca consegui que funcionasse direito.

    Parabéns pela qualidade se seu blog e muito obrigada por todas as dicas mais do que importantes que dá aqui!

    Abs,
    Anne

    Responder

  10. Valeu! Ja tô usando. Simples e fácil de instalar. Procurei por vários, uns tem que se cadastrar e tomam um bocado de tempo…
    Esse é facinho. um abç

    Responder

  11. Exelente!
    Para iniciante como eu foi uma luva.
    Não quero copiar ninguem,mais posso ser aluno
    valeu mesmo.OBRIGADO

    Responder

  12. Olá, boa noite!

    Estive aqui outro dia e deixei um coment agradecendo o post e parabenizando você.

    Acontece que quis dar uma repaginada no blog e tentei instalar este código com o novo template. Pedi para visualizar a página e ela fica linda, perfeita; porém, quando mando publicar, o formulário não aparece, dando lugar ao código. O que pode estar acontecendo?

    Um abraço,
    Anne

    Responder

  13. @Anne,

    O que pode ter acontecido é que você não colou o código no modo "Editar HTML". Veja os passos descrito acima com mais cuidado para ver o que houve de errado!

    Responder

  14. obrigada, Marcos, mas não adiantou mesmo!

    Estou fuçando no código do template para ver se resolvo, rs!

    Abs,
    Anne

    Responder

  15. Oii, fazia seculos q procurava um formulario pro meu blog! Esse é perfeitoo.. Muito obrigada!! Porém estou com um pequeno problema, as mensagens caem direto no lixo eletronico.. :( O email pra onde ta redirecionando é do hotmail.. Obrigadaa, abraços!

    Responder

  16. Oi Marcos,

    eu uso o seu formulário no meu site. Realmente ótimo e muito fácil de ser "instalado", até pra mim que sou 0,5 nerd, numa escala de 1 a 100.
    O único problema é que ele não reconhece acentos e cedilhas… muitas mensagens vem praticamente "criptografadas"!
    Abraços,
    Camilli

    Responder

  17. Muito bom esse trabalho!
    Nos ajuda e muito. Só fiquei com um dúvida aqui: Só pode adicionar emails.com? Será que funciona com email.com.br?

    Responder

  18. obrigada pelo post. o seu blog é genial, tem-me ajudado imenso no processo de remodelação da minha página!

    Responder

  19. Adorei a dica, muito legal mesmo. Há um bom tempo eu procurava um código para um formulário de contatos.

    Responder

  20. Estou testando para ver se funciona, a instalação foi perfeita, agora quero ver se consigo receber as mensagens, qualquer coisa volto aqui, bjuuuus e obrigada.

    Responder

  21. Brother, mt fera a dica, já coloquei no meu blog e está atodo vapor. Deus abençoe seu trabalho.

    Responder

  22. Muito obrigada, Marcos!!! Esse formulário é justamente o que procurava! Troquei meu formulário feito no google doc por este, na hora!

    Responder

  23. Muito bom mesmo, só tem um problema, quando é colocado acentos ele não reconhece..

    Mas no demais. ótimo mesmo

    Responder

  24. Muito obrigado pelas dicas, eu que não entendo muito de informática, mais com a sua ajuda ficou muito fácil colocar o formulário no meu blog
    Eu até tentei criar um E-book digital mais a falta de experiência não me deixou levar o projeto do livro digital, foi então que eu resolvi criar esse blog com os arquivos do livro
    Se possível faça uma visita ficarei muito grato
    E muito obrigado pela força.

    Responder

  25. Cara, realmente tive problemas para colocar na página, mas mesmo assim consegui colocar como postagem, o mais simples, direto, fácil e ótimo formulário que encontrei.

    BRIGADÚÚÚÚ!!!

    Responder

  26. Valeu Pelo Codigo =D Muitas vezes eu retiros o creditos mas quando é do [ FerramentasBlog.com ] eu dexarei porque é melhor conteudo de dicas de Blog valeu!

    Responder

  27. Ah gato !
    vlw, a coisa funciona meesmo!!
    Mandou mto bem.
    Parabéns. Vou assinar o feed de vcs, tipo, AGORA!
    Bju

    Responder

  28. Obrgidoa, esta precisando mesmo de um desse !!Deus esteja te abençoada ecuidado de vc.

    Responder

  29. Poxa, comecei sexta a fazer meu blog e com esta dica, muito simples por sinal, meu blog vai ficar SHOW!!!
    Não tem nem como pensar em tirar o seu crédito, pelo contrário, o crédito é mais do que merecido. Parabéns e adorei o seu blog.

    Responder

  30. Boa Noite Te agradeço Muito pela dica ai do formulário de contato coloquei em meus blogs testei e tudo ok.já a dias estava tentando outros e não conseguia Que te abençoe.

    Responder

  31. O Salvador da minha pátria! Finalmente um formulário simples de ser feito (se bem que já tá feito) e colocado no blogger! Valeu Mesmo!

    Responder

  32. O melhor formulário que encontreim quanto aos creáditos não só deixei em minha página como já divulguei p amigos.
    parabens
    PS vou explorar ainda mais seu site

    Responder

  33. Valeu Cara!! Todas as suas dicas desde como colocar o ícone de redes sociais ao formulário são as melhores. Ótimas, objetivas e ilustrativas no passo-a-passo. Valeu mesmo.

    Responder

  34. Muito bom… Há tempos que estava procurando um Formulário decente.
    Já testei vários e sempre dando erro. O seu funcionou certinho e na hora.
    Parabéns… e obrigada por nos ajudar.
    Já estou te seguindo…
    Valeu amigo!
    Grande abraço.

    Responder

  35. pUXA… Estou acompanhando o seu blog há uma semana, e o meu blog está ficando maravilhoso graças a voce! Adorei todas as dicas e a forma como explica, é fácil e didática

    Responder

  36. Até que eu queria colocar esse formulário em meu blog, mais nesse layout não deu certo, tive que tirar.

    Mais valeu pela dica, Esse formulário funcionou certinho no template antigo.

    abraço

    Responder

  37. Estava procurando um formulário, mas só encontrava formulários difícil de se compreender e em sites escrito em inglês, muito obrigado, você facilitou muito minha vida, vou seguir o blog com todo prazer.
    Espero meu blog ficar famoso algum dia

    Responder

  38. Visito frequentemente seu blog, e acho fantástico tudo o que você faz! Criei o meu blog e acho que vou adicionar uma página de tutorias blog, os temas que eu postar, vou redirecionar para os blogs que eu sempre uso para aprender. Pois o meu blog não é de ferramentas para Blog, mas acho interessante ter links para blogs como o seu que é de grande ajuda e sempre me socorre. visito sempre, tenho aprendido muito com você.

    E os créditos do formulário vão para você! :o)

    Abraços!

    Responder

  39. Pingback: Biografia do autor do Blog no rodapé dos posts para Blogger | [ Ferramentas Blog ]

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.