Criar Pagina de Contato no Blog com o Gadget Formulário de Contato

É possível fazer uma pagina de contato no blog usando o novo gadget de formulário de contato do Blogger. Normalmente esse acessório é para ser utilizado na sidebar (barra lateral) do blog, mas a maioria dos blogueiros prefere usar o formulário de contato numa pagina estática do blog, mas por enquanto ainda não existe essa opção no Blogger, mas podemos fazer isso mexendo em algumas linhas de HTML do formulário de contato.

Criar Pagina de contato no blog com o Gadget Formulário de Contato

Fazer uma pagina de Contato no Blogger

O primeiro passo para criar uma pagina de contato no seu blog é adicionar o novo gadget oficial com formulário de contado do blogger. Depois disso entre na pagina modelo, faça um backup do seu template e localize o trecho do HTML do formulário de contato.

Para achar o código HTML use o Ctrl F ou simplesmente clique no menu suspenso "ir para o gadget". Nestas duas opções você deve procurar por ContactForm1, clicar nas setinhas laterais para expandir o HTML do blogger e apagar as linhas de código que estão depois de <b:includable id='main'> e antes de  <b:include name='quickedit'/>, mas não apague essas linhas que mostramos você deve apagar somente o que está entre elas.

HTML do Blogger

Clique para salvar as alterações no modelo, crie uma pagina estática no seu blog usando esse código:

<style type="text/css">
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-button-submit {
width: 100%;max-width: 100%;
margin-bottom: 10px;
}
.contact-form-button-submit {
width: 100%;
font-size: 12pt;
height:40px;
float: right;
color: #000;
}
</style>
<form name='contact-form'>
Nome
<br/>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value=''/>
E-mail
<span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email'type='text' value=''/>
Mensagem
<span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/>
<div>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

Não se esqueça de colocar o titulo da pagina de contato, além disso, veja nas opções da pagina se está marcado para executar o HTML (interpretar HTML digitado). Clique em publicar e já está concluído.

Opções de Postagens do Blogger

Personalizar Formulário de Contato no Blogger

Você notou que o inicio do código que usamos na pagina estática tem um estilo CSS (código para formatar texto e paginas):

E desta forma pode ser alterado como você desejar, ou seja, você pode trocar as cores e tamanho da fonte, colocar cores de fundo ou bordas, veja os links abaixo:
Código das Cores
Colocar ou alterar as bordas
Formatação Especial nos Textos das Postagens

Lembrando que a caixa do formulário de contato é o estilo: .contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-button-submit

E o botão enviar é .contact-form-button-submit, portanto você pode modificar isso como desejar para que combine melhor com o seu template.

Com isso já está tudo pronto e seu blog já tem uma pagina de contato personalizada usando o gadget padrão do blogger para que seus visitantes possam enviar mensagens (email) diretamente para você. E aproveitando que o assunto é aumentar a comunicação com seus visitantes veja também:
O que as Pessoas Gostam e Procuram em Blogs e Sites
Quais os Melhores Assuntos para Blogs: o que Faz mais Sucesso
Diversas Enquetes sobre Blogs
Verificar e Corrigir Erros e Problemas Comuns em Blogs

Para terminar apenas um aviso embora no lugar que adicionamos o gadget na sidebar do blog não apareça nada você não pode retirar o gadget, pois ele ativa alguns códigos que permitem o envio do formulário de contato, ou seja, se apagar o gadget o formulário continuará aparecendo na sua pagina de contato, mas não funcionará.

