sexta-feira, 26 de julho de 2013

Dica para Blog: Como inserir caixa de contato no blog!

Oii lindas? Como vocês estão?
Hoje o post vai ser sobre dicas para blogger!
Bem, hoje eu vou mostrar para vocês, como inserir uma caixa de contato no blog, talvez você queira inserir no sidebar, mais eu preferi abrir uma página no menu chamada Contato, bom ao decorrer do post você vai aprender os dois! Ok?
 
Vamos lá!
Se você quer colocar o formulário de contato na Sidebar.
 
1- Faça login no Blogger e Acesse o Layout.
2- Clique em Adcionar um Gadget.
3- Clique em Mais Gadgets.
4- Acesse a opção Formulário de Contato.
 
 
 
E por fim clique em Salvar!

Se você quer colocar o formulário de contato numa página estática! Ex: Contato no menu!

1- Adcione o formulário na sidebar, como no passo anterior.

2- Vá em Modelo e depois em Editar HTML.

3- Clique na Aba Ir para um Widget e selecione ContactForm1.
 
 

4- Clique nas setas em cor preto para expandir o código e apague toda a parte selecionada como na imagem!
 
 
5- Salve as modificações.

6- Agora crie uma página estática, são aquelas páginas que ficam no menu, Ex: Home, Tutorias, Contato. Se você já possui, não precisa fazer outra página!


7- Coloque o título como quiser, no meu caso é Contato, e clique em HTML, insira o código abaixo.
 
<form name='contact-form'><div>Seu Nome:</div><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/><br/><br/><div>Seu E-mail: <em>(obrigatório)</em></div><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/><br/><br/>
<div>Sua mensagem: <em>(obrigatório)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Enviar Mensagem'/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>


Vai ficar assim:




8- Agora Clique em Publicar


Pronto seu formulário está criado!

Qualquer dúvida comenta que te respondo ok! Ou acesse o meu formulário de contato e deixe a sua dúvida!

Um Beijo!

 Imagens do site http://www.codigosblog.com.br/







