webform

Webform multi pasos en Drupal 8/9/10

Video de Youtube
URL de Video remoto

     En la mayoría de los proyectos web, es necesaria la implementación de formularios, relacionados con el registro de usuario, la contratación del un nuevo servicio, etc. 

     Generalmente los formularios no suelen ser muy extensos, por lo que su implementación tampoco requiere demasiado esfuerzo, pero en algunos casos, necesitaremos implementar formularios muy complejos, con numerosos campos, que podrían matar el interes de los usuarios, si los presentamos por completo, en una misma página; por esta razón existen los formularios de varios pasos, que permitirán distribuir los campos en varias páginas, haciendo que el proceso de rellenar los datos no resulte tan abrumador.

     El módulo Webform de Drupal, ya viene con un asistente o (wizard), que nos ayudará a crear este tipo de formularios, sin la necesidad de añadir código o dejar la interfaz de usuario administrador de drupal.

   Cómo configurar un formulario multi-pasos con webform

     Para este ejemplo, hemos creado un formulario donde tendremos que copilar algunos datos de los usuarios y otros relacionados con la empresa en la que trabajan.

Imagen
Webform multi-steps Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Dividiendo el formulario en varios pasos 

     Ahora que ya hemos añadido todos los campos que vamos a necesitar para nuestro formulario, es el momento de dividirlos en varios pasos o páginas, gracias al asistente de weborm. Así que haremos clic en el botón de Add page o añadir página, ubicado en la parte superior de la ventana de creación del formulario y, a continuación, nombraremos la página de acuerdo con el objetivo de esa parte del formulario; porque de esta manera el usuario sabrá en todo momento, dónde se encuentra y le ayudará a recordarlo, en caso de que no llegara a rellenarlo completamente. 

Imagen
Webform multi-steps Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Al hacer clic en el botón Añadir página o (Add page), se desplegará a la derecha de la pantalla, la misma ventana que se activa al añadir cualquier tipo de campo en el formulario; en este caso, sólo añadiremos el nombre que se desplegará cuando el usuario se encuentre en esta parte o paso del proceso. 

     Repertiremos los mismos pasos, para cada una de las partes del formulario. 

Imagen
Webform multi-steps Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Cuando tengamos añadidas todas las páginas, pantallas o "pasos" de nuestro formulario, que se irán agregando a la parte inferior de nuestro webform, lo próximo será distribuir cada uno de los campos, en su página correspondiente.  Para ello, solo tendremos que arranstrar dichos campos, posicionándolos debbajo del nombre de la página, como cuando trabajamos con los elementos de un submenú.

Imagen
Webform multi-steps Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Para nuestro ejemplo, vamos hemos creado dos páginas: (INFORMACIÓN DEL USUARIO e INFORMACIÓN DE LA EMPRESA), una vez creadas las dos páginas, hemos arrastrado y colocado cada uno de los campos del formulario, justo debajo de su página correspondiente.

     El resultado debería ser igual a la siguiente imagen.

Imagen
Webform multi-steps Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony
Imagen
Webform multi-steps Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Comprobación, personalización y otras opciones

     Cuando hayamos colocado todos los campos del formulario, según nuestras necesidades, podremos confirmar el resultado del mismo, haciendo clic en el botón VER, ubicado en la parte superior de la pantalla de edición del webform. Esto nos llevará a la ventana página que nos enseña cómo queda nuestro webform con todos dus elelementos por defecto, incluyendo un indicador de los diferentes pasos o páginas de los que consta el formulario.

Imagen
Webform multi-steps Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Como habrás podido comprobar, sin cambiar ninguna de las configuraciones, el resultado final, puede servirnos perfectamente para utilizar nuestro webform multi-pasos, tal y como Drupal nos lo presenta. Pero tenemos otras opciones, con las cuáles realizar algunas personalizaciones de nuestro formulario.

     Para proceder con la personalización de nuestro webform, podríamos acceder directamente desde el icono de edición rápida, que aparecerá al colocarnos sobre el formulario y seleccionando la opción build, o mediante moviéndonos a la url "/admin/structure/webform/manage/NOMBRE_WEBFORM"

Imagen
Webform multi-steps Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Las opciones disponibles para personalización, variarán según el elemento que seleccionemos en el formulario. Por ejemplo, si seleccionamos una de las páginas o "pasos", podremos personalizar el nombre o palabra que se muestra en los botones que permiten acceder y navegar entra cada una de las páginas.

Imagen
Webform multi-steps Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony
Imagen
Webform multi-steps Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Webform | Agregar campo para adjuntar archivos

Video de Youtube
URL de Video remoto

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

   En todo formulario, es posible que necesitemos ofrecer la oportunidad al usuario, para que nos envíe documentación adjunta, ya sea una imágen, un archivo en formato Pdf, Word, Excel, Txt, o cualquier otro tipo que nos haga falta.

   Así que en esta ocasión, vamos a configurar un campo que permita esta opción, además de que los archivos que adjunte el usuario, sean guardados en la carpeta de Archivos privados de Drupal; de esta manera, como administradores, podremos consultar dichos adjuntos, desde la interfaz de usuario, además de recibirlos en el correo electrónico enviado.

   Configuración del campo para adjuntar archivos

     Al igual que hacemos para añadir cualquier otro campo, nos iremos a la pantalla de configuración del webform, y haremos clic en el botón de Añadir elemento, ubicado en la parte superior izquierda.

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Pero notaremos que no vamos a encontrar la opción File, para poder configurar el campo que nos permitirá adjuntar archivos a nuestro webform, esto se debe a que, antes de poder adjuntar archivos, tendremos que crear la carpeta donde se guardarán los archivos privados de nuestro Drupal, por lo tanto, crearemos una nueva carpeta, si todavía no la tenemos, llamada private, dentro de nuestra carpeta "web/sites/default/files"; a continuación, abriremos el archivo settings.php, y buscaremos la siguiente línea, que estará comentada:

# $settings['file_private_path'] = '';

     A continuación, descomentaremos la línea, y añadiremos entre las comillas, la misma ubicación en la que se encontrará nuestra carpeta de archivos private.

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Guardaremos el cambio, y borraremos el cache de Drupal, para estar seguros de que la configuración se actualiza. Podremos hacerlo por consola, usando Drush, o mediante la interfaz de usuario de Drupal.

drush cr

    Una vez activado el submódulo, podremos volver a nuestro Webform y una vez encontremos nuestro formulario, haremos clic en Constuir o Build, dependiendo del idioma que hayas seleccionado en tu instalación de Drupal, y accederemos a las opciones para seguir añadiendo campos o modificar la configuración de nuestro Webform.

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Si volvemos a intentar añadir un nuevo campo, esta vez, tendremos las opciones relacionadas con el campo de Adjuntar archivos o Attach File. Entonces, pordremos pasar a la fase de configuración para nuestro campo, dependiendo de la opción que nos haga falta.

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Cuando estemos dentro de la configuración para nuestro nuevo campo, veremos que aparecerá marcada la opción de guardar los archivos adjuntos en la carpeta de archivos privados, que hemos configurado previamente dentro de settings.php.

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Cuando hayamos terminado con la configuraición de nuestro campo, (Si es obligatorio, si mostrará el título, etc.), entonces, podremos confirmar el aspecto del formulario, haciendo clic en el botón Ver de la parte superior de la página de configuración para Webform. 

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

     El resultado de nuestro nuevo formulario, debería ser parecido a la siguiente imagen, en la que se especifica las extensiones permitidas para los archivos adjuntos.

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Ha llegado el momento de realizar nuestra primera prueba, rellenaremos el formulario y elegiremos una imagen como archivo adjunto, una vez tengamos todo listo, presionaremos el botón enviar.

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Deberíamos ver el mensaje de confirmación de que se ha enviado nuestro formulario correctamente, aunque no tengamos habilitado ningún servidor de correos, en este caso el formulario guardará los datos dentro de la base de datos de Drupal y el archivo en la carpeta privada correspondiente.

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Si vamos a la carpeta de los archivos privados, podremos comprobar, que se ha creado una con el nombre de nuestro formulario, además de otras para los archivos que se irán añadiendo a medida que sigamos trabajando con el webform.

Webform | Módulos Drupal - Primeros pasos

Video de Youtube
URL de Video remoto

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     A pesar de que el formulario de contacto que viene por defecto, en cualquier instalación de Drupal, nos brinda una solución rápida, para ofrecer a nuestros usuarios, un mecanismo de comunicación eficaz, en algunas ocasiones, necesitaremos añadir otras funcionalidades como formularios de múltiples pasos, adjuntar fomatos específicos, o añadir interacciones dependiendo de los campos que se vayan completando.

     Por suerte, existe un módulo bastante potente, conocido como Webform, que nos permitirá un gran número de opciones adicionales, con las que podremos satisfacer la mayoría de los requerimientos para nuestros proyectos, sin la necesidad de abandonar la interfaz de usuario de Drupal.

   Módulo Webform

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

Descarga y Activación:

Para descargar y activar cualquier módulo de Drupal tienes varias opciones:

     Descarga:

          1.- La forma recomendada a partir de Drupal 8, es utilizando el gestor de paquetes Composer, ejecutando en tu consola el comando:

composer require drupal/webform

          2.- Descargándolo manualmente el módulo desde la página oficial del Módulo Webform y una vez descargado y colocado en carpeta "modules/contrib", si haz descargado todos tus módulos manualmente, deberías crear la carpeta "contrib", para que puedas diferenciar entre tus módulos personalizados y los que están disponibles directamente en la Página oficial de Drupal.
 

     Activación:

          1.- Utilizando la herramienta de consola Drush, la opción "-y" activará todos los sub-modulos automáticamente

drush en webform -y

          2.- Desde la interfaz de usuario de Drupal, en la url "/admin/modules", y luego marcando el check junto al nombre de tu módulo y haciendo clic en el botón guardar que aparecer al final de la página.

     A diferencia de otros módulos, Webform cuenta con una larga lista de Submódulos y librerías que permiten ampliar sus funcionaliadades, dependiendo de las necesidades requeridas para tus proyectos. En esta serie de cursos explicaremos algunas de las más comunes, para que puedas comenzar a utillizalas.

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Cómo añadir campos en un Webform

     Para añadir los campos en un formulario, con el módulo webform, haremos clic en el botón "Añadir elemento", ubicado en la parte superior izquierda, de la pantalla del formulario y a continuación, seleccionaremos el tipo de campo que intentamos añadir.

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

     A continuación, completaremos la configuración del campo, rellenando todos los datos según nuestras necesidades. Entre las opciones estarán mostrar el título del campo, hacerlo obligatorio, marcador de posición, entre otras.

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Para ver el resultado del formulario, haremos clic en la pestaña VER, ubicada en la parte superior izquierda de la página de configuración del Webform.

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

Cómo mostrar un Webform

     Existen varias formas de añadir formularios, creados con Webform a nuestros contenidos, las más comunes son las siguientes:

     1.- Añadiendo el formulario a un bloque y mostrándolo en el lugar y posición que nos interesa:
En este caso, nos iremos a la página de configuración de los bloques, ubicada en la url "/admin/structure/block", y a continuación añadiremos un bloque de la manera habitual, haciendo click en la región y, a continuación buscaremos webform dentro de los nombres disponibles.

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

     2.- Añadir formulario mediante un campo referenciado:
     Con esta opción, podremos añadir tantos formularios como necesitemos, dentro de cualuquier contenido, bloque o incluso paragraphs. Sólo tendremos que añadir el tipo de campo referenciado Webform, que nos aparecerá una vez instalado el módulo y a continuación, veremos el listado de todos los formularios disponibles para "Incrustar", junto con el resto de campos. Así no necesitaremos la ayuda de hooks, para que se muestren dentro de cualquier nodo en Drupal.
   Si utilizamos esta opción, tendremos que seleccionar "Mostrar formulario renderizado", para que se muestre tal y como lo hemos diseñado. 

Webform Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

     3.- Usando Hooks:

  1. Puedes acceder al listado de hooks con su explicación, haciendo clic en el menú de Snippet y marcando el filtro hooks.

Webform | Módulos Drupal - Presentación

El módulo Weform es uno de los más completos y potentes módulos de Drupal, permite crear, modificar y configurar formularios, utilizando la interfaz de usuario de Drupal. Posee además numerosas librerías adicionales, que podrán descargarse y activarse, para extender su capacidad hasta cumplir la mayoría de las necesidades existentes en un proyecto.

En este curso, exploraremos los principales temas relacionados con su instalación y varias de las configuraciones disponibles para los formularios creados con él.

Formularios | Manipulación con Preprocess Functions

