Questions tagged [forms]
Forms are a collection of input fields and design patterns that collect and process different types of qualitative and quantitative data input from users. Can include the visible user interface components as well as the logic required for controlling aspects of its behavior such as form validation, data retrieval and storing of incomplete forms.
2,865
questions
1
vote
1
answer
31
views
Multiple select fields
I am trying to allow users to select something that has two names (one numerical and one text):
Reference number
Name
Reference number is required when adding but the name is an optional additional ...
0
votes
2
answers
33
views
Assistive texts in forms
I'm designing a long form that requires users to complete multiple fields and upload various documents. I'm considering where to place assistive text—either alongside the label or beneath the field. ...
- 61
0
votes
1
answer
55
views
Best way for users to report conditions for different segments of the same road
I have developed a site that tracks the status of backcountry roads for drivers where users can view or report on the conditions of the roads they drive. At the moment report functionality is quite ...
- 103
0
votes
2
answers
106
views
How to ask users their working habits?
I want to ask my users what their working habits are. Specifically, I want these pieces of information:
What locations they work from
How they split their time
Where are they working from now
This ...
- 549
0
votes
2
answers
90
views
what do you call a multi-mode form?
A bunch of apps forms with multiple modes:
a "view mode" with all of the data displayed in text form
an "edit mode" with all of the data displayed in <input> tags which ...
- 103
0
votes
1
answer
80
views
UI Design for dynamically manage multiple groups of form elements
I'm developing a user interface where users need to dynamically manage multiple groups of form elements. These groups may vary in content and quantity. What user interface guidelines and patterns ...
- 1
0
votes
2
answers
90
views
Non-text Contrast (Level AA) with input field background against a web page background
I have a question regarding the accessibility of this design and whether it complies with WCAG guidelines and success criteria. Below is an image of a set of input fields on a specific background:
...
- 13
0
votes
2
answers
27
views
Program application and payment processing
I'm designing an a program application flow for a client. If the applicant is approved, they must pay for membership to the service. The application form is quite lengthy and required 4 business days ...
- 1
0
votes
1
answer
65
views
Input form where all values have a default
I am writing the UI for a tool that makes some plots (HTML here):
This program makes plots like this:
The input controls the limits of the axis, and the number of bins.
All of these fields (except ...
- 101
1
vote
1
answer
62
views
Should I use a stepper or wizard for a form that is frequently used by users?
I have a form that consist of 5 main question, of which 4 are not necessary to answer depending on the selection on the first. So the flow is roughly:
Are you allowed to swim?
yes -> go to 2
no -&...
- 111
0
votes
2
answers
74
views
How may I label identical user generated form fields in an accessible way?
Background
I work with web forms for users that have trouble getting employed because of e.g. disabilities, being new to the country and language, etc. We have to ask them questions to learn about ...
- 21
0
votes
1
answer
61
views
Optional Newsletter Signup Best Practice - Checkbox = Yes/[empty] OR Yes/No?
My site has many, many forms and a user may fill out multiple forms in a visit. Each form filled out places the user on a specific mailing list related to their inquiry. At the end of each form, the ...
- 1
0
votes
1
answer
41
views
Does show/hide functionality belong in disabled fields?
I'm working on a masking pattern for our text input fields. Show/hide would look like this:
I'm not sure if we should provide show/hide if the input is disabled.
Right now in the disabled state, we'...
- 12.8k
1
vote
0
answers
91
views
What are the best practices for determining appropriate input fields for a form by gathering the context only from the backend developer?
I'm currently tasked with designing a user form for a data solution product, but facing a bit of challenges. I do have a basic knowledge of the products' goals but haven't been provided with clear and ...
- 89
1
vote
2
answers
122
views
Alternative to a shadow
For forms, we use sticky button bars at the bottom of the browser. This increased the conversion.
The sticky bar has a shadow effect to make it clear that the user can scroll further down.
In some ...
- 21
1
vote
3
answers
85
views
Should a "selected counter" be updated when the list it counts is filtered?
Situation:
I have a list where a user can turn items on or off using a switch. I added a super above the label of the list to show how many items in the list are turned on.
Now the user can also ...
- 1,079
0
votes
0
answers
36
views
How to highlight fields for an OCR assist without distracting the user from the rest of the form?
Designing an OCR solution to assist healthcare claim assessors in reviewing claims for approval in a telehealth app. It will auto-fill certain fields using the info captured from on document ...
- 10.7k
-1
votes
4
answers
169
views
Which toggle pattern is better?
My design team disagrees about the best toggle experience. The toggle is meant to authorize a client. I will leave it at that to avoid influencing any responses. Which one do you prefer, and why?
- 24
0
votes
3
answers
128
views
How to use "required" asterisk in forms
For mandatory fields
If there are fields that already have default values (cannot be left blank), should an asterisk (*) still be used to indicate that they are required?
Example:
- 1
0
votes
1
answer
59
views
Show information based on phone number
We are a parcel delivery company looking to enhance a feature that uses a phone number to indicate a customer's success rate based on parcel returns. We have two UX versions in mind:
After validating ...
0
votes
1
answer
83
views
What's the best way to organize the content on this page? How do I place the different kinds of inputs and read-only values since there's so many
I'm redesigning a web form that users can use to create water compliance tests. The issue I'm running into is that there's a lot of information - both inputs and read-only fields that are derived from ...
1
vote
3
answers
296
views
Best way to offer a choice between 33+ items
I have a website for a card game that has "seasons". There are four of these seasons per year. When there were only a few seasons a dropdown sufficed to allow you to time travel between ...
1
vote
1
answer
46
views
How to Encourage Users to Submit Multiple Price Requests on Our App?
Our app allows users to ask the price from vendors. The flow is as follows:
Click on the 'Request price' button
Fill and submit a form
The information filled in the form is saved and can be reused ...
- 11
1
vote
2
answers
63
views
Auto numbering on questions
I'm designing a survey form builder. One proposed feature is to allow administrators to enable automatic numbering for questions and question groups. However, the software's robust logic and rule ...
2
votes
1
answer
93
views
Error message on blue background form?
I am trying to make an error message that is visible and matches the styling of a blue form, image attached. I am having difficulty since the red doesn't stand out against the blue background. Any ...
- 21
0
votes
1
answer
95
views
Should this edit form have fewer items than the add-new form?
I have an edit user form with the following fields: name, alternative name, gender, birthday, country, address, mobile phone, telephone, fax, email, Line, Facebook, and WeChat.
Should the add new user ...
- 1,595
0
votes
0
answers
28
views
Full width buttons on desktop web application [duplicate]
I have a design for a form with a full width button, this is a desktop web application and for context it is an interactive shell/terminal that lest you submit API requests. It essentially looks like ...
- 223
1
vote
2
answers
64
views
Best way to reorganize large forms with niche user group?
I've hit a challenge with designing a web application that has a long form with many text field inputs (30+). Solutions go against best practices.
Users are very technical and are engineers who need ...
- 21
0
votes
1
answer
233
views
Form validation question where if you click in a required field but leave it without typing it displays an error
This is a form on a webpage with about 8 text fields. I am curious has anyone seen this pattern which I am thinking of using. The submit button on the form is disabled. If the user clicks in a ...
- 71
1
vote
2
answers
63
views
How to let users add to a long chunk of text without editing the existing text?
I'm creating a form that generates a description (2-3 sentences) based on the user's choices. I want to allow users to then add more text to the description, but without editing the existing text. Any ...
- 11
0
votes
1
answer
149
views
What could I use instead of these pill drop down selectors
I am looking for a alternative way to display multiple options for a user selection.
The user selects a part and then must select a choice of options which populates a table.
I tried with 'pill' ...
- 1
0
votes
2
answers
195
views
How to display range of thousands of dollars in a HTML dropdown
For a website that provides kitchen renovations, we want to display a range of budgets. These are on $1,000s of dollars in a range from $35,000 - > $150,000
We are considering a range of ways to ...
- 103
0
votes
0
answers
34
views
Location of advanced options on form
In our platform, you can schedule routine scans. Imagine you can check boxes to scan for people, cars, locations. But under advanced options (located currently at the bottom) you can perform a type of ...
- 21
0
votes
1
answer
105
views
Creating discounts that are stackable
I'm creating a stacked discount setup page and I am stuck on a screen. I do not know how do I visualise the setup when the input can be numerical or 'all' items at any point of time.
Imagine you have ...
- 13
2
votes
1
answer
224
views
What's the best way to dynamically hide/show form elements when a user enters a value in a text/number field?
Context
I work for a company that designs financial management software, and I've been asked to provide some redesigns for an expense rule builder. It allows users with admin privileges to set limits ...
- 21
1
vote
1
answer
76
views
Is providing a user with a 'change view' option when completing a long form a good user experience?
For context, I am designing a new form that a user is required to complete in a modal window. I have two options designed: a long scrollable form, and the same form broken into sections displayed ...
- 113
1
vote
2
answers
179
views
Minimum focus style for a text input
I'm currently working on a chat style UI that has a single text input for entering a message.
Usually I would follow the recommended accessibility best practises for the correct focus styling. I know ...
- 45
2
votes
1
answer
88
views
Examples of multi-step asynchronous workflows
our SaaS product has a very interesting 'workflow' pattern, and we are looking for examples of how other products might have handled this.
It works like this:
User fills out a short form (5 fields) ...
- 106
1
vote
2
answers
393
views
Disabled options within a drop down
I have a scenario where a user can select a name from a dropdown list which will then prefill their details. They may need to add details for multiple people. So, if there are 2 people. I select a ...
1
vote
0
answers
50
views
How to have a form and a preview of what the form generates on a small screen? [closed]
I am looking at this webcode.tools page:
You find this pattern a lot, like with codesandbox and other places.
I am thinking of putting ads on the left and right as persistent (320px width each), so ...
- 473
0
votes
1
answer
65
views
File download required before validation (mobile) [closed]
In mobile app I working on, I need force the user to download a file (GDPR) before validating a form. I dont have idea how to make it user-friendly. Can you help me?
- 13
1
vote
2
answers
104
views
When my page has multiple input forms with a range of options from 2 - 10, should i use dropdowns, segmented control, or a mix of both?
I have a form where the user select multiple different inputs. One input might have only 2 options (parent,child), while the next input might have 5 options (age: 0, 1-18, 18-25, 25-55, 55+), etc. ...
- 1,324
1
vote
1
answer
89
views
How to add a new contact inside a form using a contact dropdown?
I have a form using a contact dropdown and I would like to add a contact if the contact isn't present in the list. I need at least 2 fields for a contact (firstname and lastname).
For example :
I've ...
- 13
2
votes
1
answer
128
views
Are there any guidelines for using the auto focus (programmatic focus) on a webpage by WCAG 2.0?
Regarding ADA compliance and web accessibility guidelines like WCAG and WAI-ARIA, is there a specific requirement recommending the auto-focusing of input fields after service failure error (not a ...
1
vote
1
answer
60
views
How to call bottom sheet?
Well I have a form look and since I avoided to use dropdowns and in this case I have a category which user has to pick from bottom sheet (I use them to replace dropdowns). Now I don't know how to in ...
- 51
2
votes
2
answers
99
views
Best method for ordering information in a form
Is there a good method for deciding on layout and order of information in a complex form ?
For example - deciding how to order many customer details in a CRM system.
Should the main criteria for order ...
- 21
1
vote
2
answers
73
views
Giving user a visual cue that form controls are disabled after clicking submit, while the form is being processed?
Never tested or researched this, tbh.
After clicking submit, the submit button's label is replaced by a "processing" animation indicator. Functionally - the form is disabled, so user can't ...
2
votes
1
answer
62
views
Whats a better way to group dates on a form
Looking to improve a claims form that claims assessors to review and approve in the insurance industry. One of the comments the user mentioned was that dates related to the claim was all over the ...
- 10.7k
12
votes
4
answers
3k
views
What is the best UI for allowing the repeated selection of the same item from a list?
In my project, I have two lists of items: on the left, all the possible items for selection, and on the right, those that have been chosen.
Unlike typical scenarios, in my case, the same item can be ...
- 153
7
votes
5
answers
2k
views
Suggestions for UI for Delicate Question w/ Several Options?
I’m a longtime (20+ years) UI/UX designer and full stack developer, but I’m running into a wall with the UI for a specific field, concerning a delicate question that can be approached and handled in ...
- 191