Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1495741411
Vida do cache: 1495784611
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

Blogger Gadgets

Gadget Formulário de Contato no Blogger

Ter uma forma para visitantes entrarem em contato com você por meio do seu blog é algo indispensável. É uma forma de tirarem dúvidas, oferecem propostas e enviarem sugestões. E não basta apenas um e-mail contato, é necessário um formulário de contato que facilite essa comunicação.

É pensando em comunicação que o Blogger liberou um super widget/gadget! Agora é possível inserir um formulário de contato em seu blog com apenas alguns cliques.

Formulárioi de contato Blogger

O formulário é adiciona na sidebar do seu blog, como um elemento de página, onde terá campos de Nome, E-mail e Mensagem. Algo bem simples e funcional. Quando a pessoa preencher os campos e clicar “Enviar”, o e-mail será encaminhado para a caixa de entrada do e-mail de cadastro na sua conta no Blogger, o mesmo e-mail usado no login.

Como adicionar o formulário de contato na sidebar

1) Faça login no Blogger, acesse a página “Layout”;
2) Clique em “Adicionar um Gadget”;
3) Navegue na aba “Mais gadgets”;
4) Escolha a opção “Formulário de contato” e clique em “Salvar

Formulário-de-contato-Blogger

Como adicionar o formulário em uma página estática

É possível também colocar o formulário de contato do Blogger uma página estática, o que é melhor do que inserir como um elemento na sidebar. Para isso, siga os passos abaixo:

1) Adicione o widget na sidebar normalmente, seguindo os passos anteriores;

2) Entre em “Modelo” -> “Editar HTML”;

3) Clique no menu “Ir para um widget” e marque a opção “ContactForm1”;

ContactForm1 Blogger

4) Clique nas setas laterais para expandir o código, apague o código que está selecionado como no exemplo da imagem abaixo:

apagar código blogger

5) Salve as modificações;

6) Acesse a aba “Páginas”, crie uma nova página, colocando o título como quiser, marque a opção “HTML”, apague tudo e adicione o seguinte 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>

Tudo como no exemplo:

Formulário de contato em uma página Blogger

Depois clique em “Publicar”.

O formulário vai funcionar normalmente. É possível personalizar o formulário, basta conhecer um pouco de CSS e bom trabalho!

Agradecemos o Ferramentas Blog por mostrar como colocar a ferramenta em uma página estática.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

45 Comentários

  1. Asantix disse:

    Olá Paulo!
    Fiz tudo conforme o explicado,(por sinal muito bem explicito).Ao pedir para guardar as alterações,o botão “guardar” fica rolando horas e não guarda.Obrigando a gente desistir, sem as guardar. Saberás deste problema, do seu porquê, e como resolve-lo?
    Abraço

  2. Weslley disse:

    Como eu vou ver as mensagens que vou receber?

  3. Graca disse:

    Paulo,
    você tem alguma dica para:
    quando pesquisarem no Google o blog x e ser redirecionado ao blog y?
    Eu migrei as postagens e comentários de um blog com domínio para blogspot,porque a url quando eu criei o site mgcrochetrico.com.br com domínio pago aparece tudo de Minas Gerais,
    sendo que Mg é de Maria das Graças.
    Desde já agradeço

  4. leehla disse:

    ÓTIMO! Ajuda muito e o site fica com uma carinha mais profissional. Adorei!
    Só queria configurar o email para nem todos os autores receberem… Será que tem como? Obrigada! Ótima dica!

  5. luzia frança disse:

    Gostaria de colocar o formulario no meu blog,como comentario ,igual vc estar usando aqui.
    este post que vc estar ensinando é para fazer deixar o formulario igual ta qui .

    desde de ja agradeço

  6. Julia disse:

    Quando chegou nesta parte,
    4) Clique nas setas laterais para expandir o código, apague o código que está selecionado como no exemplo da imagem abaixo: Juro que me perdi toda.

  7. Helena disse:

    Clique nas setas laterais para expandir o código, apague o código que está selecionado como no exemplo da imagem abaixo: É para apagar o códico todo, ou só o que vc marcou? Pq tente com o que vc marcou e deu erro.

  8. LUIZ OTAVIO disse:

    Gostei muito vou tentar fazer, ainda hoje, mas queria saber como faço um formulário de contato como este que estou digitando comentário?

  9. Pessoal, eu exclui o gadgets na própria pagina mesmo, sem precisa fazer toda essa
    complicação. É só entra no seu blog logado e ir no gadgets e clicar em excluir!

  10. Marco disse:

    bom dia paulo, muito bom msm, fiz aqui e funcionou muito bem obrigado msm, agora me restou um duvida, ficou o espaço do gadget formulario de contato nos layout, tentei deletar dai o funcionamento do formulario parou de funcionar. quero saber s serei obrigado a deixar esse gadget

  11. Jonathas disse:

    Muito bom! Funciona mesmo! Obrigado. Ajudou bastante! Agora os leitores do meu blog podem se comunicar comigo!

  12. Pablo disse:

    Muito bom Obrigado, eu usava o Jotform mas assim é bem mais pratico.

  13. nadia disse:

    Olá, como faço para mudar a cor do botão enviar?
    Obrigada

  14. RUI disse:

    FIZ TUDO COMO INDICADO E ALÉM DE TER APAGADO TODA MINHA CAIXA DE ENTRADA EU TAMBÉM NÃO RECEBO AS MENSAGENS ENVIADAS PELO BLOG. VC SABE O QUE PODE TER ACONTECIDO?

  15. Fernando disse:

    Boa tarde, excelente explicação consegui fazer com muita facilidade. Ainda estou iniciando nesse mundo e estou aprendendo muito muito obrigado. Só não consegui tirar os comentários da página de contato, se puder me ajudar agradeço.

  16. Weskher Lima disse:

    Paulo Estevão gostaria de agradecer pois seus ensinamentos estão de parabéns
    esta me ajudando muito.

    e outra seu site é ótimo!
    Se possível de uma visualizada no meu blog

  17. Paula disse:

    Coloquei meu formulário na página Contatos, mas a “textarea” está muito curta. Já tentei modificar a largura com todos os códigos que eu conheço e nada. Tu sabes como munda?

    PS: Gostaria de dizer que o teu blog é fantástico (: Compartilhei “cazamiga”.

  18. Alan disse:

    Eu fiz tudo mas não recebo as mensagens no meu email de cadastro do blog, alguem ajuda ae por favor?

  19. Obrigada, funcionou perfeitamente! Abraços, fera!

  20. Pedro Moreira disse:

    Opa!!Ja adicionei e já Chegaram alguns emails Valeu pela dicaa

  21. Ana disse:

    Paulo, estou com problemas.
    Estou montando um blog e add a página de Contato como você explicou, porém, após fazer alguns testes, notei que não estou recebendo as mensagens. Já procurei pelo meu email de ADM, mas ainda nada. Pode me ajudar?

  22. lucas disse:

    obg amigo tudo certo!

  23. igor disse:

    amigo, show!! Mas sou novo no assunto e gostaria de saber como faço pra programar o destinatário ( que é meu email no caso)

    obrigado

  24. igor disse:

    opa e outra, ja consegui fazer um botao para entrar no link de contato, mas gostaria de apresentar uma mensagem em cima do formulario onde o usuario vai fazer o contato, por exemplo: Iremos responder o mais rapido possivel, etc… abrça

  25. Leonardo disse:

    Olá, eu uso o formulário nesse formato em um blog, porém os emails recebidos vão para todos os ADMs do blog. Não teria um jeito de enviar apenas para um? Com alguma alteração no código? Obrigado! Abraços

  26. Adorei! Muito fácil!!
    Pesquisei em mil blogs e não consegui.
    Aqui em 5 min foi.
    E só fiz o passo 1 e 6!

    Obrigada!

  27. Graça disse:

    Paulo,tutorial fácil de fazer.
    Obrigada.

  28. Waldair Santana disse:

    Primeiramente parabéns pelo site. O meu parou de funcionar, depois que coloquei um domínio próprio. Sabe como resolver. Desde já agradeço.

  29. Ly disse:

    Ótimo post, muito obrigada, me ajudou muito!

  30. Rachel disse:

    Realmente muito bom, me ajudou com a criação do meu blog!

  31. Everardo disse:

    Valeu meu irmão!! Sensasional!!!

  32. Darlo Brito disse:

    Estranho, os e-mails de contato que estou recebendo estão indo para outra conta minha que não tem nada a ver com a de login do blog. Sabe dizer o porquê disso?

  33. Renan F.M. disse:

    Muito bom mesmo!! deu certinho. Me ajudou e muito, esta de parabéns!!!!!!!

  34. Lucas disse:

    Valeu ajudou muito…OBG!!

  35. Lucas disse:

    Olá,

    Essa ferramenta é essencial, muito obrigado!

    Aqui só tá funcionado quando a pessoa envia via PC.
    Se ela tenta enviar via dispositivo móvel não da certo. Clica e não carrega nada, como se o botão enviar n funcionasse.

    Alguém sabe o pq?

  36. Bruno Bezerra disse:

    Olá Paulo!
    É possível inserir neste formulário, um campo de envio de arquivos?

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.