Video de Youtube
URL de Video remoto

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     Aunque existe un módulo bastante completo llamado webform, Drupal ha mejorado considerablemente el Formulario de contacto que trae por defecto, ofreciendo una alternativa más fácil y práctica, si lo que necesitas es ofrecer esta posibilidad de contactar en tu sitio web.

     Para hacerlo aún más funcional, podremos imprimir este formulario de contacto, dentro de varios contenidos o incluso, dentro de contenedores del tipo Paragraphs, para ello nos ayudaremos de las preprocess_functons(), con las que podremos pasar toda clase de valores, como variables y posteriormente utilizarlas donde nos hagan falta.

     Cómo imprimir el formulario de contacto en un Paragraphs utilizando Preprocess Functions

          Como hemos dicho al principio de este artículo, las Preprocess functions(), nos permitirán pasar como parámetros toda clase de valores, mediante el uso de variables que podremos reutilizar cuando sea requerido, en este ejemplo en particular vamos a utilizarlas para imprimir nuestro formulario de contacto dentro de un elemento Paragraphs, pero tienes otros ejemplos para emplearlas aquí: Ejemplos de uso Preprocess functions 

          Para que podamos imprimir el formulario de contacto, como hemos decidido crear un Subtheme, sólo tendremos que añadir el código dentro del archivo de funciones de nuestro subtheme, tal y como te muestro en la imagen siguiente:

  • Imagen

          Si quieres mostrar el formulario en un contenido normal de Drupal, tipo página por ejemplo: hook_preprocess_node()   

          En este ejemplo en particular, aprovechando que, dentro de un elemento Paragraphs podremos incluir cualquier tipo de campo, nodo o incluso otos Paragraphs, vamos a utilizar la Preprocess function para pasarle como parámetro en formulario a un nodo y posteriormente llamaremos a este nodo desde el Paragraphs.

          Si lo que quisieras lograr es pasar directamente el formulario dentro de la plantilla del Paragraphs, también podrías lograrlo con esta otra función:

          Cómo imprimir un formulario contacto dentro de un Paragraphs Drupal 9

Formularios | Configuración con base de datos en Drupal 9

Video de Youtube
URL de Video remoto

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     Si estás leyendo este artículo, es porque ya has aprendido Cómo crear formularios programáticamente en Drupal 9, sino, Haz clic aquí, pero si todavía no has tenido la oportunidad de leer el artículo, además de ver el video en el que te explico cómo hacerlo, te recomiendo que dediques el tiempo que haga falta, para verlos y entenderlo, antes de continuar con el ejercicio que te voy a mostrar a continuación.

     Nos enfocaremos en programar un formulario, conectado a una base de datos, que nos permita, por ejemplo, rellenar los registros de una tabla personalizada, utilizando los datos introducidos por los usuarios, al complementar la información de sus campos .

     También exploraremos la creación de una plantilla o "template" personalizada para el formulario y, de esta forma, podrás modificar su aspecto, en función de los requerimientos que te hagan falta en otros proyectos similares.   

Requisitos:

 

Cómo crear un formulario conectado a una base de datos programáticamente

     Partiendo de que ya tienes los conocimientos necesarios para crear un módulo personalizado y un formulario con sus respectivos campos, nos enfocaremos en continuar ampliando las funcionalidades del formulario base, creando algunos campos adicionales y explorando los atributos, que nos proporcionarán otras opciones con las que podrás ir experimentando a partir de ahora. 

     El formulario que vamos a crear es para la que los usuarios de nuestra web, puedan inscribirse en un curso de cocina vegetariana. La idea principal será utilizar los campos del formulario, para obtener un poco más de información, sobre los interesados en participar, antes de iniciar el curso.

     Puedes aprender sobre los diferentes tipos de campos del formulario, su implementación y algunos ejemplos, visitando la Página oficial de Drupal Form Api.

     Utilizaremos "taxonomías" o vocabularios, con la opción de autocompletar, para filtrar el área profesional de nuestros futuros alumnos y utilizaremos campos dependientes, para añadir preguntas adicionales, en función del campo seleccionado por el interesado, en el momento en que esté complementando el formulario. 

     Paso 1 Creación de un bloque usando un módulo personalizado:

          Como el objetivo es crear un formulario independiente al proyecto, que podamos personalizar y reutilizar en cualquiera de nuestras webs, tendremos que crear un módulo personalizado, donde colocaremos todos los elementos relacionados con él.

          Lo primero que haremos será crear un módulo personalizado, con el cual vamos a generar el bloque, donde colocaremos posteriormente nuestro formulario de inscripción, de esta forma, podremos activarlo en diferentes zonas de la web, además de restringir su acceso definiendo las páginas y usuarios desde la sección de Administración de Bloques.

          Para cumplir con este primer objetivo, vamos a crear las carpetas y archivos necesarios para genera un bloque personalizado, si todavía no sabes cómo, te invito a echar un vistazo antes de continuar a este artículo Cómo crear un bloque programáticamente en Drupal 9,  Haz clic aquí

          Una vez hayas terminado, con la creación de todos las carpetas y archivos, necesarios para generar un bloque personalizado, deberías tener una estructura parecida a la de la siguiente imagen.

 

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

         Y dentro de la clase con la que vamos a generar nuestro módulo, copiarás y pegarás el siguiente código para comenzar con las pruebas de desarrollo.

<?php

namespace Drupal\vegetarian_food_course\Plugin\Block;

use Drupal\Core\Block\BlockBase;


/**
 * @Block(
 *   id = "Vegetarian Food Course Form",
 *   admin_label = @translation("Vegetarian Food Course Form"),
 *   category = @translation("Vegetarian Food Course Form")
 * )
 */
class VegetarianFoodCourseBlock extends BlockBase {
  /**
   * {@inheritdoc }
   */
  public function build(){
    return [
      '#markup' => '<h1>Formulario de inscripción</h1>',
      '#cache' => [
        'max-age' => 0,
      ],
    ];
  }
}

     Si haz puesto suficiente atención en el proceso, deberías poder activar tu módulo personalizado desde la url "/admin/modules" y a continuación, podrás dirigirte a la pantalla de activación de los bloques, en la url "/admin/structure/block", donde seleccionarás la zona o área Sidebar first, para activar tu módulo y puedas comprobar que se muestra en tu página principal tal y cómo se ve en las siguientes imágenes:

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 2 Creación del formulario de inscripción:

          Ahora que ya hemos comprobado que todo funciona de acuerdo con nuestros planes, pasemos a la siguiente etapa, que consiste en la creación de nuestro formulario de inscripción con todos los campos.

          Para ellos, tendremos que crear todas las carpetas y archivos necesarios, si todavía no sabes cómo, te recomiendo que eches un vistazo antes de continuar a este artículo Cómo crear formularios programáticamente en Drupal 9, Haz clic aquí.

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

         Una vez tengas listos todas las carpetas y archivos necesarios para crear el formulario de inscripción, podrás copiar y pegar en tu clase el código que te muestro a continuación, dentro de la clase de tu formulario:

<?php

namespace Drupal\vegetarian_food_course\Form;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;

/**
 * @file
 * Implement Form API
 */
class VegetarianFoodForm extends FormBase
{

  /**
   * {@inheritdoc }
   */
  public function getFormId()
  {
    return 'vegetarian_food_course_form';
  }

