Pular para o conteúdo principal

Formulário de contato no blogger com o google docs

Como o blogger ainda não incluiu um formulário de contato nativo, temos que adaptar algumas maneiras para que isso seja feito. Há alguns tutoriais na web com widgets e serviços que funcionam de forma satisfatória, porém, neste tutorial, irei ensinar como usar o próprio google para realizar essa tarefa.


Google docs

O googledocs é uma suite de aplicativos assim como o Microsoft Office e o BrOffice (gratuito), com a vantagem de funcionar online direto do browser e de ser gratuito.

1º passo

Acesse o site do Google docs e faça seu login.
Fomulário de contato no blogger com o google docs

2º passo

Clique em criar novo e selecione formulário.

Fomulário de contato no blogger com o google docs

3º passo

Neste passo, iremos configurar nosso formulário. Entenda a estrutura e como irá funcionar:

Fomulário de contato no blogger com o google docs
Nosso formulário terá 4 campos sendo eles: Nome, Email, Site e Mensagem.

Os dois primeiros campos da imagem acima que eu não numerei são auto explicativos. Você define um título e se quiser um texto de informação sobre o formulário.

  • 1- Define o texto do campo. Deixe-o como nome.
  • 2- Texto adicional, que pode ser usado como observação ao usuário. Escreva (obrigatório).
  • 3- Define o tipo do campo, se é texto, número e etc. Deixe-o como está.
  • 4- Define que é obrigatório o preenchimento do campo. Caso contrário, se o usuário não escrever nada e esse campo não tiver sido marcado, o conteúdo será enviado em branco.
Após configurar nosso primeiro campo clique em concluído. Repita esse processo nos 3 primeiros campos. No último campo, que será o de mensagem, basta substituir o passo 3 de texto para texto do parágrafo. Observação: Por padrão, o google já adiciona 2 campos para que possamos editar. Para adicionar novos campos é só acessar adicionar item e selecionar o tipo desejado.

Após o término da configuração, teremos algo como isto:
Fomulário de contato no blogger com o google docs

4º passo

Com o formulário pronto é só incorporar em nossa página no blogger. Clique no botão mais ações e selecione incorporar.

Fomulário de contato no blogger com o google docs
Copie o link da janela.

Fomulário de contato no blogger com o google docs
Com o link copiado, vá até seu o blogger, crie uma página estática e adicione o link na postagem. Salve e veja o resultado.

Abaixo o resultado aqui no blog.

Fomulário de contato no blogger com o google docs Formulário aplicado no Crianerd.
As mensagens enviadas por este formulário irão parar o seu arquivo salvo no google docs. Para ver as mensagens, basta abrir o documento correspondente ao formulário e checar se alguém lhe escreveu.

Fomulário de contato no blogger com o google docs Painel com as mensagens enviadas pelo formulário.
Diga-me o que achou e se lhe foi útil. Deixe sua dúvidas nos comentários para que eu possa ajudar.

Update 09/13

O usuário FAMA deixou a dica de como ser notificado ao receber uma mensagem, confira:

No Google Docs, clique no seu formulário e Selecione no menu Tools -> Notification Rules / Ferramentas -> Regras de Notificação, clique Um usuário enviou um formulário / A user submits a form Notify me with - Me notificar por Por email Imediatamente / email - right away

Comentários

  1. Simples é funcional. Amo muito tudo isso.

    ResponderExcluir
  2. @Anônimo - Uso o google docs justamente por isso. Acho simples e serve ao propósito. Obrigado pela visita e pelo comentário.

    ResponderExcluir
  3. @Clube da Educação - Que bom que gostou.

    ResponderExcluir
  4. Complementando o ótimo post.

    Você pode receber um aviso por email se alguém enviar um formulário para você. Siga os passos abaixo (Não sei a tradução exata para o português, mas deve ser algo próximo disso).

    No Google Docs, clique no seu formulário. ele vai abrir a tabela e lá Selecione no menu

    Tools -> Notification Rules / Ferramentas -> Regras de Notificação

    Clique
    Um usuário enviou um formulário / A user submits a form


    Notify me with - Me notificar por
    Por email Imediatamente / email - right away

    ResponderExcluir
  5. Parabéns Helder pelo Post,
    e tbm ao @FaMa, que o completou muito bem, chegando ao ponto que iria perguntar. Parabéns

    ResponderExcluir
  6. Thiago - Obrigado amigão. O fama complementou muito bem mesmo. Vou atualizar o post e incluir o complemento dele.

    ResponderExcluir
  7. Helder

    Adorei seu tutorial, mas quando posto o fomulário fica grande no blog. Como faço pra ficar ajustado a página?

    Eliza Braga

    ResponderExcluir
  8. Obrigada pelas dicas, foram muito úteis. E o Fama tb ajudou...

    ResponderExcluir
  9. Foi utilissimo,vc salvou minha pele

    obrigada

    ResponderExcluir
  10. Cara, agora você salvou a pátria... VAleu!

    ResponderExcluir
  11. Parabens.

    Foi-me mesmo muito util.

    Obrigadão

    5*****

    ResponderExcluir
  12. Nossa,
    tava me batendo toda pra colocar no blog
    suas dicas foram otimas
    muito obrigado!

    ResponderExcluir
  13. Finalmente um formulário bom para o meu blog! Muito obrigada! Ótimo post =]

    ResponderExcluir
  14. muittoooo bommmm .. ja coloquei no meu site XD
    obg

    ResponderExcluir
  15. Muito obrigada pelas dicas! Super bem explicado, vc está de parabéns!!!

    ResponderExcluir
  16. Otimo, me ajudou bastante, adorei. Beijos

    ResponderExcluir
  17. Muito obrigada pelas informações que encontrei aqui.
    Tentei em outros lugares e só consegui aqui.

    ResponderExcluir
  18. Olá amigo,
    gostei muito do tutorial, porém na hora de posta-lo em meu blogspot. exibe o erro 404 e no local da caixa aparece a tag do link. poderia me dizer o que pode ser? Desde já agradeço.
    Abração

    ResponderExcluir
  19. Ajudou muito...
    pode seguir ?
    www.garotasasolta.blogspot.com
    já estou seguindo !

    Um abraço

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Criando um layout simples com HTML e CSS

Deixe a barra de tarefas do windows 7 igual a do xp

Elegante menu azul no photoshop