APA Labs Connect Mockups
Last Updated: 12-1-2025
Service Request Form
Delivered Design
Read-Only Input Field Showing Service Type
Details about mockup (based on V2):
- Different URL parameters for the same file/URL will change the headings, text, and fields/labels on the same page.
- Users will be coming from different calls-to-action from various pages.
- A "hidden input field" with a dynamic value for whichever view of the form the user sees is in the mockup code.
- Note that in the mockup there is a script to only allow the 5 "service" parameters and any utm_* parameters which are used for Google campaign URL tracking. Otherwise, if there are invalid service parameter values, invalid parameters with any values, or no parameters at all in the URL, the user will go to a "default" view of the form where they can choose a Service Request Type which will change the form view accordingly and the value of the Service Request Type would be passed in the form submission.
- Compared to V2, no longer showing the "Service Request Type" field, some sections have been reordered, some labels renamed (e.g., with "Please..."), and the "time" field has been removed.
- Expert Matching: ?service=expertMatching URL parameter
- Product Testing: ?service=productTesting URL parameter
- Digital Badge Readiness: ?service=digitalBadgeReadiness URL parameter
- Product Demos: ?service=productDemos URL parameter
- General Collaboration: ?service=generalCollaboration URL parameter
- Default View of the Form - No URL parameters at all
- No URL parameter of "service" - goes to default view of form
- Invalid service URL parameter of ?service=xxx - goes to default view of form
- Invalid URL parameter of ?invalidparameter=xxx - goes to default form view
- All Google campaign URL parameters: ?utm_source=newsletter&utm_medium=banner&utm_campaign=spring_sale&utm_id=1234&utm_term=campaignTerm&utm_content=compaignContent?service=expertMatching - any of these URL parameters and any values will not get stripped - follows the same logic that if no service URL parameter with allowed value, the form goes to default view of form, but if there is a service URL parameter with an allowed parameter, the form goes to that specific view of the form (in this example here, using ?service=expertMatching
Service Request Form - V2
VERSION 2 - NOT USING
Read-Only Input Field Showing Service Type
Details about mockup (based on V1):
- Different URL parameters for the same file/URL will change the headings, text, and fields/labels on the same page.
- Users will be coming from different calls-to-action from various pages.
- The "Service Request Type" from the CTA will be displayed, along with a "hidden input field" with a dynamic value for whichever view of the form the user sees.
- Note that in the mockup there is a script to only allow the 5 "service" parameters and any utm_* parameters which are used for Google campaign URL tracking. Otherwise, if there are invalid service parameter values, invalid parameters with any values, or no parameters at all in the URL, the user will go to a "default" view of the form where they can choose a Service Request Type which will change the form view accordingly and the value of the Service Request Type would be passed in the form submission.
- Expert Matching: ?service=expertMatching URL parameter
- Product Testing: ?service=productTesting URL parameter
- Digital Badge Readiness: ?service=digitalBadgeReadiness URL parameter
- Product Demos: ?service=productDemos URL parameter
- General Collaboration: ?service=generalCollaboration URL parameter
- Default View of the Form - No URL parameters at all
- No URL parameter of "service" - goes to default view of form
- Invalid service URL parameter of ?service=xxx - goes to default view of form
- Invalid URL parameter of ?invalidparameter=xxx - goes to default form view
- All Google campaign URL parameters: ?utm_source=newsletter&utm_medium=banner&utm_campaign=spring_sale&utm_id=1234&utm_term=campaignTerm&utm_content=compaignContent?service=expertMatching - any of these URL parameters and any values will not get stripped - follows the same logic that if no service URL parameter with allowed value, the form goes to default view of form, but if there is a service URL parameter with an allowed parameter, the form goes to that specific view of the form (in this example here, using ?service=expertMatching
- Service Request Form - Default View - Enabled Radio Buttons - Note that this form will show fields/labels differently based on URL parameters controlling the frontend display or from users changing the Service Request Type radio buttons. The "default view" would happen with no URL parameter or an invalid URL parameter and will show an unselected group of Service Request Type radio buttons - once the user chooses a Service Request Type, the form view will change accordingly. Follow the URLs below to see the different views.VERSION 1 - NOT USING
Enabled Radio Buttons on Service UTM URLs
Different URL parameters for the same file/URL will change the headings, text, and fields/labels on the same page. Users will be coming from different calls-to-action from various pages. ote that in the mockup there is a script to only allow the 5 "service" parameters and any utm_* parameters which are used for Google campaign URL tracking. Otherwise, if there are invalid service parameter values, invalid parameters with any values, or no parameters at all in the URL, the user will go to a "default" view of the form where they can choose a Service Request Type which will change the form view accordingly and the value of the Service Request Type would be passed in the form submission.
- Expert Matching: ?service=expertMatching URL parameter
- Expert Advising: ?service=expertAdvising URL parameter
- Product Testing: ?service=productTesting URL parameter
- Digital Badge Readiness: ?service=digitalBadgeReadiness URL parameter
- Product Demos: ?service=productDemos URL parameter
- No URL parameter of "service" - goes to default view of form
- Invalid service URL parameter of ?service=xxx - goes to default view of form
- Invalid URL parameter of ?invalidparameter=xxx - goes to default form view
- All Google campaign URL parameters: ?utm_source=newsletter&utm_medium=banner&utm_campaign=spring_sale&utm_id=1234&utm_term=campaignTerm&utm_content=compaignContent?service=expertMatching - any of these URL parameters and any values will not get stripped - follows the same logic that if no service URL parameter with allowed value, the form goes to default view of form, but if there is a service URL parameter with an allowed parameter, the form goes to that specific view of the form (in this example here, using ?service=expertMatching
Expert Sign-Up Form
- Expert Sign-Up Form - Floating Field Labels - As an accessibility improvement, using Bootstrap 5's "floating labels" for all input fields. Also, added an "autogrow" script to the Bio textarea. Note that future forms will use this form as a "template".Delivered Design
- Expert Sign-Up Form - Floating Field Labels + jQuery Validate + Thank You page - Added full jQuery Validate frontend validation; Redirect to "Thank You" page with valid form submission; Updated accessible character countDelivered Design
Digital Badge Lead Form
- Digital Badge Lead Form - Floating Field Labels - Upgraded form with floating labels, Bootstrap 5 and IUX Pattern Library, redirect to Thank You page after valid form submission, etc.Delivered Design
Other Pages
- Thank You Page - Instead of the modal that shows up after successful form validation in the older form design, this would be a Thank You page the user gets redirected to after successful form validationDelivered Design
Additional Files
- Boilerplate - Template for APA Labs forms. Note: May need modifications with taking out spinner and thank you modal, etc.Keeping for Reference
- Digital Badge Lead Form - Reconstructed from https://apaonline.my.site.com/apa/reviewlead?Source=Web, but, this form will need to be redone with the new "Expert Sign-Up Form" template standards.Keeping for Reference - Needs to be Updated
- Expert Sign-Up Form - Old input field design - Following the design of the Digital Badge lead form, but including Bootstrap 5 CSS/JS and the IUX Pattern Library stylesheet.Older Design - Not Using
- Expert Sign-Up Form - Alternate Character Count component on Professional Summary textareaOlder Design - Not Using