Criar formulários para páginas web pode ser uma tarefa bastante complicada ou até mesmo demorada. Ou talvez não, claro. Depende do usuário, de seu conhecimento, do tempo disponível, do ambiente de trabalho, das ferramentas à disposição, etc.
Mas construir um formulário completo em HTML, única e exclusivamente, é algo que pouca gente faz, hoje em dia. Existem diversas ferramentas que geram todo o código à partir de interfaces WYSIWYG (“What You See Is What You Get”, ou “O que você vê é o que você tem”).
Existem diversos tipos de ferramentas deste tipo, na verdade. Algumas são inclusas em editores HTML, algumas são standalone, completamente separadas, etc. Existem geradores de formulários que podem ser instalados em seu computador, também.
E existe o Google Docs, o qual, além de gratuito, conta com um poderoso e flexível gerador de formulários. Que tal aprender a utilizá-lo?
1) Primeiro de tudo, acesse a página do serviço e faça login com sua conta do Google. À esquerda, clique em “Documentos”, e na lista exibida logo a seguir, escolha “Planilhas”:
2) É a partir do aplicativo “Planilhas”, do Google (similar ao Excel, da Microsoft), que iremos gerar nossos formulários. Na verdade, a geração de formulários aqui é uma espécie de complemento do aplicativo de planilhas, e todos os dados coletados pelos formulários, falando nisso, serão armazenados em uma planilha dentro do serviço;
Bem, já na tela do aplicativo “Planilhas”, você poderá visualizar todos os seus documentos do tipo, e também poderá criar um novo, através do botão com um símbolo de “+” localizado no canto inferior direito (Criar nova planilha). Clique nele;
3) Feito isto, será então criada uma nova planilha, a qual servirá como base para a modelagem de nosso formulário. Vá até o menu “Ferramentas”, e clique no link “Criar um formulário”:
4) Neste momento, uma mensagem aparecerá rapidamente, com o seguinte texto e opções: “Novo formulário criado. Adicione perguntas aqui. Use o menu do formulário para editá-lo. Dispensar“. Não se preocupe se tal mensagem desaparecer.
Utilize o menu “Formulário” e clique na opção “Editar formulário”, para trabalhar no formulário recém criado:
5) Observe que o formulário foi nomeado como “Planilha sem título”. Altere este nome como desejar, bem como a “Descrição do formulário”, logo abaixo. Altere também o nome da planilha, no canto superior esquerdo. Basta clicar sobre o nome e alterar. Veja abaixo:
Na área de edição do formulário, em “Configurações do formulário”, você pode ativar ou não a opção que fará com que uma barra de progresso seja exibida conforme o formulário vai sendo preenchido, e também pode definir se uma mesma pessoa pode enviar mais de uma resposta ou não.
OBS: recomendamos que você deixe esta última opção mencionada desmarcada, para evitar complicações para o usuário no momento do preenchimento, pois ele terá inclusive de realizar login. Mas, tudo depende de suas necessidades.
Mais abaixo, em “Página de confirmação”, você pode definir a resposta padrão que será exibida assim que o formulário for totalmente preenchido (por padrão, o Google insere “Sua resposta foi registrada”, mas basta clicar neste campo e alterar a frase, normalmente).
Ainda aqui, você pode ativar ou não a opção que permite a edição de respostas após o envio e também a opção que exibe um link público para os resultados e gráficos do formulário.
OBS: recomendamos também que você deixe estes 3 últimos itens desmarcados, mas, lembrando mais uma vez, tudo depende de suas necessidades.
6) Acertados estes detalhes, vamos começar a inserir campos/itens no formulário. Observe que já existe um campo adicionado, como exemplo. Trata-se um radio button, da “Pergunta sem título”. Vamos removê-lo para evitar problemas. Simplesmente posicione o cursor de seu mouse sobre o campo, e um conjunto de 3 botões será então exibido (“Editar”, “Duplicar” e “Excluir”). Clique em “Excluir”, e o campo será eliminado:
7) Vamos inserir, então, os campos necessários. Se você clicar diretamente no botão “Adicionar item” (veja acima), será possível0 escolher o tipo de campo durante sua edição. Mas você também pode clicar na seta logo ao lado para realizar esta escolha logo de início.
Vale lembrar que a seta “esconde” algumas opções avançadas, como por exemplo “grades”, campos de “data” e “horário”, “cabeçalhos”, etc. Mas você deve optar pela maneira que achar melhor. Entretanto, vamos aqui, inicialmente, simplesmente clicar em “Adicionar item”.
Assim que você clicar neste botão, serão então exibidas as opções disponíveis para a criação do campo. Vale lembrar também que o Google Docs simplifica bastante as coisas, substituindo diversos termos técnicos por palavras ou frases de fácil compreensão, até mesmo por quem nunca criou um formulário web na vida.
Digamos que você deseja criar um campo simples, para a inserção do nome. Em “Tipo de pergunta”, altere o valor para “Texto”:
8) Tudo é muito intuitivo, nesta ferramenta de criação de formulários do Google. Ao definir que você deseja um campo de texto, as opções são alteradas dinâmica e rapidamente. Na nova tela, preencha o “título da pergunta”, informe algum “texto de ajuda” (não obrigatório) e marque (ou não) o checkbox para informar se este é um campo/pergunta obrigatório ou não.
Observe ainda que nesta seção existe uma opção chamada “Configurações avançadas”. Clique nela e dê uma olhada. Veja que é possível tornar o formulário “inteligente”, trabalhando com “validação de dados”. Por exemplo:
- Texto = (deve ser) Endereço de e-mail;
- Texto = (deve ser) URL;
Assim, é possível realizar validações de dados antes do envio do formulário. Obviamente, a utilização destas opções avançadas depende do criador, do objetivo do formulário, dos dados que serão coletados, etc.
Terminada a criação de um campo, no presente exemplo, do campo “Nome”, clique no botão “Concluído” (em azul). Automaticamente o campo será criado, e o botão “Adicionar item” volta a ser exibido.
9) Existem inúmeros tipos de campos que podemos utilizar, todos acessíveis através do mesmo botão:
- Texto (text);
- Parágrafo (textarea);
- Múltipla escolha (radio button);
- Caixas de seleção (checkbox);
- Escolha de uma lista (menu dropdown);
- Data;
- Horário;
- E alguns outros.
Ao escolhermos cada uma destas opções de campos, podemos definir ajustes individuais para cada uma delas, podemos também definir se serão campos cujo preenchimento será obrigatório ou não, etc. Agora, vamos adicionar um campo do tipo “texto do parágrafo (textarea). Trata-se de uma caixa de texto maior, para a digitação de mensagens mais longas.
10) Clique novamente no botão “Adicionar item”, preencha o campo “título da pergunta” (por exemplo, use “mensagem”), e em “tipo de pergunta”, escolha “parágrafo”. Clique em “Concluído”;
11) O processo é o mesmo para tantos quantos sejam os campos que você deseja inserir em seu formulário. Cada tipo de campo conta com suas respectivas peculiaridades, e você pode ajustá-las conforme bem desejar.
No caso de um campo do tipo “Escolha de uma lista (menu dropdown)”, por exemplo, você deve informar também as respectivas opções (o mesmo vale para os campos do tipo radio button e checkbox.
12) Para criar um campo do tipo menu dropdown, clique novamente no botão “Adicionar item”, informe o título da pergunta (por exemplo, “sexo”), e em “tipo da pergunta”, opte por “Escolha de uma lista”.
Observe que logo abaixo aparecem as respectivas caixas de texto para que você informe as opções que o usuário deverá escolher. Neste caso, digite “Masculino” no campo 1, clique no campo 2 (ainda sombreado) para que ele seja ativado, digite “Feminino”, aí, e em seguida clique em “Concluído”.
OBS: note que você poderia informar quantas opções fossem necessárias, pois o próximo campo sempre permanece sombreado até que você clique nele, iniciando então a criação de uma nova opção.
13) Vamos supor agora que você terminou o seu formulário. Que tal testá-lo? Para isto, na parte superior da tela, utilize a opção “Ver formulário publicado”:
E assim você pode visualizar o formulário na web, totalmente funcional, e pode inclusive testá-lo, incluindo aqui as mensagens de erro previamente configuradas:
14) Para publicar o formulário, finalmente, utilize o botão “Enviar formulário”, na tela de criação. Uma janela será então exibida, a qual conterá o link para que você compartilhe o form e o código embed, para a incorporação em websites e blogs (através do botão “incorporar”):
Como visualizar os dados captados através do formulário
Assim que você cria um formulário no Google Docs e começa a utilizá-lo, dados serão obtidos. Pessoas preencherão o formulário, e é natural que você queira obter acesso a tais dados. Para isto, ainda na página de criação clique no botão “Respostas”, o qual inclusive exibe a quantidade de preenchimentos.
Você pode também acessar a URL “https://docs.google.com/spreadsheets/u/0/” e localizar a planilha necessária, conforme você nomeou. Clique nela e todas as informações serão exibidas, de maneira semelhante à abaixo:
Finalizando
Vale lembrar que os formulários também podem ser editados. Você pode adicionar novos campos, excluir, editar, alterar labels, etc. Para isto, acesse novamente a URL “https://docs.google.com/spreadsheets/u/0/“, localize a planilha do formulário, clique sobre seu nome para abri-la e, com ela aberta, utilize o menu “Formulário” ==> “Editar formulário”:
E assim por diante. Fácil não?
