logo

Expense Reimbursement Form

Use a free online Expense Reimbursement form to allow employees to claim reimbursement for general business expenses. An employee can specify as many expense items as required, select the category and the date, and attach receipts. The total amount is calculated automatically.

Preview
Theme:
Use this template

Fields and controls

  • Fields are divided into sections using Grid containers. Groups of fields are separated with bg-secondary class applied to Grid cells to set the background color to gray.
  • An Ink Sketch control is added for collecting signatures. Custom validation is added to prevent submissions without a signature.
  • A Data Table control is added for collecting expenses. The total value is calculated automatically using JavaScript.
  • The Expenses data table must contain at least one record. Custom validation is added using JavaScript.
  • The To value must be greater than From value. Custom validation is added using JavaScript.

JavaScript

  • The To field must be greater than From field.
  • The Expenses table must contain at least one record.
  • The signature is required.
  • The Total field is disabled on the form load and is populated automatically with the sum of all expenses whenever a user changes the list of expenses.

Styling

  • Styles for h1 and h4 elements are defined in the CSS-editor.
  • A pseudo-element is added before and after h4 to display horizontal lines.
  • The Total field has no borders and while background.
  • The primary button's font-weight is set to 700 via the Style property.