# Form Library — Examples Index

URL pattern: https://surveyjs.io/form-library/examples/{slug}/{framework}.md
Frameworks: reactjs | angular | vue3js | jquery | vanillajs
Every example supports all frameworks unless it carries a `Frameworks:` line.

## Survey Localization
- `survey-localization` — Survey Localization.

## Shadow DOM Support
- `render-survey-inside-shadow-dom` — Shadow DOM Support.

## Featured Demos
- `hotel-booking-form-template-free` — Hotel Booking Form.
- `order-form-template-free` — Order Form.
- `online-check-in-form-template-free` — Online Check-In Form.
- `patient-registration-form-template-free` — Patient Registration Form.
- `pet-hotel-reservation-form-template-free` — Pet Hotel Reservation Form.
- `car-rental-form-template-free` — Car Rental Form.
- `issue-report-template-free` — Issue Report.
- `sales-contract-form-template-free` — Sales Contract Form.
- `conference-registration-form-template-free` — Conference Registration Form.
- `feedback-form-template-free` — Feedback Form.

## Templates
### Healthcare
- `medical-form-templates` — Overview.
- `healthcare-covid-19-screening-form-template` — COVID-19 Screening Form.
- `healthcare-dental-appointment-request-template` — Dental Appointment Request.
- `healthcare-hipaa-release-form-template` — HIPAA Release Form.
- `healthcare-leicester-cough-questionnaire-template` — Leicester Cough Questionnaire.
- `healthcare-pain-assessment-form-template` — Pain Assessment Form.
- `healthcare-patient-assessment-form` — Patient Assessment Form.
- `healthcare-patient-feedback-questionnaire-template` — Patient Feedback Questionnaire.
- `healthcare-patient-medical-history-form-template` — Patient Medical History.

### Human Resources
- `employee-form-templates` — Overview.
- `hr-background-check-consent-form-template` — Background Check Consent Form.
- `hr-buy-sell-holiday-request-form-template` — Buy/Sell Holiday Request.
- `hr-360-degree-feedback-review-form-template` — 360 Degree Feedback Review Form.
- `hr-employee-information-form` — Employee Information Form.
- `hr-expense-reimbursement-claim-form-template` — Expense Reimbursement Claim Form.
- `hr-informed-consent-form-template` — Informed Consent Form.
- `hr-job-application-form` — Job Application Form.
- `hr-flexible-working-hours-request-form-template` — Flexible Working Hours Request Form.

### Education
- `academic-form-templates` — Overview.
- `education-alumni-survey-template` — Alumni Survey.
- `education-event-registration-form-template` — Event Registration Form.
- `education-timed-quiz-template` — Geography Quiz.
- `education-online-course-registration-form-template` — Online Course Registration Form.
- `education-scholastic-assessment-test-template` — Scholastic Assessment Test.
- `education-student-enrollment-form-template` — Student Enrollment Form.
- `education-student-feedback-form-template` — Student Feedback for Classroom Teaching.
- `education-teacher-evaluation-form-template` — Teacher Evaluation Form.

### Other Industries
- `other-templates` — Overview.
- `how-to-configure-and-embed-cancellation-survey` — Cancellation Survey.
- `grant-application-form-template` — Grant Application Form.
- `how-to-configure-and-embed-income-survey` — Income Survey.
- `insurance-application-form-template` — Insurance Application Form.
- `loan-application-form` — Loan Application Form.
- `nps-question` — NPS Survey Question.
- `pizza-order-form` — Pizza Order Form.
- `product-feedback-survey-template` — Product Feedback Survey.
- `how-to-configure-and-embed-product-market-fit-survey` — Product/Market Fit Survey.
- `product-usage-research-survey-template` — Product Usage Research Survey.


## Simple Questions
- `text-entry-question` — Text Entry.
- `datetime-entry-question` — Date-Time Entry.
- `numeric-entry-question` — Numeric Entry.
- `color-input-question` — Color Input.
- `masked-input-fields` — Masked Input Fields.
- `single-select-radio-button-group` — Radio Button Group.
- `carry-forward-responses` — Carry Forward Responses.
- `pipe-answers-from-dynamic-matrix-or-panel` — Pipe Answers from Dynamic Matrix or Panel.
- `image-picker-question` — Image Picker.
- `yes-no-question` — Yes/No Question.
- `multiple-text-box-question` — Multiple Textboxes.
- `add-open-ended-question-to-a-form` — Long Text.
- `add-image-and-video-to-survey` — Images and Videos.
- `add-html-form-field` — HTML Field.
### Sliders
- `single-value-slider-input` — Slider.
- `dual-range-slider-input` — Range Slider.
- `customize-slider-scale-labels` — Configure Scale Labels.
- `sync-slider-with-input-fields` — Binding to Text Inputs.

### Dropdown
- `create-dropdown-menu-in-javascript` — Dropdown.
- `dropdown-menu-load-data-from-restful-service` — Load Choices from Web Services.
- `lazy-loading-dropdown` — Lazy Loading.
- `how-to-create-multiselect-tag-box` — Multi-Select Dropdown / Tag Box.
- `dropdown-custom-choice-options` — User-Defined Choices.

### Checkboxes
- `create-checkboxes-question-in-javascript` — Checkboxes.
- `exclusive-choice-options-for-multiple-choice-question` — Exclusive Choice Options.
- `individual-checkbox-comments` — Individual Checkbox Comments.
- `nest-follow-up-questions-within-choice-options` — Nest Content Within Choice Options.

### Signature
- `signature-pad-widget-javascript` — Signature.
- `upload-signature-pad-data-to-server` — Upload Signatures to a Server.

### Rating Scale
- `rating-scale` — Rating Scale.
- `ui-adaptation-modes-for-rating-scale` — UI Adaptation Modes.

### Ranking
- `add-ranking-question-to-form` — Ranking.
- `select-items-to-rank` — Select Items to Rank.

### File Upload & Photo Capture
- `file-upload` — File Upload.
- `photo-capture` — Photo Capture.
- `delayed-file-upload` — Delayed File Upload.
- `store-file-names-in-survey-results` — Retrieve Uploaded Files for Preview Using File Names.
- `custom-file-previews` — Custom File Previews.

### Expression
- `expression-question-for-dynamic-form-calculations` — Expression.
- `asynchronous-functions-in-expression-questions` — Expressions with Asynchronous Functions.


## Matrix Table Questions
- `single-selection-matrix-table-question` — Single-Select Matrix.
- `checkbox-matrix-question` — Matrix with Checkboxes.
- `multi-select-matrix-question` — Multi-Select Matrix.
- `dynamic-matrix-add-new-rows` — Dynamic Matrix.
- `transpose-dynamic-rows-to-columns-in-matrix` — Transpose Rows to Columns.
- `scoring-rubric-example` — Scoring Rubric.
- `aggregate-data-within-form` — Aggregate Data within a Form.
- `columnize-choice-options-of-matrix-cell` — Columnize Choices of a Matrix Cell.
- `add-expandable-details-section-under-matrix-rows` — Matrix Rows with Expandable Details Sections.
- `change-cell-input-type-in-matrix-table` — Matrix Table with Custom Cell Types.

## Panel & Dynamic Panel
- `set-properties-on-multiple-questions-using-panel` — Panel.
- `duplicate-group-of-fields-in-form` — Dynamic Panel.
- `tabbed-interface-for-duplicate-group-option` — Tab View for Dynamic Panel.
- `how-to-use-expressions-in-dynamic-panel` — Expressions in Dynamic Panel.

## Survey Customization
- `brand-your-survey-header` — Branded Survey Header.
- `how-to-prevent-duplicate-form-submissions` — Prevent Duplicate Form Submissions.
- `arrange-multiple-questions-in-single-line` — Arrange Questions in a Line.
- `vertically-align-input-fields` — Vertically Align Input Fields.
- `auto-populate-form-fields` — Auto-Populate Form Fields.
- `text-piping-in-surveys` — Text Piping.
- `custom-variables-for-background-form-calculations` — Background Calculations.
- `merge-question-values` — Merge Question Values.
- `save-and-restore-user-responses-to-complete-survey` — Continue an Incomplete Survey.
- `prevent-form-editing-with-read-only-mode` — Read-Only / Display Mode.
- `survey-preview` — Survey Preview.
- `survey-review-mode` — Review Mode.
- `popup-survey` — Pop-Up Survey.
- `lazy-loading` — Lazy Loading for Content-Heavy Forms.
- `how-to-create-calculator-form` — Calculator Forms for E-commerce.
### Configure Element Titles
- `modify-question-title` — Title Customization.
- `how-to-number-pages-and-questions` — Question Auto-Numbering.
- `modify-titles-of-survey-elements` — Context Actions in Titles.
- `change-heading-levels` — Change Heading Levels.

