clubform-builder-documentation.md

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)

{
  "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)

{
  "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 every input

• 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)

Source Select

• component*: Must be "SourceSelect
• mapsTo*: No suggestions (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)

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)

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" or "seriousAboutStarting"
• 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)
• 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)
• 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"
• 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"

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"