Blog CataBits

Formulários são recursos indispensáveis para qualquer site web, principalmente com a necessidade crescente de interatividade, onde os visitantes sempre procuram formas de interagir com a web. Para quem cria e hospeda sites, é essencial ter um retorno do visitante, seja por um formulário de contatos, um cadastro ou uma simples enquete.

Criar um formulário em HTML não é nada complicado, basta usar meia-dúzia de tags simples. O problema está em processar os dados que são enviados pelo visitante. Não pega nada bem um formulário tentar abrir o programa de e-mail do cliente para enviar os dados, não é?

Quem domina linguagens como PHP, Perl, ASP e JAVA, entre outras, se sai bem criando pequenos scripts que fazem o trabalho de forma satisfatória e personalizada, mas os amadores, hobistas, bloggers, o pessoal do designer de fim de semana, os “orkuteiros” e todo mundo que não entende de programação, mas quer ter uma presença na web acaba tendo que usar scripts prontos como o “formmail” e serviços de terceiros.

Três desses serviços que já usei ou uso e recomendo são:

FormFacil
Permite construir e publicar de forma rápida e dinâmica, pequenos formulários de contato em seu site.

LinkWS
A LinkWS dispõe de produtos para você incrementar, gerenciar e divulgar seu site, além de diversos utilitários como formmails.

FormLogix
Serviço que permite criar e hospedar formulário de forma muito fácil e prática. Tem um excelente editor de formulários e gera relatórios dos dados enviados.

Cada um destes serviços tem características distintas, vantagens e desvantagens que por vezes me fizeram usar dois serviços diferentes no mesmo site, o que pode ser bastante confuso. Acredite!

Ultimamente tenho dado preferência para os formulários do Google! Isso mesmo! Para quem não sabe o “big G da web” tem um serviço de criação de formulários que está integrado ao Google Docs.

A vantagem está no fato de os dados preenchidos no formulário serem enviados para uma planinha do Docs, onde podemos gerar estatísticas, relatórios avançados, fazer cálculos com determinados campos, importar, exportar e tudo mais que é possível com uma planilha e um bom conhecimento de Excel e similares. Isso é ótimo para criar avaliações para estudantes, enquetes e pesquisas de mercado.

A desvantagem está no layout dos formulários que é extremamente pobre e permite muito pouca ou nenhuma personalização. A página de confirmação de envio e o fato de não enviar e-mails avisando que alguém preencheu o formulário são outras falhas que termos que aprender a contornar. Mas com um pouco de criatividade algumas dessas limitações podem ser amenizadas sem muito prejuízo para o design do site.

A primeira coisa que podemos fazer é melhorar o design do formulário gerado pelo Google, para isso, basta ter algum domínio de HTML e seguir as dicas abaixo:

Primeiro logue-se no Google Docs. Se você nunca usou o serviço, acesse o endereço http://docs.google.com e logue-se com seu usuário e senha do Gmail ou qualquer outro serviço do Google. Se não tem, crie lá mesmo uma conta.

Para quem é usuário do Google Apps, uma suíte de aplicações web para domínios próprios, basta se logar no Apps, entrar no “Gerenciamento do domínio” e adicionar o serviço “Docs” ou “Textos” ao domínio.

Uma vez logado, clique no botão “Novo”, selecione “Formulário” e use a ferramenta para criar um formulário simples. Não vou mostrar isso passo a passo porque é muito fácil e está tudo muito bem documentado lá mesmo, basta clicar no link “Ajuda” da página inicial do Docs.

Você também não precisa se preocupar em criar a planilha. Isso será feito automaticamente. Só não esqueça de clicar no botão “Salvar” ou seu formulário não será criado ou ficará incompleto.

Veja abaixo como fica um simples formulário de contatos que usarei como exemplo a partir de agora. O link público do formulário é informado na tarja preta no final da página de edição do mesmo. Você também pode ver o formulário publicado e já funcional clicando aqui.

Construindo o formulário. Repare o link dele no final da página.

Planilha criada automaticamente para o formulário, inclusive com data e hora.

Você já pode incluir o formulário da forma que está no seu site. Basta usar a opção “Incorporar” disponível no botão “Mais ações” que ele gera um código HTML que pode ser copiado no seu site. Mas o resultado pode não ser o mais adequado para combinar com seu layout, com aqueles campos curtinhos, letras enormes, grandes espaços vazios, etc.

A idéia é personalizar o formulário. Salve ele e exiba o formulário publicado (Link da tarja preta! Lembra?). Agora clique com o botão direito do nouse sobre a página e selecione “Exibir o código fonte” ou algo assim. Observe que você tem um HTML muito simples, que pode ser editado quase a vontade.

Só tenha cuidado com a tag “FORM” que não deve ser modificada e também com os campos como “INPUT” e “TEXTAREA” e seus atributos “NAME=” que também devem ser mantidos.

Veja como ficou meu exemplo:

Seu nome:

Seu e-mail:

Assunto:

Mensagem:

Outra idéia é usar os “ID” e “CLASS” originais das tags e personalizar tudo usando CSS, assim não será necessário alterar o HTML do formulário. Um pouco de JavaScript pode ajudar na filtragem dos campos como o de e-mail e até em uma checagem de “humanidade” por exemplo.

Agora é só colar o novo código diretamente na página escolhida do seu site e seu formulário está personalizado.

Veja o resultado final, com algumas alterações, que publiquei no By Luferat. Clique aqui para acessar o formulário finalizado e compare-o com o original.

Formulário final já modificado.

Claro que o “segredo” está na tag “FORM” que é onde está o endereço do processador de formulários do Google Docs e também no nome dos campos que devem ser mantidos. O resto é só HTML…

Como podemos ver, é possível, com alguma criatividade e atenção, aproveitar os recursos que já temos disponíveis e fazer as coisas funcionarem a nosso favor.

Essa é só uma idéia! Se você tiver outras é só mandar! Estamos aqui para compartilhar!

[Update]
Coloquei o formulário usado no Siris Games, para quem quiser testar e adaptar, aqui e a página de resposta personalizada é essa.
[/Update]