Una inmersión profunda en el módulo Webform para Drupal 8/9

El módulo Webform es el creador de formularios y el administrador de envíos más potente y flexible de Drupal. Brinda a los creadores de sitios el poder de crear fácilmente formularios complejos al instante. Viene con un cierto nivel de configuración predeterminada, lo que también le permite personalizarlo según sus requisitos.

Echa un vistazo a este increíble blog: Módulo de formulario web de Drupal 8: un breve tutorial que te ayudará a comenzar con el módulo de formulario web en tu sitio de Drupal 8/9. Esto le ayudará a comprender los conceptos básicos fácilmente.

El módulo Webform viene con muchas características interesantes y me gustaría mencionar algunas aquí.

Funciones de formulario web

1. Modificación de la forma y los elementos

Cualquier forma, elemento y sus configuraciones relacionadas se pueden modificar utilizando sus respectivos ganchos. A continuación se muestran algunos ganchos que están disponibles para usar y puede encontrar más en el archivo webform.api.php :

• Forma ganchos

◦ hook_webform_submission_form_alter ()
◦ Realice modificaciones antes de que se procese un formulario de envío de formulario web.

• Ganchos de elementos

◦ hook_webform_element_alter ()
◦ Modificar los elementos del formulario web.

• Ganchos de opción

◦ hook_webform_options_alter ()
◦ Modificar las opciones del formulario web.

• Ganchos manipuladores

◦ hook_webform_handler_invoke_alter ()
◦ Actuar sobre un controlador de formulario web cuando se invoca un método.

• más ganchos ...

◦ hook_webform_access_rules_alter () etc.
◦ Modificar la lista de reglas de acceso que deben administrarse por nivel de formulario web.

2. Fuente YAML

El módulo de formulario web comenzó como un módulo de formulario YAML, que permitía a las personas crear formularios escribiendo el marcado YAML. En algún momento, el módulo de formulario YAML comenzó a tener una interfaz de usuario y se convirtió en el módulo de formulario web para Drupal 8.

• YAML proporciona un lenguaje de marcado simple y fácil de aprender para crear y editar de forma masiva los elementos de un formulario web.
• La página (Ver) Fuente permite a los desarrolladores editar la matriz de representación de un formulario web utilizando el marcado YAML. Los desarrolladores pueden usar la página (Ver) Fuente para codificar manualmente formularios web para alterar las etiquetas de un formulario web rápidamente, cortar y pegar varios elementos, reordenar elementos y agregar propiedades personalizadas y marcado a los elementos.
• A continuación, se muestra un ejemplo de un formulario de contacto y su código fuente YAML correspondiente:

Un formulario de contacto con interfaz de usuario de arrastrar y soltar

El código fuente YAML del formulario de contacto

3. Campos condicionales

Webform le permite agregar lógica condicional a sus elementos dentro de su formulario. Consideremos un pequeño ejemplo, en el que necesitamos manejar condicionalmente la visibilidad de los elementos en función del valor de otro elemento dentro del formulario.

Aquí hay un formulario de ejemplo con campos de dos pasos, PASO 1 (elemento Radios) con las opciones 'Correo electrónico' y 'Número de móvil'. PASO 2 (Fieldset) con dos elementos, 'Correo electrónico' y 'Número de móvil'.

Página de creación de formulario

Página de vista de formulario

En el ejemplo anterior, me gustaría mostrar el campo 'Correo electrónico' si se elige la opción 'Correo electrónico' en el Paso 1; de lo contrario, mostrar el campo 'Número de teléfono móvil' si se elige la opción 'Número de teléfono móvil' en el Paso 1.

Para lograrlo, edite su campo 'Correo electrónico', haga clic en la pestaña 'Condiciones', elija el 'Estado' como 'Visible' y configure el 'Activador / Valor' como 'PASO 1 [Radios] El valor es correo electrónico'. De manera similar, siga los mismos pasos para agregar lógica condicional a su campo 'Número de teléfono móvil' y configure el 'Activador / Valor' como 'PASO 1 [Radios] El valor es número_móvil'. Aquí está el aspecto final del formulario web:

Configurar la lógica condicional

Formulario cuando se elige 'Correo electrónico' en el PASO 1

Formulario cuando se elige 'Número de teléfono móvil' en el PASO 1

4. Propiedades de opciones personalizadas

Webform le permite agregar propiedades de opciones personalizadas a sus elementos from.

Imagine un escenario en el que le gustaría manejar condicionalmente las opciones de un elemento de radio en función del valor de un elemento diferente dentro del formulario. ¿Cómo lo harías tú?

Bueno, no encontré ninguna forma de manejarlo a través de la configuración lógica condicional de la interfaz de usuario. Pero existe una disposición para establecer 'propiedades de opciones personalizadas' para su elemento, en el que escribe la lógica condicional requerida que apunta a sus opciones dentro del elemento utilizando el código YAML.