  /**
   * {@inheritdoc }
   */
  public function buildForm(array $form, FormStateInterface $form_state)
  {
    $form['name'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Name'),
      '#description' => $this->t('Name of participant'),
      '#attributes' => [
        'placeholder' => $this->t('Your Name'),
      ],
      '#required' => TRUE,
    ];
    $form['email'] = [
      '#type' => 'email',
      '#title' => $this->t('Email'),
      '#attributes' => [
        'placeholder' => $this->t('Your Email')
      ],
      '#required' => TRUE,
    ];
    $form['vegetarian_question']['active'] = array(
      '#type' => 'radios',
      '#title' => $this
        ->t('Are you Vegetarian?'),
      '#default_value' => 1,
      '#options' => array(
        0 => $this
          ->t('No'),
        1 => $this
          ->t('Yes'),
      ),
    );
//    $form['occupation'] = [
//      '#type' => 'entity_autocomplete',
//      '#target_type' => 'taxonomy_term',
//      '#title' => 'Occupation',
//      '#selection_settings' => [
//        'target_bundles' => ['tags'],
//      ],
//    ];

    $form['actions']['type'] = 'actions';

    $form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Subscribe'),
    ];
    return $form;
  }

  /**
   * {@inheritdoc }
   */
  public function submitForm(array &$form, FormStateInterface $form_state)
  {
    $this->messenger()->addStatus($this->t('Thanks for subscribing @name you will recibe to your email: @email all the information about it',
      ['@name' => $form_state->getValue('name'), '@email' => $form_state->getValue('email')]));

  }
}

    Además, ahora cambiarás el contenido de tu clase VegetarianFoodCourseBlock.php, por el siguiente código, para que en lugar de imprimir un mensaje, como lo hicimos en la primera comprobación, imprima el contenido del formulario que hemos creado.

    Copia y pega el siguiente código, sustituyendo sólo la parte correspondiente a la clase:

class VegetarianFoodCourseBlock extends BlockBase {
  /**
   * {@inheritdoc }
   */
  public function build(){
    return [
      \Drupal::formBuilder()->getForm('\Drupal\vegetarian_food_course\Form\VegetarianFoodForm'),
      '#cache' => [
        'max-age' => 0,
      ],
    ];
  }
}

     Ahora, si vuelves a activar el módulo y el bloque personalizado que creamos anteriormente, podrás ver un formulario con varios campos. Si rellenas los campos y haces clic en el botón Suscribirse, deberías ver en pantalla, un mensaje de confirmación con algunos de los datos que haz introducido.

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Habrás notado, que dentro de la clase hay un campo comentado y por lo tanto no aparece en el formulario, se trata de un campo de tipo autocompletar, que utiliza las taxonomías como opción del formulario, si quisieras activarlo, sólo tendrías que crear previamente algunos términos, dentro del vocabulario al que apunta el campo,  para que se muestren dentro del formulario. 

     Si decides hacer la prueba, antes de continuar, solamente tendrás que descomentar el campo y refrescar el caché de Drupal, recuerda que antes deberías tener al menos un valor para que funcione el autocompletado dentro del campo.

     Paso 3 Creación de una plantilla para el formulario:

          Como nuestra idea es, además de presentar el formulario, imprimir en pantalla los valores que vamos a extraer desde la base de datos, directamente dentro de su mismo bloque y no como un mensaje por defecto en la parte superior de la pantalla, vamos a crear la configuración necesaria, utilizando la función hook_theme(){ }. 

          Si todavía no sabes como utilizarla, te invito a que, antes de continuar, le eches un vistazo al artículo Cómo crear módulos con su controlador y plantilla en Drupal 9,  Haz clic aquí, donde te explico los principios para que puedas entender lo que sucederá a continuación.

          A continuación, vamos a crear el archivo ".module", donde podremos ejecutar los hooks o funciones php de Drupal, en este caso, la hook_theme(){ }, nos permitirá configurar una plantilla personalizada con la que modificaremos los datos que se presentan dentro del bloque, además de imprimir los valores que obtendremos desde la base de datos un poco más adelante.

         Por ahora, tendrás que crear el archivo vegetarian_food_course.module y dentro copiarás y pegarás el código siguiente, correspondiente a la función y los parámetros que vamos a pasarle desde el bloque.

<?php

/**
 * @file
 * Implements hook_theme()
 */


function vegetarian_food_course_theme($existing, $type, $theme, $path) {
  return [
    'vegetarian-food-course-form' => [
      'variables' => [
        'title' => NULL,
        'records' => NULL,
        'form' => NULL,
      ]

    ]
  ];
}

          Esta función nos permitirá crear una plantilla Twig, que nos devolverá un arreglo o array llamado variables, y dentro del mismo, hemos declarado tres valores nulos, porque los obtendremos directamente desde la clase que genera nuestro bloque.

          Estos tres valores, son:

  • Title: que utilizaremos para reescribir el que se muestra por defecto en nuestro bloque
     
  • Records: que nos permitirá imprimir los valores obtenidos cuando nos conectemos a la base de datos
     
  • Form: que nos permitirá imprimir el formulario y hacer modificaciones en su aspecto.

          La siguiente modificación que tendremos que hacer, será dentro de nuestra clase VegetarianFoodCourseBlock.php, porque vamos a invocar la función hook_theme(){ } y además, añadiremos una variable para el formulario y otra para los valores de la base de datos.

          Copia y sustituye el código que te muestro a continuación en la clase VegetarianFoodCourseBlock.php

class VegetarianFoodCourseBlock extends BlockBase {
  /**
   * {@inheritdoc }
   */
  public function build(){

    $form = \Drupal::formBuilder()->getForm('\Drupal\vegetarian_food_course\Form\VegetarianFoodForm');

    $output = [];

    return [
      '#theme' => 'vegetarian-food-course-form',
      '#title' => $this->t('Formulario de Inscripción'),
      '#records' => $output,
      '#form' => $form,
      '#cache' => [
        'max-age' => 0,
      ],
    ];
  }
}

          Llegados a este punto, tendremos que crear la plantilla twig, con el nombre vegetarian-food-course-form.html.twig, dentro de la carpeta templates, tal y como te muestro en la imagen.

 

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

          Luego, copia el código que te muestro a continuación, dentro de tu plantilla y una vez realizado este proceso, podrás ver los cambios dentro del bloque.

<style>
  h1.titulo-inscripcion {
    text-align: center;
    font-weight: 600;
    text-decoration: underline;
    margin-bottom: 30px;
  }
  .formulario-inscripcion {
    padding: 20px 10px;
    border: 2px dotted;
    margin-bottom: 20px;
  }
</style>

<h1 class="titulo-inscripcion">
  {{ title }}
</h1>
<div class="formulario-inscripcion">
  {{ form }}
</div>

          Notarás inmediatamente el nuevo aspecto de tu bloque, hemos añadido algunos estilos en la parte superior de la plantilla, para poder modificar el aspecto del los elementos utilizando las clases con las que hemos envuelto el título y el formulario.

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Si ves el título del bloque por duplicado, es porque todavía estará marcado dentro de la pantalla de Administración de bloques, una vez lo hayas modificados, si refrescas caché lo verás tal y como se muestra en la imagen.

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 4 Creación de la tabla dentro de la base de datos:

          Sientes un gran estado de emoción, por lo lejos que haz llegado en tan poco tiempo, ya conoces la forma de crear un bloque personalizado, un formulario, y además, combinar ambos, para mostrarlos dentro de una plantilla, a la que puedes manipular a tu antojo.

          Así que, sin más dilación, vamos a la parte cumbre de este ejercicio, crearemos la tabla, donde alojaremos todos los datos introducidos a través del formulario, para luego mostrarlos en la plantilla.

          Para lograr nuestro objetivo, crearemos una tabla programáticamente y luego simplemente tendremos que configurar, en el bloque para que los datos que recogeremos se muestren en pantalla.

          Si todavía no haz creado tu primera tabla programáticamente, es el momento de parar para ver el artículo Cómo crear tablas programáticamente en Drupal 9  Haz clic aquí, donde te lo explico detalladamente.

         Crea un archivo llamado vegetarian_food_course.install y dentro, pega el siguiente código, para que se genere tu nueva tabla, con todos los campos que hemos definido en ella.

<?php
/**
 * Implment hook_schema()
 */
function vegetarian_food_course_schema() {

  $schema['vegetarian_food_course'] = array(
    'description' => 'Save the data of the registrants for the course',
    'fields' => array(
      'vid' => array(
        'type' => 'serial',
        'not null' => TRUE,
        'description' => 'Primary Key: Identificador único del participante.',
      ),
      'name' => array(
        'type' => 'varchar',
        'length' => 255,
        'not null' => TRUE,
        'default' => '',
        'description' => 'Participant name.',
      ),
      'lastname' => array(
        'type' => 'varchar',
        'length' => 255,
        'not null' => TRUE,
        'default' => '',
        'description' => 'Participant\'s last name.',
      ),
      'email' => array(
        'type' => 'varchar',
        'length' => 255,
        'not null' => TRUE,
        'default' => '',
        'description' => 'Participant email.',
      ),
      'vegetarian_question' => array(
        'type' => 'varchar',
        'length' => 255,
        'not null' => TRUE,
        'default' => '',
        'description' => 'Participant email.',
      ),
      'occupation' => array(
        'type' => 'varchar',
        'length' => 255,
        'not null' => TRUE,
        'default' => '',
        'description' => 'Participant email.',
      ),
    ),
    'primary key' => array('vid'),
    'indexes' => array(
      'name' => array('name'),
      'lastname' => array('lastname'),
      'email' => array('email'),
      'vegetarian_question' => array('vegetarian_question'),
      'occupation' => array('occupation'),
    ),
  );
  return $schema;
}

 

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

          Esta vez, tendrás que desinstalar el módulo y volver a instalarlo, ya que vamos a crear una tabla, en el momento en que realizamos dicha instalación.

          Además, aprovechamos para añadir algunos campos adicionales, como el apellido y descomentamos el autocompletado del formulario, después de añadir algunos términos dentro del vocabulario tag, para que ya puedas ver al completo como sería el funcionamiento real.

          Por lo tanto, para que puedas probarlo sin errores, copia y sustituye el código dentro de la clase del formulario:

<?php

namespace Drupal\vegetarian_food_course\Form;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;

/**
 * @file
 * Implement Form API
 */
class VegetarianFoodForm extends FormBase
{

  /**
   * {@inheritdoc }
   */
  public function getFormId()
  {
    return 'vegetarian_food_course_form';
  }

  /**
   * {@inheritdoc }
   */
  public function buildForm(array $form, FormStateInterface $form_state)
  {
    $form['name'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Name'),
      '#description' => $this->t('Name of participant'),
      '#attributes' => [
        'placeholder' => $this->t('Your Name'),
      ],
      '#required' => TRUE,
    ];
    $form['lastname'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Last Name'),
      '#description' => $this->t('Last Name of participant'),
      '#attributes' => [
        'placeholder' => $this->t('Your Last Name'),
      ],
      '#required' => TRUE,
    ];
    $form['email'] = [
      '#type' => 'email',
      '#title' => $this->t('Email'),
      '#attributes' => [
        'placeholder' => $this->t('Your Email')
      ],
      '#required' => TRUE,
    ];
    $form['vegetarian_question']['active'] = array(
      '#type' => 'radios',
      '#title' => $this
        ->t('Are you Vegetarian?'),
      '#default_value' => 1,
      '#options' => array(
        0 => $this
          ->t('No'),
        1 => $this
          ->t('Yes'),
      ),
    );
    $form['occupation'] = [
      '#type' => 'entity_autocomplete',
      '#target_type' => 'taxonomy_term',
      '#title' => 'Occupation',
      '#selection_settings' => [
        'target_bundles' => ['tags'],
      ],
    ];

    $form['actions']['type'] = 'actions';

    $form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Subscribe'),
    ];
    return $form;
  }

  /**
   * {@inheritdoc }
   */
  public function submitForm(array &$form, FormStateInterface $form_state)
  {
    $this->messenger()->addStatus($this->t('Thanks for subscribing @name you will recibe to your email: @email all the information about it',
      ['@name' => $form_state->getValue('name'), '@email' => $form_state->getValue('email')]));

  }
}

          Y recuerda, que como hemos desinstalado el módulo, tendremos que volver a Administrar bloques para activarlo nuevamente, tomando en cuenta de que hemos modificado su nombre con el hook_theme(){ }, tendremos que buscarlo con el nuevo nombre que hayamos puesto en la variable title.

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

          Si todo ha ido bien, deberías poder ver un formulario completo, con el nuevo campo autocompletar y el apellido, y al rellenar todos los datos, sería como el que te muestro en la siguiente imagen.

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     A continuación vamos a realizar los últimos cambios, primero crearemos una consulta dinámica, dentro de nuestro bloque, para poder mostar los datos de la tabla en nuestra plantilla, si quieres conocer un poco más sobre la construcción de queries o consultas en Drupal, tienes la Página oficial

     Copia y pega el código siguiente, dentro de la plantilla que genera nuestro bloque:

class VegetarianFoodCourseBlock extends BlockBase {
  /**
   * {@inheritdoc }
   */
  public function build(){

    $form = \Drupal::formBuilder()->getForm('\Drupal\vegetarian_food_course\Form\VegetarianFoodForm');

    $database = \Drupal::database();
    $query = $database->select('vegetarian_food_course', 'vgc');
    $query->fields('vgc');
    $result = $query->execute()->fetchAll();


    return [
      '#theme' => 'vegetarian-food-course-form',
      '#title' => $this->t('Formulario de Inscripción'),
      '#records' => $result,
      '#form' => $form,
      '#cache' => [
        'max-age' => 0,
      ],
    ];
  }
}

     En esta parte del código, nuestro objetivo es decirle a Drupal que consulte en nuestra tabla vegetarian_food_course, todos sus campos y luego los recorra para poder acceder a ellos e imprimirlo dentro de la plantilla, hemos sustituido el array output por $result, para que tenga más coherencia, pero puedes usar el mismo si lo deseas.

     Otra modificación, está en la función submitForm(){}, para que en lugar de imprimir el mensaje en pantalla, como hacíamos al principio del artículo, ahora, cuando rellenemos los campos del formulario, se guarden dentro de la tabla que hemos creado.

     Copia y sustituye el código dentro de la clase que genera el formulario, para conseguir este cambio de funcionalidad.

  /**
   * {@inheritdoc }
   */
  public function submitForm(array &$form, FormStateInterface $form_state)
  {

    \Drupal::database()->insert('vegetarian_food_course')
      ->fields(['name', 'lastname','email','vegetarian_question','occupation'])
      ->values(array(
        $form_state->getValue('name'),
        $form_state->getValue('lastname'),
        $form_state->getValue('email'),
        $form_state->getValue('vegetarian_question'),
        $form_state->getValue('occupation'),
      ))
      ->execute();

     $this->messenger()->addStatus($this->t('Thanks for subscribing @name you will recibe to your email: @email all the information about it',
   ['@name' => $form_state->getValue('name'), '@email' => $form_state->getValue('email')]));

  }
}

     Ahora que ya hemos realizado los cambios en la clase del bloque y en la función submit, si desinstalas y reinstalas el módulo, al rellenar los campos y darte el mensaje de confirmación como antes, también podrás ver que tus datos han sido añadidos a la tabla correspondiente en nuestra base de datos.

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Si abres tu gestor de base de datos, y buscas la tabla relacionada con nuestro módulo, podrás comprobar que todo funciona según lo planeado.

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Añadir traducciones (PLUS):

          Para que nuestro módulo sea completo, pensamos que sería correcto añadirle los archivos de traducción y la configuración adicional, para que al instalarlo, Drupal los reconozca y automáticamente los muestre en el idioma correspondiente.

          Para que podamos añadir archivos de este tipo, primero tendremos que agregar algunas líneas dentro de nuestro archivo .info, y, posteriormente, el archivo que contendrá todas nuestras traducciones.

          Nuestro archivo .info, quedará de la siguiente forma:

name: Vegetarian Food Course
description: 'Create a registration form for the course'
package: drupaladicto

type: module
core_version_requirement: ^8.8.0 || ^9.0

project: vegetarian_food_course
'interface translation project': vegetarian_food_course
'interface translation server pattern': modules/custom/vegetarian_food_course/translations/vegetarian_food_course-%language.po

dependencies:
  - node

     Una vez hayamos añadido la información relacionada con nuestro archivo de traducciones y su ruta, podremos añadir nuestro archivo correspondiente, que para este ejercicio queda de la siguiente forma:

msgid "Name of participant"
msgstr "Nombre del participante"

msgid "Last Name of participant"
msgstr "Apellido del participante"

msgid "Are you Vegetarian?"
msgstr "¿Eres vegetariano?"

msgid "More Vegetarians in your Family?"
msgstr "¿Hay más vegetarianos en tu familia?"

msgid "Other vegetarians"
msgstr "Otros familiares vegetarianos"

msgid "Occupation"
msgstr "Profesión"

msgid "Your Name"
msgstr "Su nombre"

msgid "Your Last Name"
msgstr "Su apellido"

msgid "Your Email"
msgstr "Su correo electrónico"

msgid "1 Person"
msgstr "1 Persona"

msgid "2 Persons"
msgstr "2 Personas"

msgid "3 Persons"
msgstr "3 Personas"

msgid "All my family"
msgstr "Toda mi familia"

     Recuerda, que la ubicación debe corresponder con la que haz declarado en tu archivo .info o no funcionará.

Formularios | Imprimir en bloque programáticamente

Video de Youtube
URL de Video remoto

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

      Una de las necesidades con las que podremos encontrarnos, al desarrollar ciertos proyectos web, es que nuestro cliente necesite, además de tener un formulario personalizado, la característica o funcionalidad adicional, de mostrarlo en cualquier lugar de la web que lo requiera.

     Una de las posibles razones, para requerir de esta opción, sería, por ejemplo, si quiere hacer una campaña, anunciando un descuento específico a los usuarios que se registren para aprovechar dicha oferta.

     Por esta razón, hoy vamos a desarrollar un módulo personalizado, en el que presentaremos un pequeño formulario, que podremos mostrar en cualquier página de la web, utilizando los bloques de Drupal.

     La idea, es explorar un poco más acerca de la creación de formularios personalizados, además de conocer la manera de invocarlos, para que estén disponibles en cualquier lugar que nos haga falta, mediante el uso de la clase "FormBuilder" de Drupal.

     Requisitos:

Cómo imprimir un formulario dentro de un bloque en Drupal 9

     Paso 1 Creación de tu módulo:

           Lo primero que deberías saber es cómo crear un módulo personalizado. Esencialmente para este ejemplo, lo que necesitarás será una carpeta con el nombre de tu módulo y dentro el archivo con el nombre del módulo y la extensión, eje.: "mimodulo.info.yml"

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Y dentro del archivo bloque_formulario_personalizado.info.yml, necistarás el código para que Drupal lo reconozca como módulo y pueda ser activado una vez hayamos terminado.

name: Bloque Formulario Personalizado
description: 'Bloque Formulario Personalizado'
package: drupaladicto

type: module
core_version_requirement: ^8.8.0 || ^9.0

     Paso 2 Creación del formulario personalizado:

     Ahora que ya tenemos lo necesario para activar nuestro módulo, la siguiente tarea será crear nuestro formulario personalizado. Para hacer esto posible, primero tendremos que crear dos carpetas: src y Form y a continuación la clase que nos servirá para general nuestro formulario.

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Dentro de nuestra clase FormularioPersonalizado.php, añadiremos las clases y elementos necesarios para la creación del formulario. Para continuar con el ejercicio, deberías haber leído y antes el artículo dónde explico paso a paso Haz clic aquí, lo único adicional que hemos añadido para este ejemplo son los atributos para imprimir el "Placeholder" y la opción de "Required" para hacer el campo obligatorio.

     El formulario, una vez activado el módulo, mostrará los campos "Nombre" y "Correo electrónico" con su respectivo botón "Enviar" y al hacer clic en dicho botón, imprimirá en pantalla un mensaje de confirmación con los datos del formulario.

<?php

namespace Drupal\bloque_formulario_personalizado\Form;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;

/**
 * @file
 * Formulario Inscripcion Form
 */
class FormularioPersonalizado extends FormBase {
  /**
   * {@inheritdoc }
   */
  public function getFormId()
  {
    return 'bloque_formulario_personalizado_form';
  }

