el poder de webform (antes yaml form)

EL PODER DE WEBFORMDavid Gil & Ruben Egiguren

#DrupalCampES

David Gil

david.gil@biko2.com@david_gil_biko2

ruben.egiguren@biko2.com@regiguren

Ruben (keopx) Egiguren

Definimos,diseñamosy construimosnegocios digitales

Podemos presumir de trabajar con ...

¿Te interesa unirte a Biko? ¡Búscanos!

¿Te vienes a ?

Webform8.x-5.x

Jacob Rockowitz (jrockowitz)

■ Qué es/Historia■ Creación de Webforms■ Elementos/Validaciones■ Formularios multi paso■ Configuración de Webform■ Gestión de envíos■ Extendiendo Webform

Qué es el módulo webform

¿QUÉ ES?Un módulo para construir formularios y gestionar los envíos

Historia

■ Webform es el módulo más popular para la creación de formularios en Drupal 7 (>450.000 instalaciones)

■ Cuando se liberó Drupal 8 en Nov-2015 no existía planificación para migrarlo a Drupal 8

■ El proyecto YAML Form comenzó en Diciembre de 2015 por Jacob Rockowitz (@jrockowitz)

■ En diciembre de 2016 YAML Form fue convertido en la versión de Drupal 8 de Webform

■ Jacob Rockowitz continúa siendo el principal mantenedor■ Actualmente tiene >11.000 instalaciones en Drupal 8

HISTORIA

■ Webform: Permite la creación de formularios web y cuestionarios.

■ Webform Node: Proporciona un tipo de contenido Webform que permite integrar los formularios web en un sitio web como nodos.

■ Webform UI: Proporciona una interfaz de usuario para crear y mantener formularios web.

CORE MODULES

■ Webform Devel: Proporciona herramientas de desarrollo para el módulo.

■ Webform Examples: Proporciona ejemplos de todos los elementos y funcionalidades del webform que se pueden utilizar para demostrar y probar funcionalidades avanzadas.

■ Webform Templates: Proporciona plantillas que se pueden utilizar para crear nuevos Webforms.

■ Webform Scheduled Email: Extiende el handler de email para permitir envíos programados.

OTROS MÓDULOS

Creando Webforms

La administración de Webform está en:Estructura/Webforms

Webform Admin

Creando un Webform

Elementos

ElementosWebform trae de serie más de 70 tipos distintos de elementos (y creciendo...).

Elementos■ HTML: Textfield, Textareas, Checkboxes, Radios, Select menu,

Password ...■ HTML5: Email, Url, Number, Telephone, Date, Number, Range ...■ Drupal: File uploads, Entity References, Table select, Date list ...■ Custom: Likert scale, Star rating, Toggle, Buttons, Credit card

number, Geolocation, Select/Checkboxes/Radios with other ...■ Markups: Inline dismissable messages, HTML Markup, Details, y

Fieldsets.■ Compuestos: Name, Address, Contact, Credit Card

ElementosEdición visual de propiedades

¡Power user! edición en YAML

Validación de campo

Cada tipo de elemento tiene su propia validación

Validaciones

Form States

Renderizado y propiedades basadas en valores de otros campos

Mascaras de entrada

Personaliza fácilmente el formato de entrada de tus campos

Mascaras de entrada

Multi paso

Multi paso

Multi paso

Multi paso

Configuración general

1000 posibilidades!■ Configurar los permisos de acceso de un Webform y los envíos■ Inhabilitar el autocompletado de campos■ Deshabilitar la validación en cliente■ Permitir a los usuarios guardar borradores de los envíos■ Permitir a los usuarios actualizar un envío mediante un token

seguro■ Restringir el número de envíos a un Webform en total■ Permitir añadir clases CSS, estilos y Javascript al Webform■ ...

Configuración de Webform

Configuración de Webform

HandlersNos permiten actuar en el workflow de envíos o renderización de webform

Envíos

■ Los envíos de Webform son entidades y contienen todos los datos introducidos en el Webform

■ Además incluyen metadatos: fechas, user id, IP, ...■ Podemos exportar los envíos a diferentes formatos: CSV,

Yaml, HTML, json

Envíos

Envíos

Extendiendo Webform

/** * Implements hook_form_alter(). */function webform_example_form_alter(&$form, &$form_state, $id) { if ($id == 'webform_submission_contact_form') { $form['elements']['name']['#title'] = t('Name'); }}

/** * Implements hook_form_form-id_alter(). */function webform_example_form_webform_submission_contact_form_alter(&$form, &$form_state) { $form['elements']['name']['#title'] = t('Name');}

NOTA: También es posible realizar un alter usando las propiedades de los handler

Alter de Webform

Todos los elementos se basan en Drupal Form API de Core.Básico: Extender campos básicos de Webform. Objeto unico.■ Campo de texto■ Seleccionar lista■ ...

Compuesto - Extender WebformCompositeBase. Se utiliza como contenedor para múltiples elementos.■ Dirección■ Tarjeta de crédito■ ...

Creando elementos personalizados

■ Permiten reaccionar en los diferentes eventos lanzados en el ciclo de vida de un formulario: alterElements, alterForm, validateForm, submitForm, confirmForm, preCreate, postCreate, postLoad, preSave, postSave, preDelete, postDelete

■ https://gist.github.com/davidgil/2b0a4840b5e9315a243b4cf359782d80

Creando Handlers personalizados

HandlersCreación de users

HandlersIntegracióncon APIs

HandlersCreación de nodoscomplejos

Conclusiones

■ Compatible con la API de Drupal Form■ Robusto desde fases iniciales, en continua evolución■ Extensible fácilmente, convirtiéndolo en una herramienta

potente con un poco de imaginación■ Hay alternativas, pero ni de lejos tan avanzadas y robustas:

contact + contact_storage, eform

Conclusiones

¡Gracias!Thank you!#DrupalCampES

@david_gil_biko2@regiguren@biko2