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!