User contact details
A standardised approach to capturing user contact details:
Website pattern library
Forms
You are here:
Homepage
- Service icons
TipHTML/CSS MarkupTipDrupal 8 featured
- Homepage banner images
TipHTML/CSS MarkupTipDrupal 8 featured
Page content
- Content area headlines
TipHTML/CSS MarkupTipMendix library linkTipDrupal 8 featured
- Content sections
TipHTML/CSS Markup
- In page alerts
TipHTML/CSS MarkupTipMendix library linkTipDrupal 8 featured
- Link types
TipHTML/CSS MarkupTipMendix library linkTipDrupal 8 featured
- Button types
TipHTML/CSS MarkupTipMendix library linkTipDrupal 8 featured
- List types
TipHTML/CSS MarkupTipMendix library link
- Comparison lists
TipHTML/CSS Markup
- Pull out helper / fact box
TipHTML/CSS Markup
- Expandable helper
TipHTML/CSS Markup
- Bottom of page user actions
TipHTML/CSS Markup
- Responsive tables
TipHTML/CSS Markup
- Downloads
TipHTML/CSS Markup
Sidebars
- Right sidebar
TipHTML/CSS MarkupTipDrupal 8 featured
- Left sidebar
TipHTML/CSS MarkupTipDrupal 8 featured
Supporting content
- Useful information
TipHTML/CSS Markup
- Related documents
TipHTML/CSS Markup
- Contact information
TipHTML/CSS MarkupTipDrupal 8 featured
- Call to action - user response
TipHTML/CSS Markup
- Newsletter sign up
TipHTML/CSS MarkupTipDrupal 8 featured
Navigating content
- Previous, next & ghost buttons
TipHTML/CSS MarkupTipMendix library link
- Show more content
TipHTML/CSS MarkupTipDrupal 8 featured
- Show / hide functionality
TipHTML/CSS MarkupTipDrupal 8 featured
Forms
Inputs
- Accessible forms
TipHTML/CSS Markup
- Field labels and descriptions
TipHTML/CSS Markup
- Text fields
TipHTML/CSS MarkupTipMendix library link
- Short text fields
TipHTML/CSS MarkupTipMendix library link
- Text areas
TipHTML/CSS MarkupTipMendix library link
- Drop down selection
TipHTML/CSS MarkupTipMendix library link
- In-line radio buttons
TipHTML/CSS MarkupTipMendix library link
- Stacked radio buttons
TipHTML/CSS MarkupTipMendix library link
- Stacked check boxes
TipHTML/CSS Markup
- Conditional questions
TipHTML/CSS MarkupTipMendix library link
- Repeatable fields
TipHTML/CSS MarkupTipMendix library link
Formatted data input & field groups
- Date input
TipHTML/CSS MarkupTipMendix library link
- Date of birth
TipHTML/CSS MarkupTipMendix library link
- From - to dates
TipHTML/CSS MarkupTipMendix library link
- Prefix & post fix
TipHTML/CSS MarkupTipMendix library link
- Reference numbers
TipHTML/CSS MarkupTipMendix library link
- Address lookup
TipHTML/CSS Markup
- Manual address entry
TipHTML/CSS Markup
- User contact details
TipHTML/CSS MarkupTipMendix library link
- Preferred method of contact
TipHTML/CSS MarkupTipMendix library link
- Add a person
TipHTML/CSS Markup
- Add a person inside conditional
TipHTML/CSS Markup
- Drag and drop file uploads
TipHTML/CSS MarkupTipMendix library link
Validation & alerts
- Top of page alerts
TipHTML/CSS MarkupTipMendix library linkTipDrupal 8 featured
- Required & optional fields
TipHTML/CSS MarkupTipMendix library link
- Input field validation
TipHTML/CSS MarkupTipMendix library link
- Advanced validation
TipHTML/CSS MarkupTipMendix library link
- Data consent validation
TipHTML/CSS MarkupTipMendix library link
- Alert linked to field
TipHTML/CSS MarkupTipMendix library link
Output data
- Simple output data page
TipHTML/CSS Markup
Form Progress
- Question label
TipHTML/CSS MarkupTipMendix library link
Data consent and terms
- Data Consent - new browser tab
TipHTML/CSS Markup
- Data Consent - in form
TipHTML/CSS Markup
- Terms - new browser tab
TipHTML/CSS Markup
- Terms - in form
TipHTML/CSS Markup
- Double opt ins
TipHTML/CSS Markup