Como usar o novo Formulário de Contato do Blogger em Páginas Estáticas

Blogger, Dicas
98
Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

O Blogger lançou um novo Gadget de Formulário de Contato, que pode ser incorporado à barra lateral. O problema é que não é prático e deixa a sidebar feia e cheia. Vamos mostrar aqui como usar esse recurso fora de um Gadget, dentro de uma Página estática do Blogger, separada só para receber contatos.

✅ Canal no Youtube | Inscreva-se AGORA ✅

Para quem não viu o novo Gadget do Blogger, recomendamos que leia para entender:

A parte ruim desse elemento de página (gadget) é que ele só serve para ser colocado na barra lateral (sidebar) do Template do seu Blog. Não é muito eficiente assim e deixa o blog feio e cheio de coisas.

O melhor é ter uma Página estática específica para contatos, um lugar para o formulário. Se você não sabe bem o que são as Páginas Estáticas e como usá-las em seu Blog no Blogger, recomendo que leia também:

Então, é possível usar o novo Formulário de contato padrão do Blogger fora de um Gadget, incorporado numa Página. O procedimento é simples.

A primeira coisa a fazer é criar uma página estática, como ensinamos no tutorial citado acima. Dê um nome para o título da página como preferir, algo como “Contato”. No corpo da página você vai clicar na aba “HTML” para poder colocar um código:

Adicionar HTML nas páginas do Blogger

Então adicione o seguinte código onde seria escrito o conteúdo da Página. Não altere nada para não ter erros no funcionamento:

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

Agora publique a página normalmente.

Você já verá a página funcionar e o formulário ser exibido, só que ele ainda não recebe mensagens. É preciso mostrar ao Blogger que aquele formulário existe para ele aceitar e fazer funcionar.

A primeira coisa a fazer é adicionar o Gadget do novo Formulário de Contato. Sim. Você vai adicionar ele na sua barra lateral como ensinamos no tutorial “Novo Gadget Formulário de Contatos do Blogger“. Isso será temporário. Agora vamos excluir alguns trechos do código desse novo Gadget diretamente na fonte.

Para isso vá ao menu “Modelo”, clique no botão “Editar HTML”, para poder ver todo o código fonte do seu Template:

Na janela que abrir, clique no menu que diz “Ir para um widget” e marque a opção “ContactForm1” ou semelhante, como na imagem ilustrativa abaixo:

Isso levará você até as linhas do novo Gadget que está inserido na sua barra lateral. É preciso expandir as linhas desse gadget que ficam escondidas nas setas pretas. Quando expandir você verá algo semelhante a isso que está na próxima imagem:

T odas essas linhas que estão marcada na imagem devem ser excluídas.

Cuidado para não apagar as linhas erradas. Isso eliminará a exibição do Gadget da barra lateral, mas manterá o funcionamento de seus recursos. É assim que faremos o formulário da página estática funcionar sem erros.

Depois de excluídas as linhas indicadas acima, o seu código ficará assim:

Salve o modelo para aplicar as mudanças.

Agora vá à página estática do Formulário que você criou e teste para vê-lo funcionar. A mensagem será enviada para seu e-mail padrão da conta de acesso ao Blogger.

.

98 Comentários

  1. Ótima publicação, Marcos… Agora podemos criar a nossa página de contatos sem a necessidade de criar contas em sites de criação de formulários de contato…. E sem termos que colocar o formulário de contato como gadget na barra lateral de nossos blogs… Mais uma vez salvando a vida de nós blogueiros…

    Att, Romirys Cavalcante

    Responder

  6. Legal ! Eu atualmente fiz uma página estática e coloquei um daqueles Formulários do Google Docs, mas ele preenche uma planilha de excel, e no máximo para o meu email eu consegui colocar um aviso de quando ela era alterada (alguém mandava mensagem), precisava ir ao Google Docs e traduzir o que estava na planilha. Mas se esse gadget manda a mensagem em sí direto para o email, farei esta alteração aqui sugerida ! Obrigado e abraços !

    Responder

  8. Muito bom. Mas como jamais mexi no HTML, tenho uma dúvida. O seu começa na linha de número 2133 e vai até 2160 e o meu começa no 2058 até 2086, é assim mesmo?Obrigada

    Responder

  9. Boa postagem! Relevante para o seu público, atual, verdadeira é inédita. Marcos, acho que você deveria fazer jornalismo [risos]. Texto conciso, linguagem simples e uma boa escrita. Aos que irão ao Afiliados Brasil deixo uma dica; aproveitem a experiência de Marcos Lemos [risos]! Abraço companheiros!

    Responder

  11. Olá Marcos!
    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 e poderás explicar do porquê?
    Abraço

    Responder

  13. Pingback: Gadget Formulário de Contato no Blogger | Códigos Blog

  17. Gostaria de aumentar o tamanho do formulário na largura. Como fazer? Poderia responder?
    Muito obrigada desde já

    Responder

  18. Fiz tudo, mas não estava recebendo o email da pessoa para resposta. Então tirei a linha do nome e deixei apenas a do email, agora vem com o email no campo de contato e não só com o nome como estava acontecendo antes.

    Não sei se verificaram esse erro no de vocês, mas é inútil uma forma de contato que não te possibilite a resposta.

    Responder

  19. Eu fiz o procedimento e deu tudo certo no meu blog.
    Só que eu descobri uma maneira mais simples de fazer e de forma que não deixe campos vazios, linhas brancas ou rastros na sidebar do blog.

    É só fazer como o artigo explica, mas ao invés de deletarmos todas aquelas linhas de código html no modelo é só adicionar uma pequena configuração no próprio modelo do template.

    Deve-se procurar a tag ]]> e colar isso antes dela:
    #ContactForm1 {display: none;}

    Isso fará com que o formulário desapareça da página. Ele ainda estará na página estática e vai funcionar normalmente lá, só que quando o navegador for carregar as outras páginas ele não será carregado na sidebar, deixando o campo dele livre para o próximo widget.

    Outra coisa que acontece é que depois disso ele também não aparecerá no modo de edição do layout (onde você adiciona widgets e os arrasta para onde quiser), pois esse modo representa fielmente o template do blog. Logo para remover esse widget é só excluir o código que você adicionou, assim ele voltará para o layout possibilitando a sua exclusão.

    Responder

  21. Excelente. Artigo muito objetivo, esclarecedor e didático. Bem que você poderia escrever um livro, Marcos.
    Parabéns e obrigado pelo serviço que presta a tantos entusiastas. Me ajudou muito. Abraço

    Responder

  22. Muito bom artigo eu desde que conheci o Ferramentas blog! é meu parceiro diário do dia-a-dia quando quero aprender um pouco mais sobre como deixar o blog mais profissional e claro que as dicas aqui realmente funcionam diferentes de outroooos ae… Parabéns!

    Responder

  26. marcos, excelente tutorial. o meu blog é em ingles e o formulario ficou em port. vc sabe como faço para colocar ingles? tmb gostaria de saber se é possivel deletar a caixa de comentarios da pagina. muito obrigado!!!

    Responder

      • valeu mesmo marcos. so mais uma coisa, aquela caixa de comentario é tão feia embaixo do formulario de contato. tem como deletar? to aguardando seu tutorial sobre como ajustar o tamanho e a largura. eu nao sei nada, to aprendendo tudo com vc!
        muito obrigado
        grande abç!

        Responder

  27. desculpe pela pergunta incrivelmente simples. era so eu deixar de ser preguiçoso. so apaguei e escrevi em ingles, mas nao consegui mudar o botao “enviar” para “send” e gostaria de saber se é apagar a caixa de comentarios.
    muito obrigado!

    Responder

    • Se eu entendi direito você não quer que ninguem comente na pagina certo? é simples, vá em editar pagina e depois clique em opçoes e em comentarios dos leitores deixe “Não existir, ocultar existentes” espero ter ajudado =)

      Responder

  28. Bom dia Marcos,
    Você leu meus pensamentos. Estava mesmo pensando num modo de usá-lo numa página estática. Foi fantástico para mim, pois quero eliminar os excessos da barra lateral. Se tiver uma sugestão para os links e os banner’s que patrocino (inclusive o seu) que também estão na barra lateral eu agradeço ainda mais. Muito obrigado. Grande abraço!

    Emanuel Galvão

    Responder

  29. Existe outros recursos gratuitos melhores que esse do blogger, exemplo, se você tem em uma mesma conta do google 5 blogs, você vai receber o mesmo email de todos os blogs, ou é possível alterar o email de recebimento?

    Responder

  30. Muito bom seu blog, eu era leiga em tudo o que diz respeito a códigos html, mas estou alterando várias coisas com sua ajuda.
    O engraçado é que tudo o que procuro no Google para alterar alguma coisa, um dos primeiros blogs que aparece é o seu rsr, agora como sei que sempre dá certo eu nem vou em outras paginas mais 🙂 muito bom mesmo, parabéns novamente.

    Responder

  34. Pingback: Como criar um blog? | Nós na Gravata

  40. Pingback: Lista especial: coisas pro seu blog! | Nós na Gravata

  42. Marcos queria saber se tem como botar para que a partir deste formulário as pessoas enviem as mensagens mas n para o email padrão do blogger, mas sim para um email a escolha do proprietário. Ex: Eu quero que as mensagens sejam enviadas para um novo email que criarei só para o contato do blog. Entende? Tem como mudar ?

    Responder

  43. Excelente!
    Estava aqui reinventando a roda tentando fazer exatamente isso, Marcos! kkk

    Uma pena não dar pra personalizar mais os campos.
    Até tentei outras alternativas (ambas com tutorial aqui no FerramentasBlog. Danados vocês!)

    De todo modo, é uma ótima opção essa dica.
    Evita inscrições em sites de terceiros, resguarda seu email de mais spams e deixa sua conta menos vulnerável…
    Além de tudo é bem mais rápido de carregar (sem toneladas de scripts, referências externas etc.)

    Vi que vocês aqui no site usam formulário criado no Wufoo na página de contatos. Quais suas impressões?

    Responder

  44. Amigo to com uma duvida depois de tudo funcionou normal mais fui la e deletei o gadgets do contato e agora não funciona mais só pode ussa esse método com o gadgets Aparecendo ?

    Responder

  47. Marcos; no meu caso o formulário continua na sidebar; mesmo quando ele é adicionado (e aparece normalmente) na página estática. 🙁
    Sabe o por quê?

    Responder

    • UFA!!! Refiz todos os passos e depois desloquei o gadget do formulário da sidebar para o footer. Então deu certo! 😀

      Responder

  48. Bom dia amigo, excelente tutorial, aqui deu tudo certo, com uma exceção. Tentei efetuar o teste e após preencher os campos e clicar em enviar mensagem, aparece o status “Enviando…” e não sai dessa. Isso acontecia tb qdo o formulário de contato ficava na lateral. Enfim o que pode estar havendo?? Agradeço a força!

    Responder

  49. Oi Marcos Lemo, antes de fazer minha pergunta queria dizer que seu site está me ajudando bastante, gostaria de agradecer. Quanto a minha duvida, é o seguinte, como eu faço para que as mensagens desse formulário de contato seja enviada para um e-mail diferente.

    Responder

  51. Deu certinho! Obrigada!
    Porém onde ficava o formulário (na barra lateral) ficou o molde lá como tivesse alguma coisa mas não se vê. Era para ficar algum vestigio ou é o meu layout?

    Obrigada novamente!
    Raquel

    Responder

  58. Me guiei pelos números à esquerda, mas os códigos correspondentes não são iguais aos exibidos na postagem. Não conheço sobre códigos e encontrei neste site o que parecia um modo fácil de solucionar o problema, mas não funcionou. Vou ter que ler mesmo ?

    Responder

    • Regina,

      os números variam de acordo com cada layout. Siga o tutorial, lendo todo o artigo, para saber como proceder e encontrar os códigos no seu modelo.
      Tem que ler.

      Responder

  60. Excelente ferramenta, com certeza muito útil!!

    Porém aqui só funciona se o usuario enviar via PC;

    Se o envio for por dispositivo móvel, o botão enviar não carrega nada. Não importa quantas clicks, fica tudo na mesma, como se o botão enviar nao funcionasse..

    Alguém saberia me explicar porq?

    Responder

  62. Olá, preciso de uma ajuda, Consegui fazer tudo direitinho. na hora q testo, a mensagem é enviada mas não chega no meu e-mail..

    Responder

  68. Uauuuu… Obrigada!!!
    To apanhando pra ocultar da página inicial já tem uma semana e só consegui com sua ajuda!!!
    Do jeito que você explicou, fiz facilmente e foi super fácil.
    Obrigada!!!!!! Abç

    Responder

  69. Marcos, tu é simplesmente o MELHOR. Passei a tarde toda pesquisando um forma para fazer esse formulário funcionar na página e atá agora 16h28min não tinha conseguido. Muito obrigado por mais essa dica.

    Responder

  70. Boa noite Marcos. É o seguinte, fiz exatamente como no tutorial, fiz o primeiro teste e enviou normalmente o email. Agora não envia mais. Já fiz e refiz tudo novamente. O formulário não envia, não chega email. Já tentei enviar até pelo contato na sidebar mas mesmo assim não vai. Socorro!

    Responder

Deixe um comentário

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