  /**
   * {@inheritdoc }
   */
  public function buildForm(array $form, FormStateInterface $form_state)
  {
    $form['nombre'] = [
      '#title' => $this->t('nombre'),
      '#type' => 'textfield',
      '#attributes' => [
        'placeholder' => $this->t('name'),
      ],
      '#required' => TRUE,
    ];
    $form['email'] = [
      '#type' => 'email',
      '#attributes' => [
        'placeholder' => $this->t('Write your email'),
      ],
    ];

    $form['actions']['type']= 'actions';

    $form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Enviar'),
      '#buttom_type' => 'primary'
    ];
    return $form;
  }

  /**
   * {@inheritdoc }
   */
  public function submitForm(array &$form, FormStateInterface $form_state)
  {
    return $this->messenger()->addStatus($this->t('Your info @nombre and @email has been updated',
      ['@nombre'=>$form_state->getValue('nombre'),'@email' =>$form_state->getValue('email')]));
  }

}

     Paso 3 Creación del Bloque personalizado:

          A continuación, vamos a crear el bloque personalizado, para poder imprimir dentro de éste nuestro formulario y así, tendremos la opción de manipularlo para mostrarlo en cualquier página de nuestra web, accediendo a la url "/admin/structure/block", donde se administran los bloques en Drupal.

         Para la creación del bloque personalizado puedes consultar el artículo Haz clic aquí, donde verás todo el proceso explicado paso a paso para que puedas entender lo que estamos haciendo.

         En el código que verás a continuación, la única novedad que hemos añadido es la llamada a nuestro formulario, utilizando el método getForm de la clas FormBulder de Drupal ; con este método, sólo necesitarás pasarle como parámetro el namespace que apunta a tu formulario y él se encargará de buscarlo e interpretarlo para que se muestre en tu web.

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony
<?php

namespace Drupal\bloque_formulario_personalizado\Plugin\Block;

use Drupal\Core\Block\BlockBase;


/**
 * @Block(
 *   id= "formulario_inscripcion_block",
 *   admin_label = @translation("Formulario Inscripcion Block"),
 *   category = @translation("Formulario Inscripcion Block")
 * )
 */

class FormularioInscripcionBlock extends BlockBase{
  /**
   * {@inheritdoc }
   */
  public function build()
  {
    return [
      \Drupal::formBuilder()->getForm('\Drupal\bloque_formulario_personalizado\Form\FormularioPersonalizado'),
      '#cache' => [
        'max-age' => 0,
      ],

    ];

  }
}

     Paso 4 Activación del módulo y el el bloque:

          Ya sólo nos queda activar el módulo desde la url "/admin/modules" y una vez realizada esta acción, nos moveremos hacia la pantalla de administración de los bloques, donde podremos seleccionar la región o zona para mostrarlo, además de poder filtrar si queremos que sólo se vea en la página principal o en alguna otra página específica.

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Custom Form Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Formularios | Creación programáticamente en Drupal 9

Video de Youtube
URL de Video remoto

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     Una de las partes de más importantes de toda web son sus formularios, desde el típico que utilizamos para que nuestros usuarios nos contacten, con cualquier tipo de solicitud de información, hasta otros mucho más complejos como el de suscripción a un curso o el de compra de artículos en una tienda online.

     A partir de Drupal 8, el formulario de contacto del sitio, que nos viene por defecto en una instalación, nos ofrece varias novedades como la de ampliar el número de campos para recabar más información, si nos hace falta, o también la oportunidad de combinar formulario de contacto del sitio, con otros elementos como los paragraphs Haz clic aquí, por medio de las "preprocess_functions" añadiendo así un amplio abanico de opciones.

     Otra alternativa con la que contamos ya en Drupal 9 es el Módulo Webform, que también ofrece un gran número de opciones y configuraciones, que prácticamente nos permitirán cubrir cualquier necesidad en cuanto a la generación de formularios, aunque, debido a su gran tamaño y complejidad, puede que debas pensarlo bien antes de descargar y activar un montón de recursos para tu web, sin una verdadera necesidad que lo justifique.

     Por último, pero no menos importante, está la creación de formularios creados a medida, mediante un módulo personalizado y la API de Drupal, ofreciéndote así un control absoluto sobre sus funcionalidades, para que tus proyectos cumplan con los requisitos exactos.

     Requisitos:

     - Antes de comenzar a crear tu propio formulario, necesitarán al menos conocer cómo crar módulos personalizados en Drupal 9 Haz clic aquí.

     Cómo crear un formulario programáticamente

       Paso 1 Creación de tu módulo:

          Lo primero que deberías saber es cómo crear un módulo personalizado. Esencialmente para este ejemplo, lo que necesitarás será una carpeta con el nombre de tu módulo y dentro el archivo con el nombre del módulo y la extensión, eje.: "mimodulo.info.yml"

     Paso 2 Añadir nuestra clase Form:

     A continuación, añadiremos la clase php en la que vamos a guardar todo el código relacionado con la creación y funcionalidades de nuestro formulario. Esta clase estará alojada dentro de las carpetas "src/Form" y tendrá el mismo nombre que nuestro módulo, con la diferencia de que estará compuesta por las dos palabras con mayúscula inicial, terminado en la extensión php.

Form API Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Para conocer más sobre la creación de formularios en Drupal 9, puedes dirigirte a la Página oficial de Drupal, donde explica con más detalle los pasos y componentes necesarios para crear un formulario programáticamente, tal y como hemos hecho en nuestro video.

     También puedes aprender sobre los diferentes tipos de campos del formulario, su implementación y algunos ejemplos, visitando la Página oficial de Drupal Form Api.

     Contenido de la clase Form

     Namespace, FormBase y FormStateInterface:

     En la primera sección de nuestra clase, tendremos que especificar el namespace o ruta, para que Drupal pueda encontrar nuestro módulo. Y a continuación, necesitaremos añadir dos clases fundamentales para la creación de cualquier formulario, estas clases son "FormBase" y "FormStarteInterface", la primera se encarga de generar la estructura del formulario y sus funcionalidades principales y la segunda, nos servirá para gestionar los datos introducidos a través del formulario, mediante la clase $form_state.

<?php

namespace Drupal\custom_form\Form;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;

      Generación del ID o identificador del formulario:  

     El primero de los métodos que vamos a necesitar es el "getFormId(){ }", que nos servirá para configurar el identificador único, con el que Drupal podrá activar y leer los datos relacionados con nuestro formulario. Es una práctica recomendada, el uso del nombre del módulo, como parte de este identificador, de esta forma evitaremos conflictos con otros formularios existentes en nuestra instalación.

class CustomForm extends FormBase{
  /**
   * {@inheritdoc }
   */
  public function getFormId(){
    return 'custom_form_form';
  }

     Construcción del formulario:

     El segundo de los métodos imprescindibles para la creación de nuestro formulario personalizado, es el "buildForm(){ }", que se encargará de construir verdaderamente la estructura central del fomulario. 

     Esto significa que en esta parte es donde tendremos que definir todos los campos, con sus respectivos atributos, como tipo, clases, si son obligatorios o dependientes de otros campos, etc.

