El poder de webform (antes yaml form)

1. EL PODER DE WEBFORM
David Gil & Ruben Egiguren
#DrupalCampES

2. David Gil
david.gil@biko2.com
@david_gil_biko2
ruben.egiguren@biko2.com
@regiguren
Ruben (keopx) Egiguren

3. Definimos,
diseñamos
y construimos
negocios digitales

4. Podemos presumir de trabajar con ...
¿Te interesa unirte a Biko? ¡Búscanos!

5. ¿Te vienes a
?

6. Webform
8.x-5.x
Jacob Rockowitz (jrockowitz)

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

8. Qué es el módulo
webform

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

10. Historia

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

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

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

14. Creando
Webforms

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

16. Creando
un
Webform

17. Elementos

18. Elementos
Webform trae de
serie más de 70
tipos distintos de
elementos (y
creciendo...).

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

20. Elementos
Edición visual de
propiedades

21. ¡Power user!
edición en
YAML

22. Validación de
campo

23. Cada tipo de elemento
tiene su propia
validación
Validaciones

24. Form States

25. Renderizado y
propiedades
basadas en
valores de otros
campos

26. Mascaras de
entrada

27. Personaliza fácilmente el
formato de entrada de tus
campos
Mascaras de entrada

28. Multi paso

29. Multi paso

30. Multi paso

31. Multi paso

32. Configuración
general

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

34. Configuración
de Webform

35. Handlers
Nos permiten
actuar en el
workflow de
envíos o
renderización de
webform

36. Envíos

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

38. Envíos

39. Extendiendo
Webform

40. /**
* 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

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

42. ■ 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/2b0a4840b5e9315a243b4cf3
59782d80
Creando Handlers personalizados

43. Handlers
Creación de users

44. Handlers
Integración
con APIs

45. Handlers
Creación de nodos
complejos

46. Conclusiones

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

48. ¡Gracias!
Thank you!
#DrupalCampES
@david_gil_biko2
@regiguren
@biko2