Um mergulho profundo no módulo de formulário da Web para Drupal 8/9

O módulo Webform é o criador de formulários e gerenciador de envio mais poderoso e flexível para o Drupal. Ele dá aos construtores de sites o poder de criar facilmente formulários complexos instantaneamente. Ele vem com um certo nível de configurações padrão, permitindo também que você o personalize de acordo com seus requisitos.

Confira este incrível blog - Drupal 8 Webform Module - Um breve tutorial para ajudá-lo a começar com o módulo Webform em seu site Drupal 8/9. Isso ajudará você a entender o básico facilmente.

O módulo Webform vem com muitos recursos interessantes e gostaria de mencionar alguns aqui.

Recursos do formulário da web

1. Alterando a forma e os elementos

Qualquer formulário, elemento e suas configurações relacionadas podem ser alterados usando seus respectivos ganchos. Abaixo estão alguns ganchos que estão disponíveis para uso e você pode encontrar mais no arquivo webform.api.php :

• Ganchos de formulário

◦ hook_webform_submission_form_alter ()
◦ Faça alterações antes de um formulário de envio de formulário da web ser processado.

• Ganchos de elemento

◦ hook_webform_element_alter ()
◦ Altere os elementos do formulário da web.

• Ganchos de opção

◦ hook_webform_options_alter ()
◦ Altere as opções do formulário da web.

• Ganchos de manuseio

◦ hook_webform_handler_invoke_alter ()
◦ Atuar em um manipulador de formulário da web quando um método é invocado.

• mais ganchos ...

◦ hook_webform_access_rules_alter () etc.
◦ Alterar a lista de regras de acesso que devem ser gerenciadas por nível de formulário da web.

2. Fonte YAML

O módulo Webform começou como um módulo YAML Form, que permitia que as pessoas criassem formulários escrevendo marcação YAML. Em algum ponto, o módulo YAML Form começou a ter IU e se tornou o módulo Webform para Drupal 8.

• YAML fornece uma linguagem de marcação simples e fácil de aprender para construir e editar em massa os elementos de um formulário da web.
• A página (Ver) Código-fonte permite que os desenvolvedores editem uma matriz de renderização do formulário da web usando a marcação YAML. Os desenvolvedores podem usar a página (Exibir) Código-fonte para codificar manualmente os formulários da web para alterar os rótulos de um formulário da web rapidamente, recortar e colar vários elementos, reordenar os elementos e também adicionar propriedades personalizadas e marcação aos elementos.
• Aqui está um exemplo de um formulário de contato e seu código-fonte YAML correspondente:

Um formulário de contato com IU de arrastar e soltar

O código-fonte YAML do formulário de contato

3. Campos condicionais

O Webform permite adicionar lógica condicional aos elementos do formulário. Vamos considerar um pequeno exemplo, em que precisamos lidar condicionalmente com a visibilidade dos elementos com base no valor de outro elemento dentro do formulário.

Aqui está um exemplo de formulário com campos de duas etapas, ETAPA 1 (elemento Rádios) com as opções 'E-mail' e 'Número do celular'. ETAPA 2 (Fieldset) com dois elementos, 'E-mail' e 'Número do celular'.

Página de criação de formulário

Página de visualização de formulário

No exemplo acima, gostaria de mostrar o campo 'E-mail' se a opção 'E-mail' for escolhida na Etapa 1, caso contrário, mostrar o campo 'Número do celular' se a opção 'Número do celular' for escolhida na Etapa 1.

Para isso, edite o campo 'E-mail', clique na guia 'Condições', escolha 'Estado' como 'Visível' e defina 'Gatilho / Valor' como 'PASSO 1 [Rádios] o valor é e-mail'. Da mesma forma, siga as mesmas etapas para adicionar lógica condicional ao campo 'Número do celular' e defina o 'Acionador / Valor' como 'ETAPA 1 [Rádios] o valor é mobile_number'. Esta é a aparência final do formulário da web:

Configurando lógica condicional

Formulário quando 'E-mail' é escolhido no PASSO 1

Formulário quando 'Número de celular' é escolhido no PASSO 1

4. Propriedades de opções personalizadas

O Webform permite adicionar propriedades de opções personalizadas aos seus elementos de.

Imagine um cenário em que você desejaria manipular condicionalmente as opções de um elemento de rádio com base no valor de um elemento diferente dentro do formulário. Como você faria isso?

Bem, eu não encontrei nenhuma maneira de lidar com isso por meio das configurações de lógica condicional da IU. Mas há uma provisão para definir 'propriedades de opções personalizadas' para seu elemento, em que você escreve a lógica condicional necessária visando suas opções dentro do elemento usando o código YAML.

