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:
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:
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:
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:
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!
Oi Elaine!Gosto de ver tuas dicas sobre os blogs .Pena que eu seja muito leiga nestas questões.e saiba usa-las.Beijos
ResponderExcluirBom dia flor!
ResponderExcluirConhecendo 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
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?
ResponderExcluirUma vez gerada a url não é possível mais alterá-la. Mas vc pode copiar sua postagem do fale conosco, via html, apagá-la e criar uma nova, com novo título. O titulo que vc colocar será o link.
Excluirficou muito legal, muito obrigada Elaine
ResponderExcluirMuito 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.
ResponderExcluirAdoro suas dicas, mas esse não conseguir fazer não acho isso = }]]>
ResponderExcluirBom dia, Elaine. Amei o tutorial.
ResponderExcluirAcabei de personalizar a minha página de aviso de erro "404-página não encontrada" e queria muito adicionar o formulário de contato nela, para facilitar aos visitantes me comunicarem links quebrados. Ficou perfeito, bem como na página específica de "Contato".
Muito obrigada, Gisele.
Nossa, me ajudou muito! Obrigada pela dica.:)
ResponderExcluirMeu blog - https://maryellemilen.blogspot.com.br/
Oi Elaine muito obrigada super combinou com meu layout novo, beijos !!
ResponderExcluirOlá, estou começando agora nessas coisas de blog e o seus tutoriais tem me ajudado muito :D
ResponderExcluirmas não entendi uma coia. Como eu mudo a cor do formulário da pagina estática (aquela parte em rosa)? Procurei o destaque em capslock, mas não achei :(
Srta. De Cheshire, todas as cores são precedidas do sinal # e definidas por um código hexadecimal.
ExcluirLocalize no código css todas as áreas referentes às cores e altere-até ficar como deseja...
Olá Elaine, Sempre sigo suas dicas, são SHOWWWWWW.
ResponderExcluirMas na página estática, não consegui mudar a cor do background que originalmente é rosa. qual o a parte do código onde ele está?
Agradeço.
Procure por #f60347 e troque, por exemplo, para #000000 para ficar preto.
ExcluirMuito bom. Obrigado.
ResponderExcluirNão funcionou incorporando na página. Refiz e não deu certo mesmo.
Troquei o rosa pelo preto, ficou bonito, mas não funcionou :-(
Dei uma alargada no Botão enviar #ContactForm1_contact-form-submit {
width: 95px; (coloquei 105px - ficou melhor), mas não funcionou :-( :-(
Rodrigo, como vc viu no meu blog de testes, está normal.
ExcluirTalvez tenha algo em seu blog que cause algum conflito...
E se estiver usando um dos templates responsivos novos do Blogger (Comtempo, Soho, etc) ou um dos modelos de Visualização dinâmica também pode não funcionar...
Sim, eu vi. O meu é www.comprandoemorando.com mas já tirei.
ExcluirTem em no blog de uma comentarista aí em cima que fui lá testar e também não funcionou: http://www.iinspiradas.com/p/contato.html?m=1