Drupal 8 Webform: When Contact Form isn t enough

Transcription

1 Drupal 8 Webform: When Contact Form isn t enough Catherine Winters Pacific Northwest Drupal Summit February 24, 2017

2 Catherine Winters Senior Digital Experience Designer I work for Mitacs, a Canadian non-profit that manages and funds post-secondary and graduate research and training programs.

3 What Mitacs does Internships Postdoctoral fellowships International students from dozens of countries Canadian students travelling overseas Funded by 10 different provincial and federal governments Partnerships with dozens of Canadian universities TL;DR: Forms. Lots of forms. In English and French. Over 1000 industry and not-for-profit partners in the last year alone Professors, companies, students, and postdocs requesting interns, fellows, and partnerships

4 Options for Form Building in Drupal 8 Core Contact/Contact Storage Contact module from core Contact Storage module in contrib Contact Storage Export module in contrib Contact Storage might be in core at some point eform Successor module to Entityform Renamed to avoid namespace confusion Uses Field API Not usable yet, not being actively developed Webform 8.x-5.x Used to be called YAML Form Completely new codebase Uses form builder or YAML Production-ready(ish) Several contrib projects already list it as a dependency

5 Webform 8.x-5.x Standard stuff Drag-and-drop field builder Conditional logic Duplicate forms Send s Store stuff in the database Download it, I guess Cool stuff Attach webforms to content, blocks, even other form submissions Advanced fields and widgets: Tableselect sort, signature, select/ other, Select2, Likert, range sliders, CodeMirror, star ratings, composite form items, wizard pages, etc, etc. Field input masks: ( ) - Per-element field and wrapper JS and CSS Super cool stuff Per-element ACLs In-browser form editing via YAML Reusable option sets via form builder or as YAML Translatable fields instead of duplicating the form Jacob Rockowitz (jrockowitz) is cool and helpful

6 SALES PITCH Why Webform?

7 Why Mitacs needs Webform Dozens of legacy systems:.net, PHP, Drupal, ColdFusion, Flash, Flex, Node, React, etc. Business needs changing Off-the-shelf products like Microsoft Dynamics CRM and Drupal are easier to find developer talent to support We don t have an all-in-one solution And there won t be one.

8 So what s the plan? Gradually replace existing portals with a Drupal 8 site Switch existing portals to use SSO Incrementally replace Flash and Flex front-ends with HTML5 using Bourbon Neat, sharing form styles and layout with Drupal s Basic-derived theme Use Webform on top of a bidirectional interface to legacy databases and to Microsoft Dynamics CRM

9 So what does that mean for me?

10 Training content editors on config They haven t actually noticed that D8 Webforms aren t content

11 Training content editors on UX Cheatsheets Help text Persona testing Walk someone else through the form on the whiteboard Send the form to a teammate for review Just let me do it

12 Who is this form for?

13 Different roles need different fields Users with dietary restrictions or preferences need to feel they re being listened to and that we respect them The event planning team needs to know whether people want the ham sandwich or the salad Form maintainers and translators need shorter forms Future event planners need accurate data

14 Improving the form

15 Making the form more transparent

16 Conditionals are super hard

17 The cheatsheet Who needs to answer this question? Will every user answer this question the same way? Should the form be allowed to be submitted if the answer is no? Does the law require us to ask this question? Has the user already answered this somewhere else? Does this question depend on an answer supplied to a previous question?

18 How could we improve this?

19 LIVE DEMO Demo time.

20 NOTHING WENT WRONG WITH THE DEMO Success! Demo over.

21 Thank you! Catherine Winters drupal.org: