Header Ads Widget



 


 

6 modelos personalizados para formulário de contato

 6 modelos personalizados para formulário de contato

Ter um formulário de contato ativo e funcionando é indispensável para quem deseja ter um blog funcional e bem organizado.
Existem algumas opções gratuitas, e inclusive eu já mostrei aqui no blog, recorde: Formulário de contato gratuito para blog
Mas existe uma forma mais limpa, mais leve, e mais segura de ter um formulário de contato no blog, e o melhor: sem depender do serviço de terceiros.
Falo, claro, do formulário de contato nativo do blog.

Por padrão costumamos inserir esse formulário de contato na sidebar do blog, mas vou ensinar hoje um jeito de inserir-lo dentro de uma página, ou até mesmo dentro de uma postagem. São 6 modelos diferentes, nos quais você poderá personalizar cores e fontes. Veja os modelos (clique sobre a imagem e veja ao vivo):


Vamos aprender o passo a passo? Vem comigo!


Como personalizar o formulário de contato nativo do Blogger?


Para começar é preciso que o gadget Formulário de contato nativo do Blogger seja adicionado ao seu blog. Faça assim:
Acesse a aba Layout e clique em Adicionar um gadget. Dentre as opções escolha Formulário de contato, salve, arraste para o fim da sidebar e salve.
Agora vamos oculta-lo.

 Acesse a aba Tema de seu blog e clique em Editar HTML.

Dentro da caixa do código-fonte tecle Ctr+F e na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima de ]]></b:skin> cole esse código:



E salve.
Estamos prontos para implementar o formulário que você escolher dentro de uma página estática.
Faça assim:
Selecione o modelo que deseja e copie o código dele.




Escolher o modelo e copiar o código



A seguir vá até o painel de seu blog e clique em Páginas.
Clique em Nova página. Nomeie a página (faça isso antes de colar o código, para que a página tenha um título amigável para SEO) e depois clique em HTML, no alto do editor de postagem; isso vai colocar o editor em modo HTML.
Cole aí o código do formulário que você escolheu.
Faça ajustes em cores e fontes, se desejar, e depois de pronto clique em Publicar.
Está feito.
As mensagens enviadas através desse formulário aparecerão em seu email que comanda a  conta administrativa do blog onde o formulário estiver inserido.


Dicas extras:


  1. Não é possível inserir mais campos no formulário, ao menos não por enquanto.
  2. Os modelos são responsivos, portanto caso seu blog seja responsivo o formulário vai se adequar.
  3. Não esqueça: as mensagens serão enviadas automaticamente para seu email Gmail que comanda a conta do blog. se não estiver na caixa de entrada procure na aba Social.
  4. Cores podem ser alteradas na parte do código que começa com <style. Precisa ter um certo conhecimento em CSS mas basicamente toda cor é definida por um código hexadecimal precedido do sinal #. 
  5. E fontes são alteradas no comando font:
  6. Leia o código, experimente entender o que cada item faz. Só assim você ganhará prática e aprenderá. Não espere um código sempre comentado, leia os comandos, vá mexendo, tente de novo se der ruim. É assim que a gente aprende e ganha confiança para coisas mais avançadas.
E terminamos!
Se tiver qualquer dúvida relativa ao tutorial diga nos comentários e eu ajudo assim que possível.
Enjoy!

Postar um comentário

0 Comentários