[Serviços] - Como colocar um formulário de contato do Wufoo em um blog do Blogger

É de conhecimento de todos que a comunicação entre o autor de um blog e seus leitores é de extrema importância. Afinal de contas, o autor de um blog escreve para seus leitores. Geralmente a comunicação entre os autores e os leitores é feita através dos comentários do blog, mas em muitos alguns casos a área de comentários não é o lugar apropriado para se fazer a comunicação desejada. O que fazer nesses casos?

Wufoo - Construtor de Formulários Online

Bom, nesses casos o autor do blog deve fornecer um outro meio de comunicação para seus leitores. A comunicação poderia ser feita através de um e-mail, mas isso é pouco dinâmico e ágil. O mais apropriado nesses casos seria que o autor do blog fornecesse um formulário de contato à seus leitores. E é exatamente isso o que eu vou mostrar nesse artigo: como colocar um formulário de contato em um blog usando o serviço fornecido pelo site Wufoo.

O que é o site Wufoo?


O Wufoo é um site que tem como finalidade oferecer à seus usuários, ferramentas que possibilitem e facilitem a criação de formulários de contato para seus blogs/websites. Abaixo há um vídeo bem bacana (em inglês) que mostra toda a ideologia do serviço.



Criando uma conta no site Wufoo


Antes que você possa usufruir das ferramentas fornecidas pelo site, você deve fazer um cadastro bem rápido para criar uma conta. A criação da conta é bem simples e não demora quase nada! Abaixo há uma descrição do passo-a-passo para criar a conta.

1. Para criar sua conta acesse o endereço: http://wufoo.com/, e em seguida clique no botão Sign Up for Free. Após clicar no botão, você será direcionado para uma página como a mostrada na imagem abaixo. Preencha os campos solicitados e clique no botão Create Account para criar sua conta.


Criando um formulário de contato


Agora que você já possui uma conta no site Wufoo, veremos como criar um formulário de contato. Os passos para criar o formulário são tão simples quanto os passos para criar a conta.

1. Clique no botão New Form, que está localizado no canto superior direito do seu painel de controle, e você será direcionado para uma página onde haverá diversas ferramentas que permitirão que você crie o seu formulário de contato.

1º Passo - Add a Field (Adicionar campos)


O primeiro passo, como mostra a imagem abaixo, consiste em adicionar os campos que você quer ao seu formulário. Você pode adicionar os campos desejados, fazendo um simples clique sobre eles, ou clicando e arrastando-os até a área branca do seu formulário.


Existem diversos tipos de campo para escolher, mas alguns só podem ser usados por quem tem uma conta paga no site Wufoo, como é o caso do campo File Upload, que permite que as pessoas possam anexar arquivos ao formulário.

INFORMAÇÃO: eu recomendo que você adicione ao seu formulário de contato o campo pré-definido (Fancy Pants): Email, pois assim, quando você for responder a um e-mail enviado através do formulário, a resposta será enviada diretamente para o e-mail que a pessoa inserir nesse campo.

2º Passo - Field Settings (Configuração dos campos)


O segundo passo, como mostra a imagem abaixo, consiste em configurar todos os campos que foram adicionados ao formulário de contato no passo anterior.


As opções de configuração desse passo variam de acordo com o tipo de cada campo que está sendo configurado, por isso, vou explicar somente as principais.
  • Field Label: nesta opção você deve informar o título do campo (Nome, Telefone etc.);
  • Field Type: esta opção permite que você mude o tipo do campo;
  • Field Size: esta opção permite que você mude o tamanho do campo;
  • Required: esta opção adiciona um asterísco vermelho após o título do campo, que indica que o mesmo é obrigatório, ou seja, se a pessoa não preenchê-lo o formulário não será enviado, e ela verá uma mensagem de erro;
  • Predefined Value: este campo permite que você adicione uma frase padrão dentro do campo, e para que a pessoa possa preenchê-lo deverá apagar o que está escrito;
  • Instructions for user: este campo permite que você adicione uma dica de como o campo deve ser preenchido, ou seja, quando alguém selecionar um campo para preencher, ao lado do mesmo aparecerá um pequeno balão com a dica que você escreveu.

3º Passo - Form Settings (Configuração do formulário)


O terceiro e último passo é semelhante ao passo anterior, mas ao invés de configurar os campos do formulário, você deverá configurar as opções do formulário em si.


Assim como no passo anterior, eu explicarei somente as configurações principais dessa tela.
  • Form name: você deve colocar um nome para o seu formulário;
  • Description: você pode usar este campo para fazer uma descrição do seu formulário e/ou para dar dicas, como por exemplo: "os campos com * são obrigatórios". Essa área aceita tags HTML e CSS, o que permite que você customize as informações inseridas;
  • Language: nessa opção você deve escolher o idioma do seu formulário (as mensagens de erro e outras opções aparecerão no idioma escolhido);
  • Label Placement: nessa opção você pode escolher o alinhamento do título dos campos;
  • Confirmation options: nessa opção você pode escrever uma mensagem que será mostrada ao leitor, quando o formulário for enviado, como por exemplo: "sua mensagem foi enviada com sucesso, responderemos assim que possível".

3. Após ter passado pelos três passos e estar satisfeito com seu formulário, basta clicar no botão Save Form. Em seguida algumas opções aparecerão, clique na segunda opção: Setup e-mail notifications for this form.

4. Após ter clicado na segunda opção, você será direcionado para uma página onde poderá escolher como deseja receber as notificações de novos contatos: através de e-mail, através do seu celular, Twitter etc. Neste tutorial, iremos configurar as notificações de novos contatos para serem entregues pelo método tradicional (através de um e-mail - to My Inbox).


  • Your E-mail Address: nesse campo você deverá informar o endereço de e-mail onde você deseja receber os formulários que forem enviados por seus leitores;
  • Set Reply To: nesse campo você deve informar para quem deve ser enviado o e-mail quando você responder. Como eu indiquei no 1º Passo, é interessante que você adicione o campo pré-definido "Email", assim você poderá escolhê-lo e as respostas serão enviadas diretamente para o e-mail que a pessoa forneceu nesse campo.

Essas são as duas principais configurações que devem ser feitas, mas você pode ainda escolher quando receber notificações marcando/desmarcando as opções "New Entries" e "New Comments", assim como, pode configurar o assunto do e-mail e sua aparência, clicando no botão Customize Notification Email.

5. Após ter configurado as notificações, clique no botão Save.

Inserindo o formulário em um blog do Blogger


Agora que o formulário de contato já está criado e configurado, está na hora de adicioná-lo ao blog para que os leitores possam, através dele, entrar em contato. Para isso, basta seguir os passos abaixo.

1. Para inserir o formulário no blog, você deve obter o código do mesmo, então clique na aba "Forms" localizada no topo do painel de controle, e depois clique na opção "Code" do formulário desejado.

2. A página será atualizada e mostrará vários códigos que podem ser usados para inserir/divulgar seu formulário. Para colocar o formulário no blog, clique na aba Embed Form Code e copie o código do campo Iframe Version, como mostra a imagem abaixo.


3. Depois de ter copiado o código, faça login no Blogger e acesse o painel de controle do seu blog, vá no menu Páginas e em seguida clique no botão Nova página. Escolha a opção Página em branco, dê um título para essa página, como por exemplo, "Contato", "Fale conosco", "Feedback" etc., e cole o código do formulário no campo de conteúdo da página.

4. Para finalizar, clique no botão Publicar e pronto!

DICA: se preferir, você pode adicionar o formulário dentro de um artigo ou em qualquer outro lugar que aceite HTML, como por exemplo, diretamente no template ou no gadget HTML/JavaScript.

Agora o seu formulário já estará disponível para que seus leitores entrem em contato com você.

Prós do serviço


  • Permite a criação de contas FREE (grátis);
  • Cadastro rápido, simples e fácil;
  • Permite total customização das fontes e aparência do formulário;
  • Ferramentas de fácil utilização para criação dos formulários;
  • Ferramentas com dicas de utilização e finalidade;
  • Galeria com diversos modelos de formulários já prontos para serem utilizados;
  • Estatísticas de utilização do formulário;
  • Possui fórum para esclarecimento de dúvidas (em inglês);
  • Diversas opções para ser notificado de novos contatos;
  • Possibilidade de criar regras condicionais no formulário.

Contras do serviço


  • Contas FREE (grátis) só podem criar 3 formulários de contato;
  • Contas FREE (grátis) só permitem 10 campos para cada formulário;
  • Contas FREE (grátis) só permitem 100 contatos por mês;
  • Algumas ferramentas estão disponíveis apenas para contas PREMIUM (pagas).

Se você gostou deste artigo, achou ele útil ou ficou com dúvidas, sinta-se a vontade para participar postando um comentário.

Atualização — 11.08.2011 às 11h55
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger, e para facilitar os passos do tutorial.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 3 comentários neste artigo!

  1. Igoooooooooooooooor
    Que tudo de bom....ameeeeeeeeeeeeeeeei !!!!!!!!!!
    Esse eu consegui concluir com facilidade rs !!!!!!!!!!!
    Ficou lindo e práticoooooooo !!!
    Obrigadaaaaaaaaa !!!
    Beijos

    ResponderExcluir
  2. Ana, querida!!
    Rsrs, optou pelo formulário de contato né... realmente é mais prático para o que você pretende fazer!! (seja lá o que for, rsrs)

    Magina, sempre que precisar! ;)
    Grande beijo.

    ResponderExcluir
  3. Igor, tudo de bom seu blog. Aproveitando as dicas por aqui.
    Parabéns!!!

    ResponderExcluir