Working with Forms

Detailed guide to filling out, validating, and submitting forms.

Form Structure

Forms can contain various components:

Input Fields

Text Fields - Single-line text entry - Multi-line text areas - May have character limits

[SCREENSHOT MARKER: text-fields] Description: Show various text input fields in a form. How to capture: Display a form with text inputs, textareas visible.

Dropdowns - Select from predefined options - May be searchable - Single selection

[SCREENSHOT MARKER: dropdown-fields] Description: Show dropdown fields in use. How to capture: Show a form with dropdown menus, one expanded.

Date Pickers - Select dates from calendar - May have date range restrictions - Format varies by locale

[SCREENSHOT MARKER: date-picker] Description: Show a date picker in action. How to capture: Show a form with date picker expanded.

Checkboxes - Select multiple options - Independent selections - May have minimum/maximum selections

Radio Buttons - Select one option from a group - Mutually exclusive - Required selection

File Upload - Attach files to form - May have file type restrictions - May have size limits

[SCREENSHOT MARKER: file-upload] Description: Show file upload field. How to capture: Show a form with file upload component.

Filling Out Forms

Basic Data Entry

[SCREENSHOT MARKER: data-entry-process] Description: Show the process of filling out a form. How to capture: Show a form partially filled with various field types.

  1. Click in a field to activate it
  2. Enter or select data
  3. Tab to move to next field
  4. Use mouse to navigate between fields

Required Fields

[SCREENSHOT MARKER: required-fields] Description: Show required field indicators. How to capture: Show a form with required fields marked with asterisks.

Required fields are marked with an asterisk (*): - Must be filled before submission - Validation error if left empty - Usually highlighted in red when empty

Field Validation

[SCREENSHOT MARKER: field-validation] Description: Show real-time field validation. How to capture: Show a field with validation feedback (error or success).

Forms validate as you type: - Format validation - Email, phone, numbers - Range validation - Min/max values - Pattern validation - Specific formats - Custom validation - Business rules

Validation feedback: - Green checkmark for valid - Red error message for invalid - Appears near the field

Help Text and Tooltips

[SCREENSHOT MARKER: help-text] Description: Show help text and tooltips in forms. How to capture: Show a field with help text visible, tooltip on hover.

Forms may provide help: - Help text - Below field labels - Tooltips - Hover over field labels - Placeholders - Example text in fields - Instructions - At top of form or page

Multi-Page Forms

[SCREENSHOT MARKER: multi-page-form] Description: Show a multi-page form with navigation. How to capture: Show a form with multiple pages and navigation controls.

Some forms span multiple pages:

Page Navigation

Next/Previous Buttons - Click Next to advance - Click Previous to go back - Progress may be saved between pages

[SCREENSHOT MARKER: page-buttons] Description: Show Next/Previous navigation buttons. How to capture: Show the navigation buttons at bottom of a page.

Page Tabs - Click tabs to jump to pages - May show completion status - Some pages may be locked until previous pages complete

[SCREENSHOT MARKER: page-tabs] Description: Show page tabs in a multi-page form. How to capture: Show tabs at top of form with page names.

Page Validation

  • Each page may validate before allowing Next
  • Fix errors before proceeding
  • All pages must be valid for submission

Form Validation

Client-Side Validation

[SCREENSHOT MARKER: client-validation] Description: Show client-side validation errors. How to capture: Try to submit with errors, show error messages.

Happens in your browser: - Immediate feedback - No server round-trip - Fast response

Common validations: - Required fields - Email format - Number ranges - Date formats - Pattern matching

Server-Side Validation

[SCREENSHOT MARKER: server-validation] Description: Show server-side validation error response. How to capture: Submit a form that fails server validation, show error.

Happens on the server: - After clicking Submit - Additional business rules - Database checks - Complex validations

If server validation fails: - Form returns with errors - Error messages appear - Fix issues and resubmit

Validation Error Messages

[SCREENSHOT MARKER: validation-messages] Description: Show various validation error messages. How to capture: Show a form with multiple validation errors visible.

Error messages indicate: - Which field has the error - What the problem is - How to fix it

Common error types: - “This field is required” - “Invalid email format” - “Value must be between X and Y” - “Date must be in the future”

Conditional Logic

[SCREENSHOT MARKER: conditional-fields] Description: Show fields appearing/disappearing based on selections. How to capture: Show a form where selecting an option reveals new fields.

