Adam Griffith Web Developer Montana State University Todays Topics History of the project Live Delivery Platform LDP Form XML Objects XSL Design POSTing to a submission h andler ID: 1030279
Download Presentation The PPT/PDF document "Bootstrap Form Builder" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
1. Bootstrap Form BuilderAdam Griffith, Web DeveloperMontana State University
2. Today’s TopicsHistory of the projectLive Delivery Platform (LDP)Form XML ObjectsXSL Design$_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 HTML Form Tool
6. Phase 1New Submission Handler
7. Replaced the FormMail script on web serversWrote our own submission handler, Karatemail.
8. Phase 2New HTML Form Tool
9. GoalsBring protected forms to non-technical developers.Submission handler integration.Create via OU Campus.Meet all accessibility requirements.Responsive design.
10. The Live Delivery Platform (LDP)As of OU Campus 10.3.3
11. Optional module for OU Campus.Includes several features such as a “Managed Form” asset type.
12. LDP FormsAsset generates an XML objectPublishing an asset requires the Server-Side Module (SSM).Stores form submission information
13. Asset User Interface
14. Generated XML Object<ouform asset_id="1234" asset_name="My Form" captcha="false" uuid="12345-a6789-b101112"> <elements> <element name="sample" required="false" type="input-text"> <label>Sample Input</label> <default/> <validation/> <validationfail/> <advanced /> <options/> </element> </elements> <output> <message type="pass">default</message> <message type="fail">default</message> <database use="true"/> <email>...</email> </output></ouform>
15. Current Form ElementsSingle-Line Text FieldMulti-Line Text FieldRadio ButtonsCheckboxesDrop-DownMulti-Select
16. Form Elements Wish ListColor pickersComboboxesDate/Date Range selectorsFax/Tel numbersEmailsTime selectorsURLsUS ZipcodesWYSIWYGs
17. How Do You Customize?The Asset XML
18. Making New Form ElementsYou cannot change the XML tags generated by the form asset.Every <element> tag contains an <advanced> tag.Values can be parsed in the XSL layer to “overload” an existing <element>.
19. Making FieldsetsStart a fieldset with <advanced> tag values.Close a fieldset the same way.
20. XML Example<element name=“poster" required=“true" type="textarea"> <label>Poster HTML</label> <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!
23. How Do You Customize?The XSL
24. Where is the Source?The XSL usually located in: /mysite/_xsl/_shared/forms/forms.xslMSU created centralized “XSL source” site for our 660+ sites managed in OU Campus.
25. <xsl:template />Modularize codebase with multiple XSL files.
26. Build out matches such as:“element[@type = ‘xxxx‘ … ]”“ouc:div//ouform”Use modes (like namespaces)e.g. “ouforms-input”
27. <xsl:function />Create a library of functions to use with XPath.Write ou:get-adv().For example:match=“element[@type = 'input-text' and ou:get-adv(advanced,'custom-type') = 'color']”
28. How Do You Customize?Accessibility & Responsive Design
29. AccessibilityUse <fieldset>, <legend>, and other standard HTML5 tags.Add the “for” attribute to all <label> tagsARIAaria-hidden, aria-invalid, aria-required, aria-labeledby, aria-describedby, etc..
30. Example HTML<div class="col-sm-6 form-group"> <label for="lastname_id" id="lastname_label" class="control-label"> Last Name </label> <input class="form-control" type="text" name="lastname" id="lastname_id" aria-labelledby="lastname_label" aria-invalid="false“ aria-required=“false“ /></div>
31. Responsive Design~30% of MSU’s web traffic mobileBootstrap frameworkUpshots:Built-in form stylingGrid and breakpoint support
32. Example HTML<div class="col-sm-6 form-group"> <label for="lastname_id" id="lastname_label" class="control-label"> Last Name </label> <input class="form-control" type="text" name="lastname" id="lastname_id" aria-labelledby="lastname_label" aria-invalid="false" aria-required="false“ /></div>
33. Desktop vs. Mobile View
34. How Do You Customize?The Validation
35. Form Element ValidationWe moved to client-side validation.jQuery Validation PluginIndependence from the SSM database.JavaScript integration with custom form elements.
36. Custom “Failure Text” support.provided via the asset UI’s input field or <advanced> fieldARIA tag and accessibility integration.
37. Element Validation Example
38. Form ValidationAll forms include:Honeypot variablesOptional 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.<message type="pass">…</message><message type="fail">…</message>
42. Custom actions can be performed upon form submission:Success/Failure message displaysPage redirectsetc..
43. Example ResponsesLive demonstration of a basic comments form.
44. How Do You Customize?The Form Developer’s Experience
45. CMS Page Views[Publish], [Preview], and [Edit].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
47.
48.
49. Preview View
50. Publish View
51. Submitting the Form$_POST and the Submission Handler
52. LDP DefaultsBuilt-in PHP and form action will:Validate the form against SSM database.Send emails as defined in the assetStore submissions in the SSM database.
53. Custom ActionBuild and publish a PHP fileIn the XSL construct the following:<form role="form" method="POST" action="submit.php">…</form>
54. Augment $_POSTHidden inputs via the XSL/XML.
55. Example XML<element name= "Internal" … type="input-text"><advanced>custom-type=hidden; uuid=123456a78910;recaptcha=true;<advanced/> </element>
56. Example HTML<input type="hidden" name="ouforms-uuid" value=“123456a78910"><input type="hidden" name="ouforms-recaptcha" value=“true">
57. EmailsIf 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> <to>{{email}}</to> <from>websupport@montana.edu</from> <subject>Thank you {{name}}</subject> <body>Thank you for your submission!</body></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. LinksBootstrap Form Builder DocsKaratemail Submission HandlerXSLT <xsl:apply-templates> ElementXML Path Language (XPath)jQuery Validation PluginARIABootstrap FrameworkPHPMailerOmniUpdateLive Delivery PlatformLDP Settings
62. Questions?Adam Griffith - @adamgrifadam.griffith1@montana.edu