Formulário de Contato do Blogger

em

06 junho 2013


Desde que comecei a vender layouts sempre quis colocar um formulário de contato no blog. Já tive alguns, que eram gerados através de sites, mas eu não gostava muito do jeito que eles chegavam no meu email. Também já tentei montar um através de códigos, mas a mensagem não era enviada... Enfim, queria um formulário simples e funcional.
Ontem me deparei com uma surpresa: Em Maio o blogger disponibilizou seu próprio formulário de contato! Testei e funciona super bem. Então hoje, vou ensinar 2 maneiras de colocar ele no seu blog: A primeira é a mais simples, e a segunda é a melhor! Mas atenção: Antes de começar as alterações, escolha onde quer que fique seu formulário e só faça um dos tutoriais.

Adicionando o Formulário de Contato na sidebar

1.Vá na aba Layout do seu menu do blogger.

2. Na área da sidebar, clique em Adicionar um Gadget.

3. Na página que abriu, clique em Mais gadgets. // 4. Clique no "+" como mostra a imagem.

5. Salve. (se quiser mude o título)

O Formulário aparecerá assim na sua sidebar! (fundo e bordas podem variar de acordo com o estilo do seu layout).

Super fácil né? Mas ficaria melhor se não fosse na lateral do blog... Pois vou ensinar como colocar esse formulário em uma página!

Adicionando o Formulário de Contato em uma Página

1. Vá na aba Páginas do seu menu do blogger. // 2. Clique na página que deseja que fique o formulário.

3. (O padrão é a página abrir em Escrever) Clique em HTML.

4. Adicione o seguinte código:
<div class="contato"><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></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></em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5' style='max-width: 450px;'></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></div>
5. Atualize/Salve.

6. Vá na aba Modelo do seu menu do blogger. // 7. Clique em Editar HTML.

8. Clique em Ir para um widget > Blog1

9. Cole o seguinte código abaixo de "Blog1".
<b:widget id='ContactForm1' locked='false' title='Formulário de contato' type='ContactForm'>
<b:includable id='main'>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Ficará assim:

10. Visualize e se estiver tudo ok no seu layout, salve.

Agora é só ir até a página que você colocou o código do passo 4 e testar seu formulário!
A mensagem vai para o seu e-mail da conta do blogger.

PS: O código do passo 4 é do Ferramentas Blog, eu adicionei apenas um estilo. Segui o tutorial de lá, mas não cheguei ao resultado que queria. Mudando algumas coisas consegui, e acho que até ficou mais fácil de entender, será?

Qualquer dúvida é só perguntar!

7 comentários

Olá querido leitor,
Gostou dessa postagem? Que tal compartilhar sua opinião, ou deixar sua dúvida?
Espero seu comentário!

Beijinhus ;3

  1. Oi, eu estou tentando modificar um layout do Difluir, e quando eu sigo os passos, no fim o formulário que eu coloquei na coluna continua lá :c
    Os códigos não são compatíveis?

    ResponderExcluir
    Respostas
    1. Que bom que conseguiu, qualquer dúvida é só perguntar =)
      Beijinhus

      Excluir
  2. Mary, não estou conseguindo achar onde é para colocar o código :c

    ResponderExcluir
    Respostas
    1. Oi! Procura por essa linha no html:



      Depois siga a partir do passo 9 :)
      Veja se dá certo!

      Ps: Use Ctrl+f pra procurar mais rápido!

      Beijinhus

      Excluir
  3. Como faz para colocar esse gadget eu acho... "do Leia outras postagens do blog"
    Obrigadaaa

    ResponderExcluir
    Respostas
    1. Oi Eloane eu usei o http://www.linkwithin.com/learn e personalizei!
      Indico que leia essa postagem aqui: http://isjackiezzdream.blogspot.com.br/2012/06/personalizando-o-gadegets-de-postagens.html

      Beijos!

      Excluir