Some forms have dynamic behavior:

Show/Hide Fields

  • Fields appear based on selections
  • Fields hide when not relevant
  • Reduces form complexity

Conditional Requirements

  • Fields become required based on other selections
  • Validation rules change dynamically
  • Adapts to your input

Calculated Fields

  • Values auto-calculate from other fields
  • Read-only calculated results
  • Updates as you type

Auto-Save

[SCREENSHOT MARKER: auto-save-indicator] Description: Show auto-save indicator if visible. How to capture: Show any auto-save status message or indicator.

Many forms auto-save your progress: - Saves as you work - No manual save needed - Can close and return later - Progress preserved in Current forms

Note: Auto-save doesn’t submit the form - you must still click Submit.

Submitting Forms

Pre-Submission Checklist

Before submitting: - [ ] All required fields filled - [ ] All validation errors resolved - [ ] All pages completed (multi-page forms) - [ ] Data reviewed for accuracy - [ ] Attachments uploaded (if required)

Submit Process

[SCREENSHOT MARKER: submit-process] Description: Show the submit button and submission flow. How to capture: Show a completed form with Submit button, then success message.

  1. Review your entries
  2. Click the Submit button
  3. Wait for processing (don’t close browser)
  4. Confirmation message appears
  5. Form moves to Submitted

After Submission

[SCREENSHOT MARKER: submission-confirmation] Description: Show the confirmation after successful submission. How to capture: Capture the success message or redirect after submit.

After successful submission: - Confirmation message displays - Form moves from Current to Submitted - Form becomes read-only - Workflow forms enter their process - You may receive email confirmation

Submission Errors

[SCREENSHOT MARKER: submission-error] Description: Show a submission error message. How to capture: Show error message if submission fails.

If submission fails: - Error message appears - Form remains editable - Fix indicated issues - Try submitting again

Common submission errors: - Validation errors missed - Network timeout - Server error - Permission issue

Working with Attachments

[SCREENSHOT MARKER: attachment-upload] Description: Show the file attachment process. How to capture: Show uploading a file to a form.

If form has file upload fields:

Uploading Files

  1. Click the upload button/area
  2. Browse to select file
  3. Wait for upload to complete
  4. File name appears when uploaded

File Restrictions

  • File types - Only allowed types (PDF, images, etc.)
  • File size - Maximum size limit
  • Number of files - May limit quantity

Removing Attachments

  • Click remove/delete icon next to file
  • Confirm removal
  • Upload different file if needed

Workflow Forms

[SCREENSHOT MARKER: workflow-form-details] Description: Show a workflow form with workflow information. How to capture: Show a workflow form with state/history visible.

Workflow forms have additional features:

Workflow State

  • Shows current workflow state
  • Indicates where form is in process
  • May show next steps

Workflow History

  • Previous actions and approvals
  • Who acted and when
  • Comments or notes from approvers

Workflow Notifications

  • Email notifications at state changes
  • Alerts when action needed
  • Status update messages

Form Shortcuts

Keyboard Navigation

  • Tab - Move to next field
  • Shift+Tab - Move to previous field
  • Enter - Submit (when on submit button)
  • Esc - Close dialogs (if applicable)

Mouse Navigation

  • Click fields to activate
  • Click Next/Previous for pages
  • Click Submit to complete

Tips for Efficient Form Completion

Before Starting

  • Gather all required information
  • Have attachments ready
  • Understand the form purpose

While Filling Out

  • Complete in one session if possible
  • Use Tab to navigate quickly
  • Review help text for guidance
  • Save complex forms periodically (if manual save available)

Before Submitting

  • Review all entries
  • Check for validation errors
  • Verify attachments uploaded
  • Ensure all pages completed

After Submitting

  • Note confirmation message
  • Save confirmation number (if provided)
  • Check email for confirmation
  • Monitor workflow progress (if applicable)

Common Issues

Form Won’t Load

  • Refresh the page
  • Check network connection
  • Try different browser
  • Contact support

Can’t Submit

  • Check for validation errors
  • Ensure all required fields filled
  • Verify all pages completed
  • Check file upload limits

Lost Progress

  • Check Current forms
  • Auto-save may have preserved work
  • Recreate if necessary

Next Steps

Next: Working with Checklists