Aquí hay un ejemplo, donde podemos ver dos elementos de radio y según la opción que selecciono en el primer elemento, la visibilidad de las opciones dentro del segundo elemento debería cambiar.

Página de creación de formulario

Página de vista de formulario antes de agregar propiedades de opciones personalizadas:

• Si se elige 'Tipo A', entonces 'Opción 1' y 'Opción 2' deberían ser visibles desde el segundo elemento. De manera similar, si se elige 'Tipo B', entonces la 'Opción 3' y la 'Opción 4' deberían estar visibles. Para lograr esto, edite el segundo elemento, vaya a la pestaña 'Avanzado', desplácese hacia abajo hasta las secciones 'Opciones (personalizadas) propiedades' y escriba la lógica necesaria en YAML.

Configurar las propiedades de las opciones

Formulario cuando se elige 'Tipo A'

Formulario cuando se elige 'Tipo B'

5. Controladores de correo electrónico de envío de formularios web

• Controladores de correo electrónico

Los controladores de correo electrónico envían un formulario web por correo electrónico. Para agregar controladores de correo electrónico a su formulario web, vaya a 'Configuración' y luego a la pestaña 'Correos electrónicos / Controladores'. A continuación, haga clic en el botón 'Agregar correo electrónico / Agregar controlador'.

Agregar administrador de correo electrónico

• Como se muestra en la imagen de abajo, en la pestaña 'General', agregue el 'Título' y configure los detalles de 'Enviar a' y 'Enviar desde'. Agregue el mensaje 'Asunto' y 'Cuerpo' según sea necesario y guarde el formulario de configuración.

Y eso es todo. Su controlador es despedido cada vez que se envía el formulario.

• También puede configurar controladores de correo electrónico condicionales para su formulario web, es decir, activar diferentes controladores de correo electrónico en función del valor de ciertos elementos dentro del formulario.
• Por ejemplo, consideremos un elemento 'Seleccionar' con valores 'Tipo 1' y 'Tipo 2'. Si el usuario envía 'Tipo 1', active el controlador 'Correo electrónico - Tipo 1' que ha establecido la dirección 'Para' en ' [correo electrónico protegido] '. Si el usuario envía 'Tipo 2', active el controlador 'Correo electrónico - Tipo 2' que ha establecido la dirección 'Para' en ' [correo electrónico protegido] '.
• Para agregar lógica condicional a su controlador de correo electrónico, cree un controlador y asígnele el nombre "Correo electrónico - Tipo 1". Establezca la dirección 'Para' en ' [correo electrónico protegido] ', cambie a la pestaña 'Condiciones', elija el 'Estado' como 'Visible' y establezca el 'Activador / Valor' como 'Seleccionar tipo [Seleccionar] El valor es tipo_1'.
• De manera similar, cree el segundo controlador y asígnele el nombre "Correo electrónico - Tipo 2". Establezca la dirección 'A' en ' [correo electrónico protegido] ', cambie a la pestaña 'Condiciones', elija el 'Estado' como 'Visible' y establezca el 'Activador / Valor' como 'Seleccionar tipo [Seleccionar] El valor es tipo_2'.

• Controladores de correo electrónico programados

  • Extiende el controlador de correo electrónico del módulo Webform para permitir la programación de correos electrónicos. Para usar esta función, habilite el submódulo 'Administrador de correo electrónico programado de formulario web'.
  • Para programar el envío de un correo electrónico con los envíos de formularios, haga clic en el botón "Agregar controlador". Seleccione el controlador 'Correo electrónico programado' aquí.

Solo hay una configuración de configuración adicional en el controlador de 'Correo electrónico programado' en comparación con el 'Administrador de correo electrónico' normal. Y eso es para agregar Programar fecha de correo electrónico en la pestaña Configuración general.

Controlador de correo electrónico programado

Establezca la fecha para activar su controlador y cuando se ejecute el próximo cron, ¡se enviará su correo electrónico!

Encontrar ayuda

Hay diferentes formas de buscar ayuda con el módulo de formulario web. Aquí hay una lista de algunas fuentes:

• Documentación, libro de cocina y Screencasts
  • https://www.drupal.org/docs/8/modules/webform
• Cola de problemas de formulario web
  • https://www.drupal.org/project/issues/webform
• Respuestas Drupal
  • http://drupal.stackexchange.com
• Canal de holgura
  • Siempre puede publicar sus consultas sobre el módulo Webform en el canal #webform dentro del espacio de trabajo de Drupal slack. Cualquiera de la comunidad, incluso el responsable del módulo, está siempre presente y tiene la amabilidad de guiarle con sus problemas.

Un GRAN agradecimiento a Jacob Rockowitz por su incansable apoyo al módulo Drupal 8/9 Webform. Webform no habría sido lo que es ahora sin él.