Como usar e personalizar o Formulário de contato nativo do Blogger?

em 30 de novembro de 2016

Como usar e personalizar o Formulário de contato nativo do Blogger?


Olá, pessoas!
No tutorial de hoje nós vamos aprender como personalizar um dos gadgets mais subestimados do mundo dos gadgets: o formulário de contato nativo do Blogger.

Ele foi lançado há algum tempo mas por ser bem básico e muita gente não conseguir personaliza-lo ou usa-lo em uma página ele meio que ficou desprezado, relegado ao esquecimento (ô drama) e isso é injusto porque ele funciona muito bem e  tem a vantagem de não precisar criar conta em sites que geram formulários.
Sem contar que, em geral, a versão free desses sites que geram formulários impõem um limite mensal de envios, né?

Mas o formulário de contato nativo do Blogger não impõe limite, funciona, pode ser personalizado e pode sim ser usado em uma página caso você prefira ao invés de usar como elemento de página.
E mais!
Se quiser dá pra usar dos dois jeitos, com personalizações iguais ou diferentes.
Quer um exemplo?
Olha:

Demonstração do tutorial



Vamos aprender?
Antes, algumas considerações importantes:

➧ O endereço de email que receberá as mensagens é seu email que gerencia sua conta Google/Blogger. Não, não tem jeito de mudar.
➧ Também não tem como acrescentar mais campos ao formulário. Será Nome, Email e Mensagem. Sempre.
➧ Dá para usar o formulário na sidebar, no rodapé e em uma página estática tipo a minha do blog de teste, Contato. Não consegui fazer funcionar em um post.

Ressalvas feitas, vamos trabalhar?



Como colocar o formulário de contato no blog?



Para começar você precisa inserir o formulário de contato em seu blog.
Vamos supor que você queira colocar um na sidebar e um dentro de uma página estática Contato, por exemplo.
Então você precisará inserir 2 vezes o gadget Formulário de contato.
Faça assim:

Vá ao painel do blog onde vai inserir os formulários e clique em Layout.
A seguir clique em Adicionar um gadget e na janela que abrir clique em Mais gadgets, que aparece à esquerda. Assim:


Aí é só salvar.
Vai aparecer do modo padrão, simples.
Repita a operação caso queira incluir o formulário também em uma página.
Isso feito, vamos personalizar?



Personalizar o formulário de contato do Blogger para sidebar (coluna lateral)



Vá ao painel do blog e clique na aba Modelo. A seguir clique em Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F.
Na barra de busca que aparecer digite  }]]></b:skin> e tecle Enter para localizar.
Acima disso cole esse código:


Copiar o código

Salve.
O resultado será exatamente como está no meu blog de testes, na sidebar.
Deixei marcado em letra maiúscula no código todas as áreas personalizáveis. Altere por sua conta e risco, ok?
Observe que pode mudar cores e tamanho da fonte do botão, além de largura, fundo, etc; é bem simples e fácil.



Personalizar o formulário de contato do Blogger para página



Agora vamos aprender como colocar esse formulário de contato nativo do Blogger em uma página.
O resultado será esse:


Demonstração do tutorial


Para começar confira se fez o que expliquei antes: ir ao modo Layout e adicionar o formulário de contato. Precisam ser dois, lembra? Um para a sidebar e outro para a página.
Fez isso? Então vamos personalizar.
Calma, por enquanto ambos os formulários aparecerão na sidebar.
Deixe assim.

Aí então abra a página com os códigos que vamos usar. Deixe aberta pois vai precisar copiar ambos os códigos:


Copiar os códigos


Vá ao painel de seu blog e clique em Páginas.
A seguir clique em Nova página.
Quando o editor de páginas abrir clique em HTML, no alto do editor.
Aí cole o CÓDIGO HTML que está na página dos códigos.
Altere as palavras Nome, Email, Mensagem e Fale comigo, se desejar.
Depois de pronto clique em Publicar.


A seguir volte ao modo Modelo de seu blog e clique em Editar HTML.
Tecle, dentro do código-fonte, Ctrl+F e na barra de pesquisa digite }]]></b:skin>.
Localize e acima disso cole o CÓDIGO CSS que está na página de códigos.
Salve.
Você poderá personalizar quase tudo nesse código: cores, fontes, cor de fundo, etc.
Deixei tudo marcado em capslock, ok?
Aí é só ir mexendo e se divertindo.

Bem legal, né?
Aproveitando que estamos aqui você não poderia clicar em Curtir/Compartilhar nos botões abaixo?
Eu fico muito agradecida :)
Enjoy!


Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

5 comentários , comente também!

  1. Oi Elaine!Gosto de ver tuas dicas sobre os blogs .Pena que eu seja muito leiga nestas questões.e saiba usa-las.Beijos

    ResponderExcluir
  2. Bom dia flor!
    Conhecendo seu blog e já seguindo pra não perder suas novidades! Quando puder dá uma olhada no meu cantinho!

    PS: Durante esse mês teremos post novo no todo dia!
    Beijos!!!
    Meu cantinho Blog A primeira Casa
    Estou no Facebook com Minhas Inspirações

    ResponderExcluir
  3. Estou sempre olhando as suas dicas! Com a de hoje estou tendo um pouco de dificuldade: como faço para personalizar o link da página nova que estou criando? Não avhei campo para isso. Quando criei ficou como .../p/fale-comigo-comments-blog-pager.html. Queria mudar para apenas .../p/contato.html. Alguma dica extra?

    ResponderExcluir
  4. Muito bom. Eu tava procurando mesmo um jeito de colocar esse formulário em uma página estática, mas não achei que fosse possível. Valeu pela dica.

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…