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.
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.