Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- # Clubform Builder Documentation for DGWs
- ### Builder Usage
- 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)
- | Layout Style | Description |
- | --- | --- |
- | Traditional | How clubforms looked and operated before the builder was made. |
- ##### Traditional JSON Example (No buttons)
- ```json
- {
- "instructions": "",
- "linkToGCC": false,
- "form": [
- {
- "component": "InputWrapper",
- "label": "First Name",
- "children": [
- {
- "component": "GenericInput",
- "mapsTo": "firstName",
- "isRequired": true
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "Last Name",
- "children": [
- {
- "component": "GenericInput",
- "mapsTo": "lastName",
- "isRequired": true
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "Address",
- "children": [
- {
- "component": "GenericInput",
- "mapsTo": "address.address1",
- "isRequired": false
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "",
- "children": [
- {
- "component": "GenericInput",
- "mapsTo": "address.address2",
- "isRequired": false
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "City",
- "children": [
- {
- "component": "GenericInput",
- "mapsTo": "address.city",
- "isRequired": false
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "State",
- "children": [
- {
- "component": "StateSelect",
- "defaultState": "PA",
- "isRequired": false
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "Zip",
- "children": [
- {
- "component": "GenericInput",
- "mapsTo": "address.zip",
- "validateNumeric": true,
- "isRequired": false
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "Phone Number",
- "children": [
- {
- "component": "PhoneInput",
- "mapsTo": "mobilePhone",
- "isRequired": true
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "Email",
- "children": [
- {
- "component": "EmailInput",
- "mapsTo": "email",
- "isRequired": true
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "Source",
- "children": [
- {
- "component": "SourceSelect",
- "promptOption": "How did you hear about us?",
- "isRequired": true
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "Liability Waiver",
- "align": "top",
- "notes": true,
- "errorType": "waiver",
- "children": [
- {
- "component": "GuestWaiver"
- }
- ]
- }
- ]
- }
- ```
- ##### Traditional JSON Example (Multi-button)
- ```json
- {
- "instructions": "Please fill out this form",
- "linkToGCC": false,
- "multiButton": {
- "title": "Welcome to Gold's Gym!",
- "instructions": "Select an option below to continue."
- },
- "newGuest": {
- "title": "Welcome to Gold's Gym!",
- "label": "New Guest",
- "instructions": "This is your first time at the club or you are here to ask about a membership."
- },
- "paidPass": {
- "title": "You selected Paid Pass",
- "instructions": "You are here from out of town or are working out for the day on a paid pass.",
- "paidPassMemberId": 110336789
- },
- "returnGuest": {
- "title": "You selected Returning Guest",
- "label": "Returning Guest",
- "instructions": "You have been here before, or you have an active guest pass."
- },
- "vipGuest": {
- "title": "You selected VIP Guest",
- "label": "VIP Guest",
- "instructions": "You are a true VIP."
- },
- "form": [
- {
- "component": "InputWrapper",
- "label": "Employer",
- "children": [
- {
- "component": "GenericInput",
- "mapsTo": "employer",
- "isRequired": true,
- "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>"
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "Email",
- "children": [
- {
- "component": "EmailInput",
- "mapsTo": "email",
- "isRequired": "emailOrMobilePhone"
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "Phone",
- "children": [
- {
- "component": "PhoneInput",
- "mapsTo": "mobilePhone",
- "isRequired": "emailOrMobilePhone"
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "Gender",
- "children": [
- {
- "component": "GenericSelect",
- "mapsTo": "gender",
- "options": [{"M": "Male"}, {"F": "Female"}],
- "isRequired": true
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "Source",
- "children": [
- {
- "component": "SourceSelect",
- "promptOption": "How did you hear about us?",
- "isRequired": true
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "State",
- "children": [
- {
- "component": "StateSelect",
- "defaultState": "PA",
- "isRequired": true
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "Goals",
- "align": "top",
- "children": [
- {
- "component": "CheckboxGroup",
- "mapsTo": "goals",
- "options": ["Lose weight", "Stress management", "Build muscle and core strength"]
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "Appointment",
- "align": "top",
- "children": [
- {
- "component": "RadioGroup",
- "mapsTo": "appointment",
- "options": ["I have an appointment", "I do not have an appointment"]
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "Interests Group Example",
- "align": "top",
- "children": [
- {
- "component": "InterestsGroup"
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "Notes",
- "align": "top",
- "children": [
- {
- "component": "GenericTextarea",
- "mapsTo": "notes",
- "rows": 6
- }
- ]
- },
- {
- "component": "InputWrapper",
- "label": "Guest Waiver",
- "align": "top",
- "notes": true,
- "errorType": "waiver",
- "children": [
- {
- "component": "GuestWaiver"
- }
- ]
- }
- ]
- }
- ```
- #### Dynamic Variables
- Dynamic variables allow you to inject data into text that is pulled into the form via `<%= %>` tags.
- ##### Location
- `<%= location %>`: Replaced with club location name.
- #### Component Details
- \* Denotes required key
- ##### Title
- The "Header" of the form.
- - `title`: Any text (default "Thank you for visiting {location}"). Will be overriden by Multi-Button: New Guest Title if exists.
- ##### Instructions
- Instruction text that will be placed under the form title.
- - `instructions`\*: Any text
- ##### Guest Courtesy Card
- Specifies if the DGW has inputs that should correlate with a Guest Courtesy Card.
- - `linkToGCC`: Can be true or false (default false)
- ##### Multi-Button
- Specifies if the DGW begins as a multi-button form
- - `multiButton`: Can be true, an object with properties, or false (default false)
- ##### Multi-Button: Override Defaults (`multiButton`)
- Overrides the title and/or instructions of the mutli-button screen of a form.
- - `title`: String defining the "Header" of the visible page (default "Welcome to {club} - {location}")
- - `instructions`: String defining the instructions text that goes above the buttons
- ##### Multi-Button: New Guest (`newGuest`)
- Button labeled "New Guest" that takes the user straight into the DGW. MUST have Multi-button set to true.
- - `title`: String defining the "Header" of the visible page (default "Thank you for visiting {location}")
- - `label`: String defining the button's label (default "New Guest")
- - `instructions`: String defining the instructions text that goes below the button (see example at bottom)
- ##### Multi-Button: Return Guest (`returnGuest`)
- 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.
- - `title`: String defining the "Header" of the visible page (default "Returning Guest")
- - `label`: String defining the button's label (default "Returning Guest")
- - `instructions`: String defining the instructions text that goes below the button
- ##### Multi-Button: VIP Guest (`vipGuest`)
- 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.
- - `title`: String defining the "Header" of the visible page (default "Gold Member Guest Registration")
- - `label`: String defining the button's label (default "Gold Member Guest")
- - `instructions`: String defining the instructions text that goes below the button
- ##### Multi-Button: Paid Pass (`paidPass`)
- 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.
- - `title`: String defining the "Header" of the visible page (default "Paid Pass")
- - `label`: String defining the button's label (default "Paid Pass")
- - `instructions`: String defining the instructions text that goes below the button (see example at bottom)
- - `paidPassMemberId`\*: Club member id for the paid pass account
- ##### Form Wrapper
- Must be placed around the entire form structure
- - `form`\*: An array housing the form structure
- ##### Input Wrapper
- Must be placed around inputs that are not labelled as composites
- - `component`\*: Must be "InputWrapper"
- - `label`: Any text, will be the label for the input
- - `align`: Can be set to "top", which will vertically align the label to the top (align middle by default)
- - `errorType`: Should be set to "waiver" for waivers
- - `notes`: Can be true or false, and toggles if the notes class is applied (default false)
- - `children`\*: An array housing the input
- ##### Generic Input
- - `component`\*: Must be "GenericInput"
- - `mapsTo`\*: Suggested to be "firstName", "lastName", "address.address1", "address.address2", "address.city", "address.zip", "employer" or "guestOfMember"
- - `isRequired`: Can be true or false (default false, however, "firstName" and "lastName" are forced to true)
- - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
- - `text`: String or element definition of text that can be placed below the input
- ##### Email Input
- - `component`\*: Must be "EmailInput"
- - `mapsTo`\*: Suggested to be "email"
- - `isRequired`: Can be true, false or "emailOrMobilePhone" (default false)
- - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
- ##### Phone Input
- - `component`\*: Must be "PhoneInput"
- - `mapsTo`\*: Suggested to be "mobilePhone", "workPhone" or "homePhone"
- - `isRequired`: Can be true, false or, if mapsTo is "mobilePhone", "emailOrMobilePhone" (default false)
- - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
- ##### Generic Select
- - `component`\*: Must be "GenericSelect"
- - `mapsTo`\*: Suggested to be "gender"
- - `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.
- - `promptOption`: First option to be displayed, and acts as instructions (will not save data if nothing else is selected)
- - `defaultValue`: Can be set to an option value, if a default option should be selected (default none)
- - `isRequired`: Can be true or false (default false)
- - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
- ##### Employer Select
- - `component`\*: Must be "EmployerSelect"
- - `mapsTo`: Un-editable (default "employer")
- - `promptOption`: First option to be displayed, and acts as instructions (will not save data if nothing else is selected)
- - `defaultValue`: Can be set to an option value, if a default option should be selected (default none)
- - `isRequired`: Can be true or false (default false)
- - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
- ##### Source Select
- - `component`\*: Must be "SourceSelect"
- - `mapsTo`\*: Un-editable (default "source")
- - `promptOption`: First option to be displayed, and acts as instructions (will not save data if nothing else is selected)
- - `defaultValue`: Can be set to an option value, if a default option should be selected (default none)
- - `isRequired`: Can be true or false (default false)
- - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
- ##### State Select
- - `component`\*: Must Be "StateSelect"
- - `defaultState`: Can be set to a state ISO code, if a default state should be selected (default none)
- - `isRequired`: Can be true or false (default false)
- - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
- ##### Country Select
- Used in conjunction with `StateCompositeSelect` and `ZipCompositeSelect` to enable Canadian address support. Defaults to "US"
- - `component`\*: Must Be "CountrySelect"
- - `isRequired`: Can be true or false (default false)
- - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
- ##### State Composite Select
- 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.
- - `component`\*: Must Be "StateCompositeSelect"
- - `defaultState`: Can be set to a state ISO code, if a default state should be selected (default none)
- - `isRequired`: Can be true or false (default false)
- - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
- Note: Composite inputs do not use a `InputWrapper`. The label is automatically generated.
- ##### Zip Composite Select
- 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.
- - `component`\*: Must Be "ZipCompositeSelect"
- - `isRequired`: Can be true or false (default false)
- - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
- Note: Composite inputs do not use a `InputWrapper`. The label is automatically generated.
- ##### Birthdate Select
- - `component`\*: Must Be "BirthdateSelect"
- - `isRequired`: Can be true or false (default false)
- - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
- ##### Checkbox Group
- - `component`\*: Must be "CheckboxGroup"
- - `mapsTo`\*: Suggested to be "goals", "reasonJoiningGym", "daysOfWeek", "timeOfDay", "seriousAboutStarting", "smsOptIn" or "emailOptIn"
- - `options`\*: Checkbox options
- - `orientVertical`: Can be true or false, determines if the options should be in a vertical list, or can be horizontally aligned (default true)
- - `defaultCheckedIndex`: Option to be checked by default, starting at 0 (default none)
- - `isRequired`: Can be true or false (default false)
- - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
- ##### Radio Group
- - `component`\*: Must be "RadioGroup"
- - `mapsTo`\*: Suggested to be "married", "children", "currentlyExercise" or "appointment"
- - `options`\*: Radio options
- - `orientVertical`: Can be true or false, determines if the options should be in a vertical list, or can be horizontally aligned (default true)
- - `defaultCheckedIndex`: Option to be checked by default, starting at 0 (default none)
- - `isRequired`: Can be true or false (default false)
- - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
- ##### Interests Group
- - `component`\*: Must be "InterestsGroup"
- - `orientVertical`: Can be true or false, determines if the options should be in a vertical list, or can be horizontally aligned (default true)
- - `isRequired`: Can be true or false (default false)
- - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
- ##### Generic Textarea
- - `component`\*: Must be "GenericTextarea"
- - `mapsTo`\*: Suggested to be "notes" (if not appending notes)
- - `rows`: How many rows tall the textarea should be (default 5)
- - `columns`: How many columns wide the textarea should be (default 100% of parent's width)
- - `defaultValue`: Pre-populates the textarea with modifiable text
- - `isRequired`: Can be true or false (default false)
- - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
- ##### Guest Waiver
- - `component`\*: Must be "GuestWaiver"
- - `noScroll`: Can be true or false, and toggles scrolling to the bottom is required for acceptance (default false)
- - Note that the input wrapper must have the `errorType` set to "waiver", and `notes` should be true. It's also suggested `align` be "top"
- ##### Generic Hidden
- - `component`\*: Must be "HiddenGeneric"
- - `mapsTo`\*: Suggested to be "notes"
- - `linkToGCC`: Can be true or false, toggling whether an input with the same name (mapsTo) exists in a Guest Courtesy Card (default false)
- #### Recommended Creation of an Opt-in Box
- ```
- {
- "component": "InputWrapper",
- "label": "SMS Opt-in",
- "align": "top",
- "notes": true,
- "children": [
- {
- "component": "CheckboxGroup",
- "mapsTo": "smsOptIn",
- "defaultCheckedIndex": 0,
- "options": [
- "I agree to recieve SMS."
- ]
- }
- ]
- }
- ```
- #### Appending to Notes
- Requirements:
- - A hidden field using `GenericHidden`, which will most likely map to "notes" unless doing something advanced
- - At least one field with the "appendTo" property defined
- 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:
- ```
- ...
- {
- "component": "InputWrapper",
- "label": "Goals",
- "align": "top",
- "children": [
- {
- "component": "CheckboxGroup",
- "mapsTo": "goals",
- "options": ["Lose weight", "Stress management", "Build muscle and core strength"],
- "appendTo": {
- "field": "notes",
- "label": "PT Goals"
- }
- }
- ]
- },
- {
- "component": "InputWrapper",
- "children": [
- {
- "component": "GenericHidden",
- "mapsTo": "notes"
- }
- ]
- }
- ...
- ```
- 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:
- ```
- PT Goals: Lose weight, Stress management.
- ```
- 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".
- Restrictions:
- - Birthdate Select is not supported
- - Goals is already appended to notes by default, so do not use append to on a field mapped to "goals"
- Advanced Tip:
- - 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.
- ### Admin Setup
- Club General Settings:
- - **Domain Prefix**: Defines the location at which the clubform can be accessed
- - **Logo Image File**: Specifies the logo to use on the clubform
- - **Theme Name**: Specifies what theme will be used (mainly color configuration)
- - **Liability / Waiver Text**: Text that will populate the waiver text
- Location General Settings:
- - **Show Toured By on Digital Guest Waiver**: Toggles the displaying of and requirement of "Toured By"
- - **Show Signature on Digital Guest Waiver**: Toggles the displaying of and requirement of "Signature"
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement