Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Ferramentas Vanessa S.

Wufoo – Formulário de Contato para blog

UPDATE Janeiro/2011:
O wufoo não está mais disponibilizando o plano gratuito para novos formulários de contato. Apenas os formulários antigos continuam disponibilizados normalmente pelo Wufoo. Portanto, se você já tinha uma conta no wufoo, não se preocupe que o site não irá retirar do ar os formulários antigos já cadastrados.

Sugiro que você confira outro artigo sobre formulário de Contato:
Criar um Formulário de Contato no Google Docs

Para utilizar este serviço é necessário se cadastrar no site. Acesse o site Wufoo.com e clique em “Sign Up for Free” e siga as instruções para fazer seu cadastro.
Após cadastrado, aparecerá uma página para configuração.

Criando os campos no formulário:

Em “Standard” aparecem os icones que são os ítens que poderão ser adicionados ao seu formulário.

1. Clique em “Single line text” para criar o 1º Campo, que serão as perguntas que deverão ser respondidas pelos visitantes que quiserem entrar em contato.

2. Para editar o nome (que por padrão é ‘untitled’) clique em cima da caixinha “untitled” que irá paracer um campo ao lado para edição.
Escreva o Titulo da pergunta em “Field Label“.
3. Em “Instructions for User” escreva o texto que você quer que apareça a seus visitantes quando selecionada uma pergunta. É o texto que vai aparecer dentro da caixinha ao lado do campo.(Exemplo: ‘Digite aqui seu nome’)

4. Volte na aba “add a field” e repita todo o procedimento para criar outro campo.
Para quantos forem os campo de perguntas que você queira criar, basta repetir o mesmo procedimento, sempre clicando em “Single line text” para criar um novo campo. Não esqueça de ir editando os titulos de seus campos criados.

5. Se quiser que o preenchimento do campo seja obrigatório, clique em “Required” em cada um dos campos que você deseja que sejam obrigatórios.

6. A criação do campo para mensagem já é um pouco diferente, pois por ser um campo onde o seu leitor terá que digitar um texto de mensagem, necessita que seja estipulado nele quantos caracteres suportarão no máximo.
Para criar o campo para “Mensagem”, ao invés de clicar em “Single line text”, você deve clicar em “Paragraph Text“.

7. Para editar o titulo e incluir uma mensagem que queira que apareça como orientação, siga o mesmo passo para edição.

8. Agora clique em “Save Form“. Você será redirecionado a outra página, clique na 2º opção dela:

Inserindo o formulário no seu blog:

Para obter o código do formulário que você criou, clique em “code” e copie o código “embed” fornecido.
Crie uma nova postagem ou crie uma página estática com o titulo “Formulário de Contato” e cole o código dentro do editor de postagem do blogger, pela aba “editar html
Desta forma o formulário irá aparecer dentro da página estática.

Se você não quiser utilizar o formulário dentro de uma postagem no seu blog, não utilize o código do tipo embed, você pode utilizar a url que irá apontar para o formulário e colar essa URL diretamente em um botão no seu menu.
Para isto copie a url fornecida e cole esta url diretamente no seu menu.
Se quiser que o formulário abra em outra aba, você deverá acrescentar a tag ‘target=’_blank’ ao link, desta forma:
<a href=’link-aqui/’ target=’_blank’>

Como ler as mensagens recebidas através do formulário:

1) Você pode ler as mensagens diretamente no seu email.
Configurar o email para recebimento das mensagens enviadas através do formulário:
Configure em qual email você deseja receber as suas mensagens enviadas através do formulário de contato, clicando em “notifications“.
Desta forma todas as mensagens recebidas serão redirecionadas para o seu email.

2) Ler as mensagens diretamente no site:
Caso você não queira cadastrar um email para receber suas mensagens , toda vez que você quiser visualizar as mensagens que recebeu através do seu formulário de contato, você deverá acessar o site Wufoo colocar seu login criado no cadastro. Após logado, clique em “forms” e em seguida em “Entries“.
Você visualizará uma coluna no final da página onde estão todas as mensagens que lhe enviaram. Para ler as mensagens é só clicar em cima do titulo de cada uma e pronto.

Personalizando as cores do seu formulário:

O tema padrão do seu formulário poderá ser alterado.
Se quiser alterar e escolher um outro tema clique na aba “themes” e vá editando as cores e as fontes do formulário de acordo com o seu gosto. Depois é só salvar.
Se quiser incluir uma imagem personalizada no topo do formulário, crie uma imagem, hospede-a no seu site favorito.
Clique em “Properties” >> “Logo” e abaixo de “Where’s your image on the web?” cole o endereço da sua imagem.

Alterar o texto do botão “submit” para “Enviar”:

Por padrão, o texto do botão para o usuário enviar a mensagem é em inglês: “submit”.
Se quiser alterar esse texto, clique na aba “themes“>> “Properties” >> “buttons“, e dentro da caixinha, substitua o texto “submit” por “enviar”.

Depois clique em “save theme” que fica na parte superior para salvar as alterações.

Se quiser confira o meu Formulario de Contato.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

31 Comentários

  1. Marcos Paulo disse:

    Agradeço pela disponibilidade deste tutorial, é de muita serventia. Antigamente eu deixava o email a mostra, porém, vi que não é uma opção viável, visto que acaba ficando exposto e facilmente acessível para hackers e afins.

  2. Marcos disse:

    Boa noite amiga, gostaria de tirar uma dúvida, criei esse formulário e o coloquei no meu blog nas postagens…..só que ao enviar a mensagem o formulário desaparece ficando apenas a mensagem formulário criado pelo wufoo….como faço para depois de clicado em enviar, o formulário permaneça?

    Te agradeço desde já pela orientação.
    Sucesso,
    att

    • Vanessa disse:

      Após enviar a mensagem o formulário desaparece para quem está enviando. Atualiza a página que ele aparece de novo.

  3. Andrea Winchester disse:

    Clau, o Wufoo voltou a funcionar. Fiz o cadastro grátis hoje mesmo ^^.

  4. Marcelo Ribeiro disse:

    Primeiro, muito obrigado pelo post, exatamente o que procurava e muito bem explicado por sinal.

    Mas, não consegui encontrar onde traduzir para o portugues a legenda de caracteres abaixo do campo de mensagem. Mesmo tendo selecionado a linguagem Portugues na aba Form Setting.

  5. Kagome-chan disse:

    Clau, o wufoo não está mais disponibilizando o plano gratuito. Tentei hoje e vir a seguinte mensagem

    "Onde está o plano gratuito?
    Devido à concentração de usuários na região de abusar Livre planos para criar ataques de phishing, listas de spam e outros problemas que são contra os nossos Termos de Serviço, nós decidimos não oferecer um plano Wufoo livre na sua área. Sabemos que isso é decepcionante ouvir para usuários que querem usar Wufoo por razões legítimas, mas temos que fazer o que é no melhor interesse de toda a nossa comunidade. Pedimos desculpas pelo transtorno e agradecemos antecipadamente a sua compreensão"

    É uma pena mesmo, pois preciso de um formulário para o meu blog

  6. ? Jão Bless ? disse:

    Deu certo sim
    apartir desse ultimo cod. q me passou
    troquei o "title" por "target_blank" e pronto
    deu tudo certim !!!
    Gracias Clau… up \o/

  7. .:: Clau ::. disse:

    ? Jão Bless ?
    Agora deu certo?

  8. ? Jão Bless ? disse:

    Pronto
    entendi oq vc estava querendo dizer desde o começo
    kkkk
    foi mau… cabeça dura…

    Muito Obrigada !!!

  9. ? Jão Bless ? disse:

    É este cod. msm que estou usando !!!
    axo q não tem como eu fazer oq quero msm não
    Muito grato pela ajuda…

  10. .:: Clau ::. disse:

    ? Jão Bless ?
    Não deu certo pq vc incluiu o 'target='_blank' somente na imagem ícone, não incluiu no link.
    Vc tem q usá-lo no link.
    Tente desta forma:
    <a href='LINK-FORMULARIO' title='TITULO'>NOME-DO-LINK</a>

  11. .:: Clau ::. disse:

    Clube da risada,
    O VELHO E O MOÇO DOWNLOADS

    Já inclui o procedimento para alterar o texto do botão no tutorial. Já está atualizado, basta seguir os passos e pronto.
    Agora sobre retirar o link do "report abuse", não tem como, pq isso é do próprio Wufoo. Este recurso é recente, parece que só aparece em formulários novos. O meu é bem antigo, e na época q criei meu formulário não tinha isso.

  12. O VELHO E O MOÇO DOWNLOADS disse:

    Como eu faço para mudar o nome do botão do submit,para o nome de "enviar" e retirar o link do "report abuse"?

    Obrigado.

    Att,

  13. Clube da risada disse:

    Já tenho a muito tempo um formulário de contato do wuffo, mas como posso mudar a mensagem de confirmação de submit para enviar? Pois eu coloquei esse formulário na inha página, não em um link deferente como o do Mundo blogger. Abraços!

  14. Lukas disse:

    Clau,encontrei outro serviço gràtis de formulàrio um pouco melhor que o wufoo dà uma olhada: http://www.emailmeform.com

  15. .:: Clau ::. disse:

    Gustavo
    É que o wufoo não aceita criação de conta para sua região. Não tem como te ajudar.

  16. Gustavo disse:

    Olá Clau, bem eu sou de Portugal e quando tento criar conta no Wufoo aparece isto: We're sorry, but Wufoo is not currently accepting new signups from your country or region.

    Se for da minha região, poderia criar uma conta com o meu e-mail?:
    blog.olharglobal@gmail.com

    Cumps, e continue com um excelente trabalho no blog. 😉

  17. Lucas disse:

    Clau,mais uma dùvida,eu queria incorporar o formulário,em uma postagem igual a do contato blogosfera legalizada,mas não sei como proceder.

  18. Lucas disse:

    obrigado Clau =)

  19. .:: Clau ::. disse:

    Max Martins
    Que bom que gostou do wufoo, eu recomendo ele, é excelente mesmo!
    Fico feliz que tenha conseguido.

  20. Max Martins disse:

    Oi,

    Desconsidere a pergunta sobre apontar o formulário para uma página estática. Perguntei isso porque a @AnaKinT disse para eu olhar o dela e eu gostei daquela forma. Então, eu vi na url do contato que depois do nome do blog aparece /p/contato… p = página estática.

    Já sei que dá pra personalizar.

    Obrigado pelas dicas, teu trabalho tem contribuído muito para eu transformar meu cantinho num lugar melhor.

    Abraços

  21. Max Martins disse:

    Oi, Clau

    Nem preciso dizer que o tutorial é muito bom. Mastigadinho step by step…

    Vocês venceram (tu e a Ana Karenine)!
    Já criei o formulário de contato, mas ainda não o "instalei" porque gostaria de tirar uma dúvidas:

    1) Se eu colocar o link no menu com a tag blank vai abrir em outra janela. Certo?
    2) Se eu fizer uma página estática para poder personalizar (colocar a imagem da header ou outra qualquer) vai aparecer na lista de páginas?
    3) No caso de poder colocar no menu da linkbar, dá pra apontar para outra página dentro do blog e personalizar?

    Era só isso…hehehe

    Olha só, desculpe o abuso. Responda quando puder. Ok?

    Forte abraço.

  22. .:: Clau ::. disse:

    Lucas
    Lá no 1º campo onde vc vai escrever uma mensagem de entrada do formulário, é só inserir a tag de link ali.
    A tag é a mesma q já publiquei no comentario nº 5.

  23. Lucas disse:

    Clau,como se inseri um link no formulario?

  24. ::Clau:: disse:

    @Leonardo:
    é q meu formulário é antigo. Qdo o criei não tinha este "report abuse"…só nos novos que aparecem.

  25. Leonardo disse:

    Olá!

    Como você conseguiu tirar o "report abuse" ao lado do botão enviar?

    Obrigado!

    Parabéns pelo blog!

  26. Das disse:

    \o/ Valeu, querida!
    Beijo no coração!
    Dani

  27. ::Clau:: disse:

    @Das:
    é que vc tem que acrescentar ' target='_blank' ao link, desta forma:

    <a href='link-aqui/' target='_blank'>

  28. Das disse:

    (oO)"Leia todo o tutorial!" Falha minha, desculpe!
    No entanto, coloquei o segundo código, mas continuou abrindo na mesma página! ¬¬

    Beijão, querida!
    Dani

  29. ::Clau:: disse:

    @Das:
    Minha linda…dá uma olhada na ultima imagem do tutorial…lá explica como fazer isso…^^

  30. Das disse:

    Oi, Clau!
    Fiz um formulário no Wufoo e coloquei na barra de menu (será esse o nome?).
    Como faço pra ele abrir em outra página, como o seu?

    Beijo no coração!
    Dani

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.