6 modelos personalizados para formulário de contato - * Blog Elaine Gaspareto *

6 modelos personalizados para formulário de contato

Publicado em 25/07/2018

Tempo de leitura:

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!





6 comentários via Blogger
comentários via Facebook

6 comentários:

  1. Amei! estava precisando mesmo. Obrigada. Amo seu blog. Ajuda demaaaais!

    ResponderExcluir
  2. Elaine, quero agradecer pelo tuto, pois leu meus pensamentos! Fico muitas vezes impressionada pelo nível que alcançou começando do zero. Você merece todo sucesso que conquistou e que cada vez mais aumente sua influência!! Beijosss

    ResponderExcluir
  3. Oi Elaine, obrigada pelo tutorial. Na página tá certinho, mas o formulário de contato ainda está aparecendo no blog, o que eu faço?
    http://www.blogfofocandosobrelivros.com/

    ResponderExcluir
    Respostas
    1. Vc acrescentou o código que esconde o formulário? O que tem display:none;

      Excluir
  4. Oi Elaine,

    Mais uma vez tenho que te agradecer pela paciência e generosidade em trazer essa preciosa ajuda para melhorarmos nossos blogs. Já implementei um destes formulários (o antigo que eu tinha no blog não estava mais funcionanado) e está tudo certinho.
    Ontem instalei no blog um novo layout feito todinho pelo passo a passo que você ensinou, desde o zero. Amei aprender um pouco mais e poder dizer: eu que fiz!!

    Beijos e te desejo saúde e sucesso, sempre!

    Patrícia

    ResponderExcluir
    Respostas
    1. Patrícia, que delícia de comentário!
      Fico extremamente feliz que tenha conseguido!
      Dá uma satisfação imensa saber que sim, a gente consegue, né?
      Parabéns!
      beijosssss

      Excluir

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…