### Markdown Support
- `edit-survey-questions-markdown` — Markdown Support with markdown-it.
- `enable-markdown-in-surveys` — Markdown Support with Marked.

### Question Loops
- `loop-and-merge` — Loop and Merge.
- `breakable-loop` — Breakable Loop.
- `nested-loops` — Nested Loops.


## Quizzes and Scored Surveys
- `make-quiz-javascript` — Make a Quiz.
- `create-quiz-with-immediate-results` — Quiz with Instant Results.
- `review-mode-for-quiz-results` — Review Quiz Results.
- `create-a-scored-quiz` — Scored Quiz.
- `create-a-scored-survey` — Scored Survey.

## Customize Rendering
- `dropdown-box-with-custom-items` — Dropdown with Custom Item Template.
- `add-custom-items-to-single-and-multi-select-questions` — Single- and Multi-Select Questions with Custom Item Template.
- `ranking-with-custom-items` — Ranking Question with Custom Item Template.
- `create-custom-question-renderer` — Custom Question Renderer.
- `add-custom-question-type-to-form-builder` — Custom Question Type.
- `change-survey-html-with-javascript` — Change Survey HTML with JavaScript.

## Integration with Third-Party Libraries
- `form-builder-with-rich-content-editor` — Quill.
- `form-with-datepicker` — Date Picker.

## Appearance Customization
- `customize-survey-with-css` — CSS Customization.
- `add-animation-effects-to-form-elements` — Survey Animation.
- `custom-icons` — Custom Icons.
### Theme Adapters
- `bootstrap-theme-adapter` — Bootstrap.
- `material-ui-theme-adapter` — Material UI.
- `shadcn-theme-adapter` — shadcn/ui.


## Navigation
- `table-of-contents` — Table of Contents.
- `table-of-contents-with-question-progress` — TOC with Question Progress.
- `configure-form-navigation-with-progress-indicators` — Progress Indicators.
- `progress-bar-with-percentage` — Custom Progress Bar.
- `add-custom-navigation-button` — Custom Navigation Buttons.
- `external-form-navigation-system` — Implement External Form Navigation.
- `automatically-move-to-next-page-if-answer-selected` — Move to the Next Page Automatically.
- `multi-step-form-wizard` — Form Wizard.

## Conditions and Triggers
- `implement-conditional-logic-to-change-question-visibility` — Conditional Visibility.
- `how-to-conditionally-make-input-field-read-only` — Conditional Read-Only State.
- `add-skip-logic-to-survey` — Skip Logic.
- `conditional-logic-and-branching-in-surveys` — Simplify Cascade Conditions.
- `set-question-value-dynamically` — Dynamically Set and Reset Question Values.
- `specify-default-question-value-dynamically` — Dynamic Default Question Values.
- `use-and-represent-complex-questions-in-expressions` — Complex Questions in Expressions.
- `use-custom-functions-in-expressions` — Custom Functions in Expressions.
- `add-custom-expression-property` — Implement a Custom Expression Property.
- `how-to-conditionally-display-choice-options` — Conditional Visibility for Choice Options.
- `change-visibility-of-rows-in-matrix-table` — Conditional Visibility for Matrix Rows and Columns.

## Input Validation
- `javascript-form-validation` — Form Validation.
- `validator-notification-types` — Validator Notification Types.
- `add-custom-input-validation` — Custom Validation Using an Event.
- `add-custom-survey-data-validation` — Custom Validation Using Expressions.
- `javascript-server-side-form-validation` — Async Validation Using an Event.
- `javascript-async-form-validation` — Async Validation Using Expressions.
### Data Quality Validation
- `detect-miskeyed-form-entries` — Detect Mis-Keyed Entries.
- `detect-abbreviations-in-form-entries` — Abbreviation Detection.
- `double-entry-verification` — Double-Entry Verification.
- `detect-duplicate-form-records` — Duplicate Detection.


## Advanced Use Cases
- `extract-data-from-paper-forms-pdf` — Extract Data from Paper Forms.
- `collaborative-survey` — Multi-User Form Filling.