22 comentários:

  1. Oi queria saber se vcs podiam fazer mais dicas sobre blogs de esportes.Obrigado min ajudem porfavor vlw!

    ResponderExcluir
  2. nossas dicas são para blogs de forma geral... quando você diz dicas para blogs de esporte está pensando em algo em especifico? tentou fazer algo que não deu certo?

    ResponderExcluir
  3. Perfeito :)

    Agora é só aguardar que a blogger não se fique por aqui, e continue a contemplar os blogueiros com melhorias nos gadgets mais importantes, e que também crie outros mais gadgets essenciais e de suporte ao blogueiro.

    E assim vá dando ainda mais trabalho ao Sr. Fabiano :D

    ResponderExcluir
  4. Amigo eu gostei da dica sempre acesso esse site. So que eu queria que vc postasse um tutorial de como colocar postagens relacionadas igual nesse template http://ver524.blogspot.com , eu preciso muito disso e nao tenho como usar o linkwhit e nem consegui com outros codigos (NENHUM DEU CERTO). Se vc puder pesquisar os codigos nesse template e postar em um tutorial eu ficarei muito grato!
    Mas tem que ser desse template pois é ideal e tem ate imagens por favor.
    LINK DO TEMPLATE http://www.templateparablogspot.com/2013/01/template-para-blog-de-filmes-online.html

    ResponderExcluir
  5. Paulo pode usar os posts relacionados do nrelate que fica bem parecido com esse que você falou.

    Postagens Relacionadas do nrelate

    não tenho código igual aquele e não tem como pegar diretamente no blog porque o blogger altera o html na hora de publicar

    ResponderExcluir
  6. Fabiano,

    Você sabe como colocar um template diferente do padrão da sua página num blog.

    Tipo: Eu entro na página Contato > ai aparece outro template.

    ResponderExcluir
  7. Pablo
    não tenho códigos nem tutorial para isso mas é possível fazer.

    veja aqui:
    Conteúdo diferente nas paginas do blog

    a idéia seria criar outro template usando as condicionais <b:if cond ....

    mas isso envolve praticamente criar dois templates ou seja as chances de erro são enormes.

    talvez seja mais vantagem criar outro blog e fazer nele somente sua pagina de contato usando outro template.

    ResponderExcluir
  8. Valeu, Fabiano, deu certinho. Abraço!

    ResponderExcluir
  9. Muito Obrigado Fabiano!
    Fazer isto serio complicado mesmo!

    ResponderExcluir
  10. Bom dia Fabiano, estou tentando editar o formulário de acordo com minha necessidade.. consegui adicionar os campos que preciso, porém, não sei como deixo um campo obrigatório.
    Do jeito que fiz apenas se o e-mail e a mensagem forem preenchidos já é o suficiente para enviar.
    Você sabe me dizer como faço para tornar outros campos obrigatórios?

    Obrigado

    ResponderExcluir
  11. esse formulário não tem como alterar os campos você tem que usar como é fornecido pelo blogger

    ResponderExcluir
  12. Não consegui configurar, como faço?

    ResponderExcluir
  13. Marcelo você adicionou o gadget? e apagou o trecho de código que mostramos?

    depois disso não pode excluir o gadget senão o formulário não funciona.

    ResponderExcluir
  14. Eu consegui criar um formulario, mas não consigo colocar no menu contato e nem mandar a resposta pro meu e-mail..

    ResponderExcluir
  15. precisa colocar o código em uma pagina extra e usar o link desta pagina no menu

    ResponderExcluir
  16. Obg Fabiano, consegui colocar, mas o q eu tinha feito antes com um código HTML q vc ensinou aqui tava mais bonitinho, porém não conseguia fazer o formulario ficar na pagina estática, nem tinha uma, e nem mandar pro meu e-mail ..

    ResponderExcluir
  17. Roberta então crie uma pagina estatica e coloque o código que mostramos nela.

    depois que alterar esse trecho código do gadget do formulario você não pode excluir o gadget. Ele ficará invisível nas paginas do blog, mas o código dele que permitirá o funcionamento da pagina de contato que você criou.

    o email que você receberá as mensagens é o seu email padrão da conta google que usa no blog

    ResponderExcluir
  18. Gostaria de adaptar este código no meu site não estão conseguindo, o que posso fazer?

    ResponderExcluir
    Respostas
    1. também é possivel criar o formulario no
      https://drive.google.com/

      e depois pegar o código e colocar no blogger

      Excluir