A wide variety of forms can be found throughout the CustomInk experience ranging from art and text entry/manipulation in the lab, saved design and order tracking lookup, entering billing information in the checkout process, submitting customer feedback after receiving an order and more.
Forms at CustomInk can be broken into several categories:
Most commonly used to enable customers to look up information and comprised of a single text input field (in some cases two) and in-line submit button, examples include Retrieve Your Saved Designs on the Your Account page, Search in Product Catalog and Newsletter Sign-Up in the Homepage Footer. These forms can be found as stand alone forms within a page, like Newsletter Sign-Up, or as a grouping of inline forms, like the Your Account tab/page. More details can be found in the Layouts section below.
Used across the site to collect information from users to provide pricing quotes, approve PEMLs, complete the order checkout process, create a group order form and more. Multi-input forms will most closely follow “traditional form” layouts and conventions for labels, inputs, help text, errors and submit buttons but can take on several different layouts throughout the site. More details on the following can be found in the Layouts section:
Small Forms: modals
Small Forms: lab panel
Large Forms: full page
Interactions on the site that involve form inputs, but where a user is going to interact with or manipulate the feature or page multiple times. Pressing a “submit” button in these scenarios is generally to alter something based on new inputs or save progress, but not formally move the user to a next step of a process or a new point in the customer lifecycle. Current examples of this include adding/editing text in the Design Lab and faceted browse filters in the Product Catalog. The use of this type of form may grow as we introduce more interactive experiences to the site.
Form UI Components
Given the diversity of forms seen throughout CustomInk, the individual UI components that build the forms will vary depending on the form type and use case.
At the core, all CustomInk forms include at least one input and a submit button. Each input should include a label and have input level validation/error messaging. As the complexity of a form grows, there are additional UI components that become key to a good form experience, such as headers, placeholder or help text, etc.
The following chart can be used as a quick reference for UX recommendations regarding UI component usage for the different types of forms on CustomInk.com. You can read more about individual form UI components in the form component section of the Style Guide.
Add form component best practices chart from Google Docs
Forms built on StyleBitz will have a one column layout and be left-aligned by default. Input, textarea and select elements will have a default width of 100% of their parent container and labels will sit on the line above these form elements.
Edit Google Doc content/integrate new StyleBitz details/demo pages
Group of Inline Forms
While Single Input forms are general used as one section within page that has other content, the Your Account page and mega menu tab features layouts with a grouping of single input forms. This layout allows users to have one place to look for all design and order information tied to their email/account. Each form should have it’s own heading underneath a page or tab heading that specifies the grouping of the forms.
Edit Google Doc content/integrate modal info gathering details
Small: Lab Panel
Today forms exist within the left Design Lab panel to provide controls for our interactive design experience. None of this is currently using StyleBitz. Layouts and patterns for the New Design Experience will be shaped as that project continues.
Large: Full Page
Stand-alone or single full page forms should follow default StyleBitz form behavior. Full Page forms will either have a one column layouts where the form itself is the only content or it may have a right sidebar that has supplementary or summary content that helps the user complete the form successfully. A sidebar layout should not be used for content that would draw the user away from the form, which is the primary action on the page in this scenario.
Add block/grid layout usage details
An example of a one column layout form using StyleBitz is the Feedback Form. This is a good example of default responsive behavior for StyleBitz and recommended layout.
Add content. GOF example - payment page?
Multi-page forms are best used when the task or process being completed has several steps that can be logically broken out and there is a benefit of incremental user success/checkpoints that outweighs the potential drop in completion rate by adding steps to the form. Multi-page forms with well designed transitions can also help prevent mobile users from being overwhelmed or deterred by a long form. An example of this is the checkout process. Currently there are no multi-page forms built on StyleBitz, but general recommendations include:
A progress bar should be used to communicate what step a user is on and how much is left in the multi-step form.
On each page or step, it should be clear that to the user 1) what process they are working on, such as “Checkout” and 2) what step they are one, such as “Billing Info.” Define Heading rules/best practices for multi-step forms.
Consider using a right sidebar layout at large and x-large with the form in the main, left content area and a summary in the right sidebar to help show progress, totals, etc. across the multi-step process. Define responsive layout pattern for order summary, etc. sidebars.
Review GOF setup; example of multi-page form process?