     Es muy importante, no olvidar que en este método deberán estar el botón del Submit, que es el que nos servirá para ejecutar el siguiente paso una vez hallamos rellenado el formulario, y el "return $form", para garantizar que se impriman en pantalla todos los campos que hemos definido previamente.

/**
 * {@inheritdoc }
 */
public function buildForm(array $form, FormStateInterface $form_state) {
  $form['name']=[
    '#type' => 'textfield',
    '#title' => $this->t('name'),
  ];
  $form['lastname']=[
    '#type' => 'textfield',
    '#title' => $this->t('lastname'),
  ];

  $form['submit']=[
    '#type' => 'submit',
    '#value' => $this->t('Send'),
  ];

  return $form;

}

     Ejecutando la acción del formuario:

     En este último método, llamado "submitForm() {}", es donde definimos lo que queremos que suceda, una vez el usuario haya completado el formulario y hecho clic en el botón submit. 

     Esta acción puede ser desde imprimir un mensaje en pantalla, usando los datos del formulario, como hemos decidido hacer en nuestro ejemplo, hasta guardar los datos en base de datos de Drupal, enviarlos a un correo electrónico o conectarse mediante servicios web con otro servidor externo a nuestra instalación.

     En nuestro ejemplo, lo que haremos es recoger los valores de los campos, nombre (name) y apellido (lastname), para imprimirlos en pantalla utilizando el servicio $messenger, que sustituye al antiguo set_message(), utilizado en versiones anteriores de Drupal.

     Además, concatenaremos los valores extraidos del formulario con un texto adicional.

/**
 * {@inheritdoc}
 */
public function submitForm(array &$form, FormStateInterface $form_state) {
  $this->messenger()->addStatus($this->t('Good mornig @fullname', ['@fullname' => $form_state->getValue('name')." ".
    $form_state->getValue('lastname')]));
}

     Puedes explorar otras formas opciones disponibles para imprimir mensajes usando $messenger en Drupal 9 Haz clic aquí

     Una vez completada la configuración de la clase, para generar nuestro formulario y antes de activar nuestro módulo, necesitaremos crear el archivo "routing.yml", para poder acceder al formulario vía url, una vez activado.

     La clase CustomForm.php completa, queda de la siguiente manera:

<?php

namespace Drupal\custom_form\Form;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;

class CustomForm extends FormBase{
  /**
   * {@inheritdoc }
   */
  public function getFormId(){
    return 'custom_form_form';
  }
  /**
   * {@inheritdoc }
   */
  public function buildForm(array $form, FormStateInterface $form_state) {
    $form['name']=[
      '#type' => 'textfield',
      '#title' => $this->t('name'),
    ];
    $form['lastname']=[
      '#type' => 'textfield',
      '#title' => $this->t('lastname'),
    ];

    $form['submit']=[
      '#type' => 'submit',
      '#value' => $this->t('Send'),
    ];

    return $form;

  }

  /**
   * {@inheritdoc}
   */
  public function submitForm(array &$form, FormStateInterface $form_state) {
    $this->messenger()->addStatus($this->t('Good mornig @fullname', ['@fullname' => $form_state->getValue('name')." ".
      $form_state->getValue('lastname')]));
  }

}

     Paso 3 Cofiguración ruta de acceso:

     Ya tenemos nuestro formulario listo para que funcione, ahora solamente nos falta decirle a Drupal, cómo podrá acceder para mostrarlo en pantalla; para ello, tendremos que crear nuestro archivo "custom_form.routing.yml", con la información necesaria para que esto suceda correctamente una vez activemos nuestro módulo.

     Es muy importante vigilar los espacios en cada una de las líneas del archivo routing, o no podremos obtener el resultado esperado. 

     No utilices el tabulador al crear este tipo de archivo, en su lugar vigila tener en cuenta "dos espacios", contando a partir del margen izquierdo, en cada nueva línea y sumando "dos espacios más", en el caso de elementos que estén dentro de otros.

     El archivo "custom_form.routing.yml", queda de la siguiente manera:

custom_form.form:
  path: '/miformulario'
  defaults:
    _form: '\Drupal\custom_form\Form\CustomForm'
    _title: 'My Custom form'
  requirements:
    _permission: 'access content'

     En la primera línea, al igual que hicimos en nuestra clase, especificamos el "namespace", pero en formato "yml", esto nos servirá al momento de implementar otras funcionalidades como por ejemplo, el acceso desde un menú.

     En la segunda línea, definimos la url de acceso para que Drupal encuentre nuestro formulario una vez activado el módulo.

     El apartado "Defaults", nos permite indicar la ruta de acceso a nuestra clase y el título que se mostrará en la página del formulario, una vez lo hayamos activado.

     En el apartado "requirements", estamos definiendo los permisos o accesos específicos para nuestro formulario, en este ejemplo, el permiso es el que tiene drupal para todos los usuarios públicos.

Formularios en Drupal | Introducción a Form API

     Las clases de formulario implementan \Drupal\Core\Form\FormInterface y el flujo de trabajo básico de un formulario se define mediante los métodos buildFormvalidateForm y submitForm de la interfaz.

     Cuando se solicita un formulario, se define como un arreglo (array) representable, a menudo denominada arreglo (array) API de formulario o simplemente arreglo (array) $form.

     El arreglo $form se convierte a HTML mediante el proceso de representación y se muestra al usuario final. Cuando un usuario envía un formulario, la solicitud se realiza a la misma URL en la que se mostró el formulario, Drupal nota los datos HTTP POST entrantes en la solicitud y esta vez, en lugar de crear el formulario y mostrarlo como HTML, crea el formulario y luego procede a llamar a los controladores de validación y envío correspondientes.

     Definir formularios como arreglos estructurados, en lugar de HTML directo, tiene muchas ventajas, entre ellas:

  • Salida HTML coherente para todos los formularios.
  • Los formularios provistos por un módulo pueden ser modificados fácilmente por otro sin una lógica compleja de búsqueda y reemplazo.
  • Los elementos de formularios complejos, como la carga de archivos y los widgets de votación, se pueden encapsular en paquetes reutilizables que incluyen lógica de visualización y procesamiento.

     Hay varios tipos de formularios comúnmente utilizados en Drupal. Cada uno tiene una clase base que puede ampliar en su propio módulo personalizado.

Primero, identifique el tipo de formulario que necesita construir:

  • Una forma genérica. Ampliar FormBase..
  • Un formulario de configuración que permite a los administradores actualizar la configuración de un módulo. Ampliar ConfigFormBase.
  • Un formulario para eliminar contenido o configuración que proporciona un paso de confirmación. Ampliar ConfigFormBase.

     FormBase implementa FormInterface, y tanto ConfigFormBase como ConfirmFormBase extienden FormBase, por lo tanto, cualquier formulario que amplíe estas clases debe implementar algunos métodos necesarios.

Métodos requeridos


FormBase implementa FormInterface y, por lo tanto, cualquier formulario que tenga FormBase en su jerarquía debe implementar algunos métodos:

     Para más información, visita la página oficial de Drupal Form Api