O webform é a ferramenta que substitui o formulário em papel e é muito útil no ambiente acadêmico. No tutorial a seguir você aprenderá a criar um webform desde o começo.
Antes de mais nada, crie um esqueleto do seu formulário. Esboce os campos fundamentais a serem recebidos, como o nome do solicitante, seu número USP, endereço e todas as informações que julgar necessárias.
Sendo assim, o nosso formulário teste vai receber o Nome, E-mail, Endereço, Escolaridade e Documentos de um solicitante hipotético. Então vamos lá!
1. Logado, acesse Webforms no menu Estrutura
2. Em seguida, clique em Add Webform
2.1. Insira um título e, se desejar, atribua uma descrição
3. Criamos o Webform, mas ainda é necessário adicionar os campos para os dados que serão ser recebidos, como o nome do solicitante/inscrito, seu documento, telefone, etc. Para isso, clique em Add element.
Dica: elaborar previamente um esboço com todos os campos que deseja inserir no seu formulário vai tornar o processo mais fácil e rápido! ;)
4. Ao adicionar o elemento, precisamos selecionar o tipo de dado que o campo vai receber. Por exemplo, para um nome completo o campo específico é o Campo de Texto. Depois de selecionado o tipo, atribua o título de acordo com o dado que será recebido e clique em Salvar.
5. Muito bem! Agora vamos criar um campo para e-mails. Já vimos que para cada tipo de dado existe um formato de entrada. Neste caso, deve-se escolher o tipo específico de e-mail.
*É possível permitir que o usuário adicione mais de um e-mail, selecionando a quantidade que julgar necessária em Allowed number of values
5.1. Clique em Save + Add element para salvar e redirecionar para adicionar outro elemento.
6. Alguns dados que seguem um padrão podem ser predefinidos, como a escolaridade (por exemplo: Escolaridade Básica, Superior ou Aperfeiçoamento). O Drupal reconhece esse formato como Selecionar
6.1. Atribua o título
6.2. Abaixo, em opções, insira as informações dos campos que o usuário poderá escolher (por exemplo, no caso da escolaridade: Básica, Superior, Aperfeiçoamento/Especialização, Mestrado, Doutorado e Pós-Doutorado). Para adicionar o próximo basta clicar no ícone de + do lado direito
7. Agora é a hora de saber o endereço do usuário. Para receber esse tipo de informação é possível criar um campo para cada parte do endereço, como rua/logradouro, número, bairro, cidade e estado, ou somente um campo que receba tudo. Para o segundo caso, o Drupal dispõe da ferramenta Adress.
7.1. Atribua o título e abaixo, em Adress Settings, adicione os campos que compõem o endereço
Logradouro
Bairro
Cidade
Estado
Importante: o tipo Adress é padronizado no modelo americano. Por isso é necessário trocar para Campo de Texto, o que vai permitir ao usuário que insira seu estado de origem/residência.
CEP
País
Lembre-se de tornar todos os dados obrigatórios
7.2. Salve e adicione outro elemento
8. Em inscrições e solicitações pode ser necessário o recebimento de comprovantes, documentos e imagens. Para o usuário inserir esse tipo de informação, é necessário adicionar um campo com formato de Arquivo.
8.1. Defina o título de acordo com os docs a serem recebidos
8.2. Limite os formatos que serão aceitos (por exemplo: jpg, jpeg e pdf)
8.3. Depois que salvar as alterações confira se todos os campos que foram criados
9. Agora podemos testar nosso formulário para ver se todas as informações estão sendo recebidas clicando em Teste.
O sistema vai automaticamente gerar informações fictícias para o teste
9.1. Clique em Enviar
9.2. Volte ao form e acesse Results
9.3. O formulário preenchido pelo sistema para teste foi enviado! É desta forma que as inscrições e solicitações aparecerão para você.
10. Após preencher um formulário é comum que o usuário veja uma mensagem que informe sucesso no envio. Para adicionar isso no seu webform clique em Configurações e, no submenu, em Confirmation
10.1. Em Confirmation settings, customize a mensagem indicando sucesso no envio do formulário de acordo com o pedido/inscrição no campo Confirmation message e, abaixo, clique em Salvar.
10.2. Você pode testar se sua alteração foi feita corretamente clicando em Teste e enviando outro formulário com respostas geradas automaticamente
10.3. Pronto! Sua mensagem já aparecerá ao usuário desta forma
11. Um e-mail também pode ser enviado ao solicitante comprovando o envio das informações no seu webform. De volta em Configurações, acesse o submenu Emails / Handlers
11.1. Clique em +Add email para ser enviado ao solicitante
11.2. Em Send To, selecione o e-mail, em To email, de acordo com o utilizado na criação do formulário
11.3. Em mensagem, selecione Custom subject... para inserir o assunto do e-mail que será enviado, lembre-se de personalizar a mensagem conforme o pedido que foi feito. Abaixo, em Corpo, uma mensagem padrão que contém todos os dados informados no formulário será exibida. Você pode modificar o corpo do e-mail.
11.4. Além do solicitante, a secretaria também pode receber o e-mail de confirmação, seja para reforçar pedidos urgentes ou somente para ciência. Clique em +Add email e insira o título.
11.5. Insira também o endereço de e-mail da secretaria e customize a mensagem conforme o pedido e da maneira que achar apropriada
11.6. De volta a Emails / Handlers, temos um resumo dos emails que serão enviados automaticamente ao usuário e secretaria informando o endereço de destino, o assunto e a página em HTML que será enviada quando o procedimento for completado. Clique no botão Save Handlers
12. Opcionalmente, podemos utilizar o modelo do formulário criado para outras inscrições sem precisar começar do zero. Clique em Build > Fonte
12.1. Copie o código fonte inteiro
12.2. Em Webforms, no menu Estrutura, adicione outro webform
12.3. Clique em Fonte, cole o código copiado e salve
Todos os campos serão adicionados
Dica: o código fonte pode ser compartilhado via e-mail e de outras formas para outras máquinas
12.4. É possível visualizar como nosso webform será exibido para o usuário final clicando em Ver, no menu acima da lista de elementos criados
Lembre-se de sempre testar as alterações que fizer para checar se tudo está conforme o esperado e funcionando corretamente.
E, agora sim, você já pode criar todos os seus webforms sem mais problemas!
No GitHub da fflch existem 6 templates com o código fonte de webforms para Inscrição, Prorrogação de Prazo, Trancamento de Matrícula, Credenciamento de disciplina e de orientador e Licença Maternidade/Paternidade. Todos os arquivos já estão configurados, aproveite!
Este tutorial também pode ser conferido em vídeo.