Download - El poder de webform (antes yaml form)
![Page 1: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/1.jpg)
EL PODER DE WEBFORMDavid Gil & Ruben Egiguren
#DrupalCampES
![Page 3: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/3.jpg)
Definimos,diseñamosy construimosnegocios digitales
![Page 4: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/4.jpg)
Podemos presumir de trabajar con ...
¿Te interesa unirte a Biko? ¡Búscanos!
![Page 5: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/5.jpg)
¿Te vienes a ?
![Page 6: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/6.jpg)
Webform8.x-5.x
Jacob Rockowitz (jrockowitz)
![Page 7: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/7.jpg)
■ Qué es/Historia■ Creación de Webforms■ Elementos/Validaciones■ Formularios multi paso■ Configuración de Webform■ Gestión de envíos■ Extendiendo Webform
![Page 8: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/8.jpg)
Qué es el módulo webform
![Page 9: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/9.jpg)
¿QUÉ ES?Un módulo para construir formularios y gestionar los envíos
![Page 10: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/10.jpg)
Historia
![Page 11: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/11.jpg)
■ 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
![Page 12: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/12.jpg)
■ 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
![Page 13: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/13.jpg)
■ 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
![Page 14: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/14.jpg)
Creando Webforms
![Page 15: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/15.jpg)
La administración de Webform está en:Estructura/Webforms
Webform Admin
![Page 17: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/17.jpg)
Elementos
![Page 18: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/18.jpg)
ElementosWebform trae de serie más de 70 tipos distintos de elementos (y creciendo...).
![Page 19: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/19.jpg)
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
![Page 20: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/20.jpg)
ElementosEdición visual de propiedades
![Page 21: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/21.jpg)
¡Power user! edición en YAML
![Page 22: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/22.jpg)
Validación de campo
![Page 23: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/23.jpg)
Cada tipo de elemento tiene su propia validación
Validaciones
![Page 24: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/24.jpg)
Form States
![Page 25: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/25.jpg)
Renderizado y propiedades basadas en valores de otros campos
![Page 26: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/26.jpg)
Mascaras de entrada
![Page 27: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/27.jpg)
Personaliza fácilmente el formato de entrada de tus campos
Mascaras de entrada
![Page 28: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/28.jpg)
Multi paso
![Page 29: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/29.jpg)
Multi paso
![Page 30: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/30.jpg)
Multi paso
![Page 32: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/32.jpg)
Configuración general
![Page 33: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/33.jpg)
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
![Page 34: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/34.jpg)
Configuración de Webform
![Page 35: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/35.jpg)
HandlersNos permiten actuar en el workflow de envíos o renderización de webform
![Page 36: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/36.jpg)
Envíos
![Page 37: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/37.jpg)
■ 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
![Page 39: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/39.jpg)
Extendiendo Webform
![Page 40: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/40.jpg)
/** * 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
![Page 41: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/41.jpg)
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
![Page 42: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/42.jpg)
■ 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
![Page 43: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/43.jpg)
HandlersCreación de users
![Page 44: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/44.jpg)
HandlersIntegracióncon APIs
![Page 45: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/45.jpg)
HandlersCreación de nodoscomplejos
![Page 46: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/46.jpg)
Conclusiones
![Page 47: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/47.jpg)
■ 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
![Page 48: El poder de webform (antes yaml form)](https://reader034.vdocuments.co/reader034/viewer/2022042605/5a66e0d57f8b9acd178b45af/html5/thumbnails/48.jpg)
¡Gracias!Thank you!#DrupalCampES
@david_gil_biko2@regiguren@biko2