Aqui está um exemplo, onde podemos ver dois elementos de rádio e com base na opção que eu seleciono no primeiro elemento, a visibilidade das opções dentro do segundo elemento deve mudar.

Página de criação de formulário

Página de visualização de formulário antes de adicionar quaisquer propriedades de opções personalizadas:

• Se 'Tipo A' for escolhido, então 'Opção 1' e 'Opção 2' devem ser visíveis a partir do segundo elemento. Da mesma forma, se 'Tipo B' for escolhido, então 'Opção 3' e 'Opção 4' devem estar visíveis. Para conseguir essa edição do segundo elemento, vá para a guia 'Avançado', role para baixo até as seções 'Propriedades de opções (personalizadas)' e escreva a lógica necessária em YAML.

Configurando as propriedades das opções

Formulário quando 'Tipo A' é escolhido

Formulário quando 'Tipo B' é escolhido

5. Manipuladores de e-mail de envio de formulário da Web

• Manipuladores de e-mail

Os manipuladores de e-mail enviam um envio de formulário da web por e-mail. Para adicionar gerenciadores de e-mail ao seu formulário da web, vá para 'Configurações' e depois na guia 'E-mails / Manipuladores'. Em seguida, clique no botão 'Adicionar e-mail / Adicionar manipulador'.

Adicionar manipulador de e-mail

• Conforme mostrado na imagem abaixo, na guia 'Geral', adicione o 'Título' e defina os detalhes de 'Enviar para' e 'Enviar de'. Adicione a mensagem 'Assunto' e 'Corpo' conforme necessário e salve o formulário de configuração.

E é só isso. Seu manipulador é demitido sempre que o formulário é enviado.

• Você também pode definir manipuladores de e-mail condicionais para seu formulário da web, ou seja, acionar diferentes manipuladores de e-mail com base no valor de certos elementos do formulário.
• Por exemplo, vamos considerar um elemento 'Selecionar' com valores 'Tipo 1' e 'Tipo 2'. Se o usuário enviar 'Tipo 1', acione o manipulador 'E-mail - Tipo 1' que configurou o endereço 'Para' como ' [e-mail protegido] '. Se o usuário enviar 'Tipo 2', acione o manipulador 'E-mail - Tipo 2' que configurou o endereço 'Para' como ' [e-mail protegido] '.
• Para adicionar lógica condicional ao seu gerenciador de e-mail, crie um e nomeie-o como 'E-mail - Tipo 1'. Defina o endereço 'Para' como ' [e-mail protegido] ', mude para a guia 'Condições', escolha 'Estado' como 'Visível' e defina 'Acionador / Valor' como 'Selecionar tipo [Selecionar] o valor é type_1'.
• Da mesma forma, crie o segundo manipulador e nomeie-o 'E-mail - Tipo 2'. Defina o endereço 'Para' como ' [e-mail protegido] ', mude para a guia 'Condições', escolha o 'Estado' como 'Visível' e defina o 'Acionador / Valor' como 'Selecionar tipo [Selecionar] o valor é type_2'.

• Manipuladores de e-mail programados

  • Ele estende o manipulador de e-mail do módulo Webform para permitir que os e-mails sejam agendados. Para usar este recurso, ative o submódulo 'Manipulador de e-mail agendado de formulário da Web'.
  • Para agendar o envio de um e-mail dos envios do formulário, clique no botão 'Adicionar manipulador'. Selecione o manipulador 'E-mail programado' aqui.

Existe apenas uma configuração extra no manipulador 'E-mail agendado' em comparação com o 'manipulador de e-mail' normal. E isso é para adicionar a data de agendamento de e-mail na guia Configurações gerais.

Manipulador de e-mail agendado

Defina a data para acionar seu manipulador e quando o próximo cron for executado, seu e-mail será enviado!

Encontrar ajuda

Existem diferentes maneiras de buscar ajuda com o módulo de formulário web. Aqui está uma lista de algumas fontes:

• Documentação, livro de receitas e screencasts
  • https://www.drupal.org/docs/8/modules/webform
• Fila de problemas de formulário da web
  • https://www.drupal.org/project/issues/webform
• Respostas Drupal
  • http://drupal.stackexchange.com
• Canal Slack
  • Você sempre pode postar suas dúvidas sobre o módulo Webform no canal #webform dentro do espaço de trabalho do Slack Drupal. Qualquer pessoa da comunidade, até mesmo o próprio mantenedor do módulo, está sempre por perto e é gentil o suficiente para orientá-lo em seus problemas.

Uma mensagem ENORME a Jacob Rockowitz por seu apoio implacável ao módulo Drupal 8/9 Webform. O Webform não teria sido o que é agora sem ele.