el poder de webform (antes yaml form)
TRANSCRIPT
EL PODER DE WEBFORMDavid Gil & Ruben Egiguren
#DrupalCampES
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
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
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
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