64 comentários:

  1. Que legal, Marii!
    Adorei a sua dica. Muito fácil de fazer esse tutorial.
    Estou seguindo o seu blog e muito obrigada por você ter seguido o meu.
    Beijo e um ótimo final de semana! :)

    www.belezadescoberta.com.br

    ResponderExcluir
    Respostas
    1. Que bom que gostou, fico feliz!
      Obrigada, Beijos!

      Excluir
  2. Suas dicas estão cada dia melhores!

    www.maribelezapura.com

    ResponderExcluir
  3. Ótima dica Mari, acho super útil essa caixa de contato.

    Beijos.

    Opinando Moda

    ResponderExcluir
  4. Que dica booa menina, eu não sabia como colocar essa caixa!!
    Adorei o post!
    Obrigada pela visita *-*
    Beijão

    http://pretapretinhablog.blogspot.com.br

    ResponderExcluir
  5. Ah que massa sua dica
    =D

    Estou seguindo, segue de volta?
    Beijooos lindona,

    Venham conferir...
    Blog
    FanPage
    Instagram
    Canal no YouTube

    ResponderExcluir
  6. Adorei a dica flor!!
    Bjos
    http://mundo-d-moda.blogspot.com.br

    ResponderExcluir
  7. Amei o tutorial, bem explicado !
    Beijos,
    divasconnected.blogspot.com

    ResponderExcluir
  8. Oi Mari tenho algumas duvidas com as setas,são todas as setas pretas? até a onde devo apagar ?

    ResponderExcluir
  9. seu blog doe a vista :/
    mesmo assim obrigado '

    ResponderExcluir
  10. otima dica, consegui!!!

    bylaise.blogspot.com.br

    ResponderExcluir
  11. Você sabe como vincular o formulário de contato a outro email?

    ResponderExcluir
  12. O meu não deu certo! Fiz tudo da forma correta como pede o tutorial e nada ):

    ResponderExcluir
  13. Obrigadão, ajudou bastante e muito fácil!

    ResponderExcluir
  14. Oi linda, eu gostaria de lhe informar que essa dica me ajudou em uma parte (a outra eu tenho que fazer pelo computador) e que eu adorei seu blog. Se quiser visitar o meu, me desculpe pela falta de posts acabei de criar o blog, então ainda estou sem publicações. Bom de qualquer forma parabéns pelo seu blog, ta show. Beijooos

    ResponderExcluir
  15. Muito Legal Marii, obrigado
    Essa dica melhorou o contato com nossos clientes, super facil de executar....obrigado mesmo
    A Moto Felix Express lhe agradece!!!!!!! valeu !!!!
    da uma olhadinha como ficou.
    https://motofelix.blogspot.com/b/post-preview?token=X_UdIkYBAAA.cNzTnNT0VAmr5SSFbaEjKA.ENw5s6jNMnGbZxAKD8Xp0A&postId=1018306371927890362&type=PAGE

    ResponderExcluir
    Respostas
    1. Que bom que gostou, aproveite as outras dicas, podem te ajudar também! E ficou ótimo no seu blog!

      Excluir
  16. Desculpe Marii o endereço da pagina certo e esse;
    http://motofelix.blogspot.com.br/p/classificados.html
    obrigado

    ResponderExcluir
  17. Eu estou em duvida de uma coisa. não entendi direito aquela coisa das setas pretas. e para tirar o que a seta está indicando ou para tirar tudo entre as setas?

    ResponderExcluir
  18. eu tentei tirar o cantact,deu erro,entao copiei so o codigo e deu certo...vlw

    ResponderExcluir
  19. Obgd <3 conseguiii
    http://catching-feelings-s2.blogspot.com.br/

    ResponderExcluir
  20. Marii coloquei , está la direitinho só que fui testa e o email que mando por la não chega no meu email .. o que eu faço?/

    ResponderExcluir
  21. Amore, pra onde vai as msg? Não tá indo pro e-mail.

    ResponderExcluir
  22. Mari, já fiz e já repeti umas três vezes, e não chega no meu email. Tem mais alguma coisa que posso fazer?

    ResponderExcluir
  23. fiz ! Obrigada pela ajuda adoro seu blog .
    http://mundo-da-isa.blogspot.com.br/

    ResponderExcluir
  24. Adorei a dica, ajudou muito
    http://kworldofbooks.blogspot.com/

    ResponderExcluir
  25. Consegui!!!! Olha http://www.raphaelameiser.com/p/contato.html

    ResponderExcluir
  26. Mas para onde vai o Email que é enviado ????
    Tinha que ter uma opção para onde vai o Email enviado ....
    Ou então somente vai ter por ter, e nada mais ...

    ResponderExcluir
  27. Olá. Não consigo enviar. O que occorre?

    ResponderExcluir
  28. Adoreii a dica!!! Obg!! Bjs!!

    http://meiorosado.blogspot.com.br/

    ResponderExcluir
  29. Este comentário foi removido pelo autor.

    ResponderExcluir
  30. Oi Mari.Muito obrigado pela dica, ajudou muito.
    Só tenho uma dúvida. Para onde vão as mensagens enviadas?

    Fiz um teste e não estou encontrando o enviado.

    Grato, no aguardo.

    ResponderExcluir
  31. Fiz e não deu certo não deu pra salvar em modelo e meu computador acusou que um programa estava em andamento! Oque ACONTECEU!

    ResponderExcluir
  32. Adorei a dica, foi muito útil pro meu blog :3 valeu <3

    ResponderExcluir
  33. Oi você pode me ajudar por favor? Eu não entendi na parte de clicar na seta preta e apagar, pois há varias setas pretas, vc pode me explicar?

    ResponderExcluir
  34. Olá Mari, vc sabe me responder se é possível colocar uma caixa para tira pedidos no blog?

    ResponderExcluir
  35. sou blogueira, como faço para ler o comentario

    ResponderExcluir
  36. Este comentário foi removido pelo autor.

    ResponderExcluir
  37. O meu ficou em duas partes, na pagina e em frente do blog msm :(

    ResponderExcluir
  38. Já está ;)

    Muito obrigado! Muita felicidade para você ;)

    Beijo

    ResponderExcluir
  39. Olá! Nossa Muito Obrigada Linda! Me Ajudou Muito! ♥

    ResponderExcluir
  40. Olá Mari,
    Muito obrigada! Funcionou ^.^ ;-)

    http://muffinsetea.blogspot.com.br/

    ResponderExcluir
  41. Como eu procurei por essa informação de forma simples e clara! Muito obrigada, ajudou bastante. beijos
    https://blogdakah00.blogspot.com.br/

    ResponderExcluir