This is the second step of a three step registration process. Step Two, demonstrated here, is not required to start a profile page. NOTE: This page is displayed only if the user has selected next from step one and has OPTED OUT of subscribing to the monthly service.
All items represented in the registration form on this page are not required but if the user does decide to fill in the form the items must be filled in properly. Validation of the form happens once the submit button is selected. A partially filled out form is acceptable to move on to the next step or their profile page.
Top Intro
Selecting the privacy link in the intro area will take the user to the privacy page thereby leaving the registration page
The Form (Top to Bottom)
All form elements shuld be validated and stored in the DB.
- Choose a Look
- Unrequired radio selection
- The main mLab design them will be selected by default
- Selecting the preview link will produce a pop-up that has a screen shot of the theme in context of the mLab site.
- Validation
- A theme must be selected
- Possible Errors
- None
- Upload a Picture
- Unrequired text field
- No character max on input
- Selecting the browse button will open the user's file finder dialogue on their PC. The user must locate the file they want to use and select it.
- Validation
- Only valid paths are accepted to either a URL or file path on a PC hard drive
- Only supported image files may be uploaded which include: .jpg, .gif, .png, .bmp, .pic
- Only images under 2MB can be uploaded
- Possible Errors
- Can't access image from URL provided
- Image format is not supported
- Image is too large to download
- About You
- Unrequired text area field with multilines=5 - the text area can scroll vertically if needed
- 225 character max on input with feedback mechanism below text area - as the user types the character amount left for the user should notch down showing the characters the user has left to use. If the user goes beyond the charcter limit those characters will not appear in the text area field
- A spaces count as 1 character deduction
- Validation
- All characters may be used
- Possible Errors
- None
- Interests & Hobbies
- Unrequired text area field with multilines=5 - the text area can scroll vertically if needed
- 225 character max on input with feedback mechanism below text area - as the user types the character amount left for the user should notch down showing the characters the user has left to use. If the user goes beyond the charcter limit those characters will not appear in the text area field
- A spaces count as 1 character deduction
- Validation
- All characters may be used
- Possible Errors
- None
- Relationship Status
- Unrequired pulldown
- The actual items in the pulldown are TBD but they will include things like: Single, Married, etc. - "Select..." is the default selected state
- Validation
- None
- Possible Errors
- None
Mobile Information
All of the following inputs are required once the user goes down the path of entering their phone information. The "click here" link to learn more about th mobile capabilities will be a pop-up and will not take the user to a new page. It will explain in marketing terms why they should enter their phone information.
- Carrier
- Required pulldown
- The actual items in the pulldown are TBD but they will include things like: Cingular, Verizon, Sprint, etc. - "Select..." is the default selected state
- Validation
- The user must select something besides "Select..."
- Possible Errors
- None if left in its default state
- If other fields have been touched in the mobile information area then there will be an error if left in its default state. However, this error will be very rare based on how this portion of the form works
- Phone Make
- Required pulldown only if Carrier has been changed from its default state - This pulldown remains disabled and unpopulated until Carrier is changed. Based on what carrier is selected then the pulldown gets populated with the relavant phone makers for that carrier
- The actual items in the pulldown are TBD but they will include things like: Motorola, Sony, Nokia, etc. - "Select..." is the default selected state
- Validation
- User selects something besides "Select..."
- Possible Errors
- Left on the "Select..." selection
- The user submits the form before completing the rest of the mobile information
- Phone Model
- Required selection only if Phone Make has been changed from its default state - This area remains disabled and unpopulated until Phone Make has been changed. Based on what Phone Make is selected then the area gets populated with all of the relavant phones from that maker for that carrier
- The actual items in the area are TBD but they will include the image and model name of the phones
- Once a phone has ben selected all other phones are removed from the display except the selected model
- Validation
- User selects something besides nothing
- Possible Errors
- Nothing is selected
- The user submits the form before completing the rest of the mobile information
- Phone Number
- Required selection only if a Phone Model has been selected - These text fields remain disabled and unpopulated until a Phone Model has been chosen.
- Area Code text field - 3 characters min and max, only numbers are accepted
- Phone number prefix text field - 3 characters min and max, only numbers are accepted
- Phone Number Suffix text field - 4 characters min and max, only numbers are accepted
- When the user finishes entering 3 digits/characters in the first text field they are automatically tabbed to the next text field. After they have entered 3 digits/characters in the second field they are automatically tabbed to the last/thisrd text field
- Validation
- User enters 10 digit phone number
- Possible Errors
- Nothing is entered in one or more fields
- Character min max has not been met in one or more fields
- Unsupported characters are detected in one or more fields
- The user submits the form before completing the rest of the mobile information
- Mobile Terms and Conditions
- Required checkbox button
- One checkbox where the user chooses between accepting or not
- Unchecked as default
- The Link in the question does not take the user to a new page if selected, rather it opens an iframe/div below the checkbox area that loads and allows the user to read the T&Cs. The reading area should be 100% wide and about 250px high
- Validation
- Must be checked to continue
- Possible Errors
- Left unchecked
- Step 2 Submit Button
Once this button is selected all of the form elements are validated. If the form validates with no mobile information entered then the user is taken to step 3 of the registration process. If the form does not validate then the user is shown the same form again with their inputs but the errors are called out inline with the form. Click here to see an example error page. Once the form validates all of the form elements get stored in the DB with the user's profile. If the user has inputted their phone information then they are taken to a phone validation page.
- Go to my profile link
Once this link is selected all of the form elements are validated. If the form validates then the user is taken to their minimal profile page. If the form does not validate then the user is shown the same form again with their inputs but the errors are called out inline with the form. Click here to see the error page. Once the form validates all of the form elements get stored in the DB.
- Browser Back Button - selecting this will cause a form error
- The error page should say that they cannot modify anything and that they need to go to the next page - actual messaging TBD
Promotional Space
There should be some promotional space on the page that could be ad banners or messages. These modules need to be dynamic/configurable
so that the information being fed to the module comes from a DB location rather than statically coded within this page.
Step by Step Progress
On the left of the page there is a module that shows how many steps are in the registration process and where the user is at in the process.
- On this page Step One and Two are at full saturation while step 3 is dimmed but still legible.
- Under Step One it tells the user they have successfully completed that step and displays their relevant inputs.
- Inputs to display
(line by line)
- UserName
- First Name Last Name
- email address
- City, State Zip
- Date of birth
- Under step 2 is a button that reiterates the fact that they can skip this step if they so choose and go on to step 3. The button will take them to step 3.