Tutorial : Como fazer um Formulário de Contato para o Blog


Oi meninas,
No post de hoje, venho com um tutorial super fácil de fazer, que é como criar um formulário de contato pro blog. Ter um formulário de contato é importante sim! Se você deixar seu e-mail exposto no blog para as leitoras, há o risco de alguém maldoso hackear a sua conta. Com o formulário de contato a pessoa interessada em enviar o e-mail vai preencher os campos obrigatórios e a mensagem vai direto para sua caixa de e-mail, sem risco. Eu peguei esse tutorial no blog Cute World, então todos os devidos créditos a este blog.
Veja o resultado aqui
Vamos ao tutorial? 



Vá no seu painel do blogger e clique em Páginas, como na foto abaixo



 Logo em seguida, clique em "criar uma página em branco" e escreva o título e o corpo de mensagem da página, logo em seguida clique em HTML como no esquema abaixo


  Copie o cole o seguinte código :
<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://bnascimentooo.blogspot.com/">[ Cute World ]</a></font></i></div></td>
</tr>
</table>
<p style="border-top: 1px dotted #3A6DA1;"><b>Seu contato é muito importante para mim!</b><br />Agora, basta clicar em "ENVIAR" para recebermos sua mensagem.<br /><br /><input name="enviar" type="submit" value="ENVIAR" /></p>
</form>
Se quiser pode alterar o texto que vem junto com o código da maneira que quiser . Onde está escrito "SEU_EMAIL@HOTMAIL.COM"  em destaque, digite o e-mail onde você quer que as mensagens se dirijam. Depois é só visualizar, ver se está tudo certinho e publicar. Pronto. Seu formulário está feito!
Se forem usar o tutorial não se esqueçam de creditar .

E se tiver qualquer dúvida referente ao tutorial, para fazer pedido de posts ou outro assunto, escreva pra gente clicando aqui

E vocês? Gostaram do tutorial? Querem mais posts assim no blog? Comentem. 
Beijos e até o próximo post!

20 comentários:

  1. Adorei o tutorial , muito bom
    gostei
    Bjinhos
    http://chuvadesonhooficial.blogspot.com.br/

    ResponderExcluir
  2. Que ótima dica. Muito bom o tutorial.
    Beijos.

    http://belezadescoberta.blogspot.com.br

    ResponderExcluir
  3. Que bacana, super fácil né?! O meu eu fiz por um site próprio de criações e foi super fácil e rápido tb :D
    Beijos

    lolaporlola.blogspot.com

    Instagram: stephanieparizi

    ResponderExcluir
  4. Adorei o tutorial :)
    Amei aqui! Seguindo, retribui? :3

    garotaestranha-oficial.blogspot.com.br

    ResponderExcluir
  5. huum, que ótima dica ! e suuper segura . :):)
    beijinhos, adorei
    http://bhulago.blogspot.com.br/

    ResponderExcluir
  6. adorei a dica...
    muito bom deixar mais seguro né?
    beijo flor..
    até mais querida...
    jadhianacleto.blogspot.com.br

    ResponderExcluir
  7. Adorei a dica,
    obrigada pela visita e venho te convidar p participar do sorteio de natal q está rolando lá no blog caso vc ainda n esteja participando, conto com vc, beijinhos !!

    http://www.descontraidas.com

    ResponderExcluir
  8. Gostei do tuto, não sabia ainda como fazer assim não, os meus são pelos wufoo acho que é assim que se escreve e eu gosto muito ^^
    bjinhos
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
  9. ótimas dicas
    Quando eu precisar,já vou saber a onde ir :D

    bjss
    blog-polllyanna.blogspot.com

    ResponderExcluir
  10. Adorei saber disto hehe
    beeijos

    http://manualvessouza.blogspot.com.br/

    ResponderExcluir
  11. Ah são super úteis, sempre uso no meu blog, principalmente em sorteios :D

    Sabe que os tablets estão super na moda e está todo mundo querendo comprar para o natal né?
    Tem um post muuuuito bom no meu blog sobre Tablets e o que é realmente importante na hora de comprar um, dá uma olhada?

    http://www.cupcaketaste.com/2012/11/o-que-importa-na-hora-de-comprar-um.html#more

    ResponderExcluir
  12. Adorei o Tutoria.

    Ah, Já Coloquei seu blog como Blog Parceiro, Muito Obrigada pela Parceria
    *---*

    Beijos Doces, Guria Ousada.

    http://guria-ousada.blogspot.com.br

    ResponderExcluir
  13. Bom tutorial ^^

    http://manguitarosa.blogspot.com.br/

    beijoooos

    ResponderExcluir
  14. Opa, eu curti seu post tava mesmo querendo saber disso, vou voltar e aprender mais pq né... valew!!!
    __###########______##########
    _##############___#############
    ############################
    ###############################
    _#############################
    __###########################
    ____######################
    _Também_#################
    ___TO_____############
    _PaSsando__#########
    ____Pra_______#####
    __DeiXaR______####
    __Um abraço___###
    __pra Vc!!!____xx
    Não deixe de participar dos sorteios ;)
    tenha um perfeito fim de semana

    www.coisasdeladdy.com

    ResponderExcluir
  15. nossa que legal. realmente não é muito legal expor o email né.
    vou ver se consigo depois.
    bjuhs e otimo fds :)
    http://quecorusar.blogspot.com.br

    ResponderExcluir
  16. Acho que vou fazer no meu blog!
    Beijos

    bombofcupcake.blogspot.com

    ResponderExcluir
  17. Adorei a dica! Eu tenho uma pagina com meu email e tudo mais mas acho que assim fica mais formal, ne?


    http://cindereladementira.blogspot.com.br/
    https://www.facebook.com/CinderelaDeMentira

    ResponderExcluir
  18. Adorei a dica, vou colocar no meu blog ;)

    ResponderExcluir
  19. Aii fico feliz que tenha curtido meu blog. Volte sempre que precisar porque estarei por aqui também. Acredita que quando criei o blog penei para fazer um formulário:? kkkk Agora está safo!
    Beijos!
    Paloma Viricio-Jornalismo na Alma

    ResponderExcluir
  20. amei esse tutorial, super simples, valeeeeu, a um tempo atras eu tentava criar no google mas n dava muito certo hahaha, bjs
    www.efeitovintage.blogspot.com

    ResponderExcluir

~ Antes de perguntar qualquer coisa acesse a pagina F.A.Q e verifique se sua questão já não foi respondida
~ Não se esqueça de deixar a URL do seu blog no final do comentário para que possamos retribuir
~Não temos o costume de responder os comentários, apenas de tirar as dúvidas das leitoras caso tenham perguntado algo referente ao post ou ao blog

Obrigada por comentar, volte sempre!