1. Bootstrap Form Builder Adam Griffith, Web Developer Montana State University

2. Today’s Topics History of the projectHistory of the project Live Delivery Platform (LDP)Live Delivery Platform (LDP) –Form XML Objects XSL DesignXSL Design $_POST’ing to a submission handler$_POST’ing to a submission handler

3. The Day Everything Changed

4. 20,000+ form submissions. Email accounts shut down. Business processes halted. It was bad!

5. Our Plan? New Submission HandlerNew Submission Handler New HTML Form ToolNew HTML Form Tool

6. Phase 1 New Submission Handler

7. Replaced the FormMail script on web serversReplaced the FormMail script on web servers Wrote our own submission handler, Karatemail.Wrote our own submission handler, Karatemail.

8. Phase 2 New HTML Form Tool

9. Goals Bring protected forms to non-technical developers.Bring protected forms to non-technical developers. Submission handler integration.Submission handler integration. Create via OU Campus.Create via OU Campus. Meet all accessibility requirements.Meet all accessibility requirements. Responsive design.Responsive design.

10. The Live Delivery Platform (LDP) As of OU Campus 10.3.3

11. Optional module for OU Campus.Optional module for OU Campus. Includes several features such as a “Managed Form” asset type.Includes several features such as a “Managed Form” asset type.

12. LDP Forms Asset generates an XML objectAsset generates an XML object Publishing an asset requires the Server- Side Module (SSM).Publishing an asset requires the Server- Side Module (SSM). –Stores form submission information

13. Asset User Interface

14. Generated XML Object <elements> Sample Input Sample Input </elements><output> default default <email>...</email> </ouform>

15. Current Form Elements Single-Line Text FieldSingle-Line Text Field Multi-Line Text FieldMulti-Line Text Field Radio ButtonsRadio Buttons CheckboxesCheckboxes Drop-DownDrop-Down Multi-SelectMulti-Select

16. Form Elements Wish List Color pickersColor pickers ComboboxesComboboxes Date/Date Range selectorsDate/Date Range selectors Fax/Tel numbersFax/Tel numbers EmailsEmails Time selectorsTime selectors URLsURLs US ZipcodesUS Zipcodes WYSIWYGsWYSIWYGs

17. How Do You Customize? The Asset XML

18. Making New Form Elements You cannot change the XML tags generated by the form asset.You cannot change the XML tags generated by the form asset. Every tag contains an tag.Every tag contains an tag. –Values can be parsed in the XSL layer to “overload” an existing.

19. Making Fieldsets Start a fieldset with tag values.Start a fieldset with tag values. Close a fieldset the same way.Close a fieldset the same way.

20. XML Example Poster HTML Poster HTML <default/><validation/><validationfail>default</validationfail><advanced>custom-type=wysiwyg;fieldset-start=true;fieldset-label=Poster;fieldset-end=true;</advanced><options/></element>

21. Resulting Form Element

22. Let’s look at an actual form!Let’s look at an actual form!actual formactual form

23. How Do You Customize? The XSL

24. Where is the Source? The XSL usually located in:The XSL usually located in: – /mysite/_xsl/_shared/forms/forms.xsl MSU created centralized “XSL source” site for our 660+ sites managed in OU Campus.MSU created centralized “XSL source” site for our 660+ sites managed in OU Campus.

25. Modularize codebase with multiple XSL files.Modularize codebase with multiple XSL files.

26. Build out matches such as:Build out matches such as: –“element[@type = ‘xxxx‘ … ]” –“ouc:div//ouform” Use modes (like namespaces)Use modes (like namespaces) –e.g. “ouforms-input”

27. Create a library of functions to use with XPath.Create a library of functions to use with XPath. Write ou:get-adv().Write ou:get-adv(). For example:For example: –match=“element[@type = 'input-text' and ou:get-adv(advanced,'custom-type') = 'color']”

28. How Do You Customize? Accessibility & Responsive Design

29. Accessibility Use,, and other standard HTML5 tags.Use,, and other standard HTML5 tags. Add the “for” attribute to all tagsAdd the “for” attribute to all tags ARIAARIA –aria-hidden, aria-invalid, aria-required, aria- labeledby, aria-describedby, etc..

30. Example HTML Last Name </label> </div>

31. Responsive Design ~30% of MSU’s web traffic mobile~30% of MSU’s web traffic mobile Bootstrap frameworkBootstrap framework Upshots:Upshots: Built-in form stylingBuilt-in form styling Grid and breakpoint supportGrid and breakpoint support

32. Example HTML Last Name </label> </div>

33. Desktop vs. Mobile View

34. How Do You Customize? The Validation

35. Form Element Validation We moved to client-side validation.We moved to client-side validation. –jQuery Validation Plugin –Independence from the SSM database. –JavaScript integration with custom form elements.

36. Custom “Failure Text” support.Custom “Failure Text” support. –provided via the asset UI’s input field or field ARIA tag and accessibility integration.ARIA tag and accessibility integration.

37. Element Validation Example

38. Form Validation All forms include:All forms include: –Honeypot variables –Optional reCAPTCHA.

39. Form Validation Example

40. How Do You Customize? The Form’s Response

41. The LDP form asset’s XML contains pass and fail expressions.The LDP form asset’s XML contains pass and fail expressions. – … – …

42. Custom actions can be performed upon form submission:Custom actions can be performed upon form submission: –Success/Failure message displays –Page redirects –etc..

43. Example Responses Live demonstration of a basic comments form.Live demonstration of a basic comments form.basic comments formbasic comments form

44. How Do You Customize? The Form Developer’s Experience

45. CMS Page Views [Publish], [Preview], and [Edit].[Publish], [Preview], and [Edit]. Accessed in the XSL via the built-in parameter $ou:action.Accessed in the XSL via the built-in parameter $ou:action. –Usual Location: /mysite/_xsl/_shared/ou- variables.xsl. –Example usage: test=“$ou:action != ‘pub‘”

46. Edit View

49. Preview View

50. Publish View

51. Submitting the Form $_POST and the Submission Handler

52. LDP Defaults Built-in PHP and form action will:Built-in PHP and form action will: –Validate the form against SSM database. –Send emails as defined in the asset –Store submissions in the SSM database.

53. Custom Action Build and publish a PHP fileBuild and publish a PHP file In the XSL construct the following:In the XSL construct the following: – … – …

54. Augment $_POSTAugment $_POST –Hidden inputs via the XSL/XML.

55. Example XMLExample XML – custom-type=hidden; uuid=123456a78910;recaptcha=true; – custom-type=hidden; uuid=123456a78910;recaptcha=true;

56. Example HTMLExample HTML – –

57. Emails If your submission handler doesn’t send emails, you can:If your submission handler doesn’t send emails, you can: –Parse the LDP form asset’s XML. –Hidden inputs in the $_POST. –PHPMailer().

58. Example Email XML <email> {{email}} {{email}} websupport@montana.edu websupport@montana.edu Thank you {{name}} Thank you {{name}} Thank you for your submission! Thank you for your submission! </email> {{email}} -> john@doe.org {{name}} -> John Doe

59. Congratulations LDP Form Masters! Let’s build a simple form from scratch.

60. Additional Information

61. Links Bootstrap Form Builder DocsBootstrap Form Builder DocsBootstrap Form Builder DocsBootstrap Form Builder Docs Karatemail Submission HandlerKaratemail Submission HandlerKaratemail Submission HandlerKaratemail Submission Handler XSLT ElementXSLT ElementXSLT ElementXSLT Element XML Path Language (XPath)XML Path Language (XPath)XML Path Language (XPath)XML Path Language (XPath) jQuery Validation PluginjQuery Validation PluginjQuery Validation PluginjQuery Validation Plugin ARIAARIAARIA Bootstrap FrameworkBootstrap FrameworkBootstrap FrameworkBootstrap Framework PHPMailerPHPMailerPHPMailer OmniUpdateOmniUpdate –Live Delivery Platform Live Delivery PlatformLive Delivery Platform –LDP Settings LDP SettingsLDP Settings

62. Questions? Adam Griffith - @adamgrif adam.griffith1@montana.edu