Advertisement
Guest User

Untitled

a guest
Jul 21st, 2019
76
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.90 KB | None | 0 0
  1. # Clubform Builder Documentation for DGWs
  2.  
  3. ### Builder Usage
  4. The clubform builder is a text editor that helps build the JSON to define a form. A forms look/style is defined by it's layout type. (Right now, there is only one)
  5.  
  6. | Layout Style | Description |
  7. | --- | --- |
  8. | Traditional | How clubforms looked and operated before the builder was made. |
  9.  
  10. ##### Traditional JSON Example (No buttons)
  11. ```json
  12. {
  13. "instructions": "",
  14. "linkToGCC": false,
  15. "form": [
  16. {
  17. "component": "InputWrapper",
  18. "label": "First Name",
  19. "children": [
  20. {
  21. "component": "GenericInput",
  22. "mapsTo": "firstName",
  23. "isRequired": true
  24. }
  25. ]
  26. },
  27. {
  28. "component": "InputWrapper",
  29. "label": "Last Name",
  30. "children": [
  31. {
  32. "component": "GenericInput",
  33. "mapsTo": "lastName",
  34. "isRequired": true
  35. }
  36. ]
  37. },
  38. {
  39. "component": "InputWrapper",
  40. "label": "Address",
  41. "children": [
  42. {
  43. "component": "GenericInput",
  44. "mapsTo": "address.address1",
  45. "isRequired": false
  46. }
  47. ]
  48. },
  49. {
  50. "component": "InputWrapper",
  51. "label": "",
  52. "children": [
  53. {
  54. "component": "GenericInput",
  55. "mapsTo": "address.address2",
  56. "isRequired": false
  57. }
  58. ]
  59. },
  60. {
  61. "component": "InputWrapper",
  62. "label": "City",
  63. "children": [
  64. {
  65. "component": "GenericInput",
  66. "mapsTo": "address.city",
  67. "isRequired": false
  68. }
  69. ]
  70. },
  71. {
  72. "component": "InputWrapper",
  73. "label": "State",
  74. "children": [
  75. {
  76. "component": "StateSelect",
  77. "defaultState": "PA",
  78. "isRequired": false
  79. }
  80. ]
  81. },
  82. {
  83. "component": "InputWrapper",
  84. "label": "Zip",
  85. "children": [
  86. {
  87. "component": "GenericInput",
  88. "mapsTo": "address.zip",
  89. "validateNumeric": true,
  90. "isRequired": false
  91. }
  92. ]
  93. },
  94. {
  95. "component": "InputWrapper",
  96. "label": "Phone Number",
  97. "children": [
  98. {
  99. "component": "PhoneInput",
  100. "mapsTo": "mobilePhone",
  101. "isRequired": true
  102. }
  103. ]
  104. },
  105. {
  106. "component": "InputWrapper",
  107. "label": "Email",
  108. "children": [
  109. {
  110. "component": "EmailInput",
  111. "mapsTo": "email",
  112. "isRequired": true
  113. }
  114. ]
  115. },
  116. {
  117. "component": "InputWrapper",
  118. "label": "Source",
  119. "children": [
  120. {
  121. "component": "SourceSelect",
  122. "promptOption": "How did you hear about us?",
  123. "isRequired": true
  124. }
  125. ]
  126. },
  127. {
  128. "component": "InputWrapper",
  129. "label": "Liability Waiver",
  130. "align": "top",
  131. "notes": true,
  132. "errorType": "waiver",
  133. "children": [
  134. {
  135. "component": "GuestWaiver"
  136. }
  137. ]
  138. }
  139. ]
  140. }
  141. ```
  142.  
  143. ##### Traditional JSON Example (Multi-button)
  144. ```json
  145. {
  146. "instructions": "Please fill out this form",
  147. "linkToGCC": false,
  148. "multiButton": {
  149. "title": "Welcome to Gold's Gym!",
  150. "instructions": "Select an option below to continue."
  151. },
  152. "newGuest": {
  153. "title": "Welcome to Gold's Gym!",
  154. "label": "New Guest",
  155. "instructions": "This is your first time at the club or you are here to ask about a membership."
  156. },
  157. "paidPass": {
  158. "title": "You selected Paid Pass",
  159. "instructions": "You are here from out of town or are working out for the day on a paid pass.",
  160. "paidPassMemberId": 110336789
  161. },
  162. "returnGuest": {
  163. "title": "You selected Returning Guest",
  164. "label": "Returning Guest",
  165. "instructions": "You have been here before, or you have an active guest pass."
  166. },
  167. "vipGuest": {
  168. "title": "You selected VIP Guest",
  169. "label": "VIP Guest",
  170. "instructions": "You are a true VIP."
  171. },
  172. "form": [
  173. {
  174. "component": "InputWrapper",
  175. "label": "Employer",
  176. "children": [
  177. {
  178. "component": "GenericInput",
  179. "mapsTo": "employer",
  180. "isRequired": true,
  181. "text": "<i style=\"color:red;display:block;width:300px;\">Providing your employer will help us determine if you have a discounted membership option available through our corporate wellness program.</i>"
  182. }
  183. ]
  184. },
  185. {
  186. "component": "InputWrapper",
  187. "label": "Email",
  188. "children": [
  189. {
  190. "component": "EmailInput",
  191. "mapsTo": "email",
  192. "isRequired": "emailOrMobilePhone"
  193. }
  194. ]
  195. },
  196. {
  197. "component": "InputWrapper",
  198. "label": "Phone",
  199. "children": [
  200. {
  201. "component": "PhoneInput",
  202. "mapsTo": "mobilePhone",
  203. "isRequired": "emailOrMobilePhone"
  204. }
  205. ]
  206. },
  207. {
  208. "component": "InputWrapper",
  209. "label": "Gender",
  210. "children": [
  211. {
  212. "component": "GenericSelect",
  213. "mapsTo": "gender",
  214. "options": [{"M": "Male"}, {"F": "Female"}],
  215. "isRequired": true
  216. }
  217. ]
  218. },
  219. {
  220. "component": "InputWrapper",
  221. "label": "Source",
  222. "children": [
  223. {
  224. "component": "SourceSelect",
  225. "promptOption": "How did you hear about us?",
  226. "isRequired": true
  227. }
  228. ]
  229. },
  230. {
  231. "component": "InputWrapper",
  232. "label": "State",
  233. "children": [
  234. {
  235. "component": "StateSelect",
  236. "defaultState": "PA",
  237. "isRequired": true
  238. }
  239. ]
  240. },
  241. {
  242. "component": "InputWrapper",
  243. "label": "Goals",
  244. "align": "top",
  245. "children": [
  246. {
  247. "component": "CheckboxGroup",
  248. "mapsTo": "goals",
  249. "options": ["Lose weight", "Stress management", "Build muscle and core strength"]
  250. }
  251. ]
  252. },
  253. {
  254. "component": "InputWrapper",
  255. "label": "Appointment",
  256. "align": "top",
  257. "children": [
  258. {
  259. "component": "RadioGroup",
  260. "mapsTo": "appointment",
  261. "options": ["I have an appointment", "I do not have an appointment"]
  262. }
  263. ]
  264. },
  265. {
  266. "component": "InputWrapper",
  267. "label": "Interests Group Example",
  268. "align": "top",
  269. "children": [
  270. {
  271. "component": "InterestsGroup"
  272. }
  273. ]
  274. },
  275. {
  276. "component": "InputWrapper",
  277. "label": "Notes",
  278. "align": "top",
  279. "children": [
  280. {
  281. "component": "GenericTextarea",
  282. "mapsTo": "notes",
  283. "rows": 6
  284. }
  285. ]
  286. },
  287. {
  288. "component": "InputWrapper",
  289. "label": "Guest Waiver",
  290. "align": "top",
  291. "notes": true,
  292. "errorType": "waiver",
  293. "children": [
  294. {
  295. "component": "GuestWaiver"
  296. }
  297. ]
  298. }
  299. ]
  300. }
  301. ```
  302.  
  303. #### Dynamic Variables
  304.  
  305. Dynamic variables allow you to inject data into text that is pulled into the form via `<%= %>` tags.
  306.  
  307. ##### Location
  308.  
  309. `<%= location %>`: Replaced with club location name.
  310.  
  311. #### Component Details
  312.  
  313. \* Denotes required key
  314.  
  315. ##### Title
  316. The "Header" of the form.
  317. - `title`: Any text (default "Thank you for visiting {location}"). Will be overriden by Multi-Button: New Guest Title if exists.
  318.  
  319. ##### Instructions
  320. Instruction text that will be placed under the form title.
  321. - `instructions`\*: Any text
  322.  
  323. ##### Guest Courtesy Card
  324. Specifies if the DGW has inputs that should correlate with a Guest Courtesy Card.
  325. - `linkToGCC`: Can be true or false (default false)
  326.  
  327. ##### Multi-Button
  328. Specifies if the DGW begins as a multi-button form
  329. - `multiButton`: Can be true, an object with properties, or false (default false)
  330.  
  331. ##### Multi-Button: Override Defaults (`multiButton`)
  332. Overrides the title and/or instructions of the mutli-button screen of a form.
  333. - `title`: String defining the "Header" of the visible page (default "Welcome to {club} - {location}")
  334. - `instructions`: String defining the instructions text that goes above the buttons
  335.  
  336. ##### Multi-Button: New Guest (`newGuest`)
  337. Button labeled "New Guest" that takes the user straight into the DGW. MUST have Multi-button set to true.
  338. - `title`: String defining the "Header" of the visible page (default "Thank you for visiting {location}")
  339. - `label`: String defining the button's label (default "New Guest")
  340. - `instructions`: String defining the instructions text that goes below the button (see example at bottom)
  341.  
  342. ##### Multi-Button: Return Guest (`returnGuest`)
  343. Button labeled "Returning Guest" that takes the user to a "search by email or phone" before going into the DGW. MUST have Multi-button set to true.
  344. - `title`: String defining the "Header" of the visible page (default "Returning Guest")
  345. - `label`: String defining the button's label (default "Returning Guest")
  346. - `instructions`: String defining the instructions text that goes below the button
  347.  
  348. ##### Multi-Button: VIP Guest (`vipGuest`)
  349. Button labeled "VIP Guest" that takes the user to a "search by email or phone" before going into the DGW. MUST have Multi-button set to true.
  350. - `title`: String defining the "Header" of the visible page (default "Gold Member Guest Registration")
  351. - `label`: String defining the button's label (default "Gold Member Guest")
  352. - `instructions`: String defining the instructions text that goes below the button
  353.  
  354. ##### Multi-Button: Paid Pass (`paidPass`)
  355. Button labeled "Paid Pass" that takes the user to a confirmation page that they are using a paid pass before going into the DGW. MUST have Multi-button set to true.
  356. - `title`: String defining the "Header" of the visible page (default "Paid Pass")
  357. - `label`: String defining the button's label (default "Paid Pass")
  358. - `instructions`: String defining the instructions text that goes below the button (see example at bottom)
  359. - `paidPassMemberId`\*: Club member id for the paid pass account
  360.  
  361. ##### Form Wrapper
  362. Must be placed around the entire form structure
  363. - `form`\*: An array housing the form structure
  364.  
  365. ##### Input Wrapper
  366. Must be placed around inputs that are not labelled as composites
  367. - `component`\*: Must be "InputWrapper"
  368. - `label`: Any text, will be the label for the input
  369. - `align`: Can be set to "top", which will vertically align the label to the top (align middle by default)
  370. - `errorType`: Should be set to "waiver" for waivers
  371. - `notes`: Can be true or false, and toggles if the notes class is applied (default false)
  372. - `children`\*: An array housing the input
  373.  
  374. ##### Generic Input
  375. - `component`\*: Must be "GenericInput"
  376. - `mapsTo`\*: Suggested to be "firstName", "lastName", "address.address1", "address.address2", "address.city", "address.zip", "employer" or "guestOfMember"
  377. - `isRequired`: Can be true or false (default false, however, "firstName" and "lastName" are forced to true)
  378. - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
  379. - `text`: String or element definition of text that can be placed below the input
  380.  
  381. ##### Email Input
  382. - `component`\*: Must be "EmailInput"
  383. - `mapsTo`\*: Suggested to be "email"
  384. - `isRequired`: Can be true, false or "emailOrMobilePhone" (default false)
  385. - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
  386.  
  387. ##### Phone Input
  388. - `component`\*: Must be "PhoneInput"
  389. - `mapsTo`\*: Suggested to be "mobilePhone", "workPhone" or "homePhone"
  390. - `isRequired`: Can be true, false or, if mapsTo is "mobilePhone", "emailOrMobilePhone" (default false)
  391. - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
  392.  
  393. ##### Generic Select
  394. - `component`\*: Must be "GenericSelect"
  395. - `mapsTo`\*: Suggested to be "gender"
  396. - `options`\*: Array of strings (ex: ["Uno", "Dos"]) or objects (ex: [{"M": "Male"}, {"F": "Female"}]). For strings, both the saved value and the display value are equal to the string. For objects, the saved value is the key, and the display value is the value.
  397. - `promptOption`: First option to be displayed, and acts as instructions (will not save data if nothing else is selected)
  398. - `defaultValue`: Can be set to an option value, if a default option should be selected (default none)
  399. - `isRequired`: Can be true or false (default false)
  400. - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
  401.  
  402. ##### Employer Select
  403. - `component`\*: Must be "EmployerSelect"
  404. - `mapsTo`: Un-editable (default "employer")
  405. - `promptOption`: First option to be displayed, and acts as instructions (will not save data if nothing else is selected)
  406. - `defaultValue`: Can be set to an option value, if a default option should be selected (default none)
  407. - `isRequired`: Can be true or false (default false)
  408. - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
  409.  
  410. ##### Source Select
  411. - `component`\*: Must be "SourceSelect"
  412. - `mapsTo`\*: Un-editable (default "source")
  413. - `promptOption`: First option to be displayed, and acts as instructions (will not save data if nothing else is selected)
  414. - `defaultValue`: Can be set to an option value, if a default option should be selected (default none)
  415. - `isRequired`: Can be true or false (default false)
  416. - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
  417.  
  418. ##### State Select
  419. - `component`\*: Must Be "StateSelect"
  420. - `defaultState`: Can be set to a state ISO code, if a default state should be selected (default none)
  421. - `isRequired`: Can be true or false (default false)
  422. - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
  423.  
  424. ##### Country Select
  425. Used in conjunction with `StateCompositeSelect` and `ZipCompositeSelect` to enable Canadian address support. Defaults to "US"
  426. - `component`\*: Must Be "CountrySelect"
  427. - `isRequired`: Can be true or false (default false)
  428. - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
  429.  
  430. ##### State Composite Select
  431. Used in conjunction with `CountrySelect` and `ZipCompositeSelect` to enable Canadian address support. When "CA" is selected via `CountrySelect`, "State" label will change to "Province" and values will be updated with Canadian provinces.
  432. - `component`\*: Must Be "StateCompositeSelect"
  433. - `defaultState`: Can be set to a state ISO code, if a default state should be selected (default none)
  434. - `isRequired`: Can be true or false (default false)
  435. - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
  436.  
  437. Note: Composite inputs do not use a `InputWrapper`. The label is automatically generated.
  438.  
  439. ##### Zip Composite Select
  440. Used in conjunction with `CountrySelect` and `StateCompositeSelect` to enable Canadian address support. When "CA" is selected via `CountrySelect`, the "Zip" label will change to "Postal Code," and field will accept letters for Canadian postal codes.
  441. - `component`\*: Must Be "ZipCompositeSelect"
  442. - `isRequired`: Can be true or false (default false)
  443. - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
  444.  
  445. Note: Composite inputs do not use a `InputWrapper`. The label is automatically generated.
  446.  
  447. ##### Birthdate Select
  448. - `component`\*: Must Be "BirthdateSelect"
  449. - `isRequired`: Can be true or false (default false)
  450. - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
  451.  
  452. ##### Checkbox Group
  453. - `component`\*: Must be "CheckboxGroup"
  454. - `mapsTo`\*: Suggested to be "goals", "reasonJoiningGym", "daysOfWeek", "timeOfDay", "seriousAboutStarting", "smsOptIn" or "emailOptIn"
  455. - `options`\*: Checkbox options
  456. - `orientVertical`: Can be true or false, determines if the options should be in a vertical list, or can be horizontally aligned (default true)
  457. - `defaultCheckedIndex`: Option to be checked by default, starting at 0 (default none)
  458. - `isRequired`: Can be true or false (default false)
  459. - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
  460.  
  461. ##### Radio Group
  462. - `component`\*: Must be "RadioGroup"
  463. - `mapsTo`\*: Suggested to be "married", "children", "currentlyExercise" or "appointment"
  464. - `options`\*: Radio options
  465. - `orientVertical`: Can be true or false, determines if the options should be in a vertical list, or can be horizontally aligned (default true)
  466. - `defaultCheckedIndex`: Option to be checked by default, starting at 0 (default none)
  467. - `isRequired`: Can be true or false (default false)
  468. - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
  469.  
  470. ##### Interests Group
  471. - `component`\*: Must be "InterestsGroup"
  472. - `orientVertical`: Can be true or false, determines if the options should be in a vertical list, or can be horizontally aligned (default true)
  473. - `isRequired`: Can be true or false (default false)
  474. - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
  475.  
  476. ##### Generic Textarea
  477. - `component`\*: Must be "GenericTextarea"
  478. - `mapsTo`\*: Suggested to be "notes" (if not appending notes)
  479. - `rows`: How many rows tall the textarea should be (default 5)
  480. - `columns`: How many columns wide the textarea should be (default 100% of parent's width)
  481. - `defaultValue`: Pre-populates the textarea with modifiable text
  482. - `isRequired`: Can be true or false (default false)
  483. - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
  484.  
  485. ##### Guest Waiver
  486. - `component`\*: Must be "GuestWaiver"
  487. - `noScroll`: Can be true or false, and toggles scrolling to the bottom is required for acceptance (default false)
  488. - Note that the input wrapper must have the `errorType` set to "waiver", and `notes` should be true. It's also suggested `align` be "top"
  489.  
  490. ##### Generic Hidden
  491. - `component`\*: Must be "HiddenGeneric"
  492. - `mapsTo`\*: Suggested to be "notes"
  493. - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
  494.  
  495. #### Recommended Creation of an Opt-in Box
  496.  
  497. ```
  498. {
  499. "component": "InputWrapper",
  500. "label": "SMS Opt-in",
  501. "align": "top",
  502. "notes": true,
  503. "children": [
  504. {
  505. "component": "CheckboxGroup",
  506. "mapsTo": "smsOptIn",
  507. "defaultCheckedIndex": 0,
  508. "options": [
  509. "I agree to recieve SMS."
  510. ]
  511. }
  512. ]
  513. }
  514. ```
  515.  
  516. #### Appending to Notes
  517.  
  518. Requirements:
  519. - A hidden field using `GenericHidden`, which will most likely map to "notes" unless doing something advanced
  520. - At least one field with the "appendTo" property defined
  521.  
  522. You can append the responses to other inputs into a hidden field, which will hold the data for from submission. Any field can be specified to append it's response into a hidden field using the `appendTo` property. The markup may look like this:
  523.  
  524. ```
  525. ...
  526. {
  527. "component": "InputWrapper",
  528. "label": "Goals",
  529. "align": "top",
  530. "children": [
  531. {
  532. "component": "CheckboxGroup",
  533. "mapsTo": "goals",
  534. "options": ["Lose weight", "Stress management", "Build muscle and core strength"],
  535. "appendTo": {
  536. "field": "notes",
  537. "label": "PT Goals"
  538. }
  539. }
  540. ]
  541. },
  542. {
  543. "component": "InputWrapper",
  544. "children": [
  545. {
  546. "component": "GenericHidden",
  547. "mapsTo": "notes"
  548. }
  549. ]
  550. }
  551. ...
  552. ```
  553. Explanation of `appendTo`: The `field` describes the hidden field's map to value that the responses will be appended to, and is required. The `label` will describe the response in the submission, and is also required. The output for notes for this field will look like:
  554.  
  555. ```
  556. PT Goals: Lose weight, Stress management.
  557. ```
  558.  
  559. Explanation of the hidden field: Since the data will be stored in a hidden field, a hidden field must be included in the form. This field will not be shown on the form itself. It is suggested that the `mapsTo` of the hidden field always be "notes".
  560.  
  561. Restrictions:
  562. - Birthdate Select is not supported
  563. - Goals is already appended to notes by default, so do not use append to on a field mapped to "goals"
  564.  
  565. Advanced Tip:
  566. - If you need to have both an appended to notes field, and visible notes, set the `mapsTo` of the visible notes to "visibleNotes", and add `appendTo` so that the response will be appended to the hidden notes field.
  567.  
  568. ### Admin Setup
  569.  
  570. Club General Settings:
  571. - **Domain Prefix**: Defines the location at which the clubform can be accessed
  572. - **Logo Image File**: Specifies the logo to use on the clubform
  573. - **Theme Name**: Specifies what theme will be used (mainly color configuration)
  574. - **Liability / Waiver Text**: Text that will populate the waiver text
  575.  
  576. Location General Settings:
  577. - **Show Toured By on Digital Guest Waiver**: Toggles the displaying of and requirement of "Toured By"
  578. - **Show Signature on Digital Guest Waiver**: Toggles the displaying of and requirement of "Signature"
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement