--- title: Online Check-In Form product: Form Library description: Discover our free online check-in form template, complete with a ready-to-use code example for JavaScript. It showcases SurveyJS Creator's impressive features, such as a duplicate group option for registering multiple passengers at once and a smart form flow with conditional logic to display extra fields when passengers indicate connecting flights. framework: Angular source: https://surveyjs.io/form-library/examples/online-check-in-form-template-free/angular index: https://surveyjs.io/form-library/examples/overview.md --- # Online Check-In Form (Angular) Online check-in forms allow passengers to check in for their flight, train, or bus without leaving the comfort of their homes or offices. This demo illustrates a typical online flight registration form. Form users can add multiple passengers, specify flight details, and leave contacts of a person to notify in case the trip is delayed or canceled. This form is created and designed using SurveyJS Survey Creator with an integrated Theme Editor. The following sections give an overview of this form's key solutions and describe how to implement them. ## Add a Background Image The online flight check-in form in this demo has a distinct background image. With Theme Editor by SurveyJS, you can add background images to your forms with ease. Open the **Themes** tab in Survey Creator and switch to the **Background** category. Editors under the **Background image** title enable you to add a background image and configure its every aspect. Configure a background image in SurveyJS Theme Editor These editors are mapped to the following theme JSON schema properties, which you can find in the `theme.js` file: - [`backgroundImage`](https://surveyjs.io/form-library/documentation/api-reference/itheme#backgroundImage): `string` An image to display as form background. This property accepts a hyperlink or a data URL. - [`backgroundImageFit`](https://surveyjs.io/form-library/documentation/api-reference/itheme#backgroundImageFit): `"auto"` | `"contain"` | `"cover"` A string value that specifies how to resize the background image to fit it into its container. Refer to the description of the [`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#values) CSS property values on MDN for detailed information on the possible values. - [`backgroundImageAttachment`](https://surveyjs.io/form-library/documentation/api-reference/itheme#backgroundImageAttachment): `"fixed"` | `"scroll"` A string value that specifies whether the background image is fixed in its position (as in this demo) or scrolled along with the survey. - [`backgroundOpacity`](https://surveyjs.io/form-library/documentation/api-reference/itheme#backgroundOpacity): `number` A value from 0 to 1 that specifies how transparent the background image should be: 0 makes the image completely transparent, and 1 makes it opaque. In Theme Editor, the opacity values are mapped to a scale from 0% to 100%. ## Configure the Form Header The header of your form typically contains a form title, short description, and a logo of your company. To specify title and description texts, open the Designer tab and enter them in the **Survey title** and **Survey description** editors in the **General** category. Specify survey title and description in SurveyJS Survey Creator To configure a logo, use editors in the **Logo in the Survey Header** category. Specify logo in SurveyJS Survey Creator These editors are mapped to the following survey JSON properties: - [`title`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#title) - [`description`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#description) - [`logo`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logo) - [`logoWidth`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logoWidth) - [`logoHeight`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logoHeight) - [`logoFit`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logoFit) To configure the appearance of the form header, open the Themes tab and use editors in the **Header** category. Ensure that the **View** switch is set to "Advanced". All editors in the Header category, except font editors and View, are mapped to corresponding [`header`](https://surveyjs.io/form-library/documentation/api-reference/iheader) object properties in the theme JSON schema (see the `theme.js` file). Configure form header in SurveyJS Theme Editor ## Use Placeholders for Form Field Titles If you want to design more compact and neat-looking forms, you can hide form field titles and display title texts as input field placeholders. To implement this layout in your form, follow the steps below: 1. Open the Designer tab. 2. Select a question on the design surface. 3. In the Property Grid, switch to the **General** category. 4. Find and unselect the **Show the title and description** checkbox. 5. Enter the form field title in the **Placeholder text within input field** editor. Set input field placeholder in SurveyJS Survey Creator In the survey JSON schema, these editors are mapped to a question's [`titleLocation`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#titleLocation) and [`placeholder`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#placeholder) properties. ## Files ### `src/app/components/json.ts` ```ts export const json = { "title": "Online Check-in", "description": "Check-in is available 2 to 24 hours prior to departure for all destinations. To complete the check-in process, please fill out the form below.", "logo": "https://api.surveyjs.io/private/Surveys/files?name=ee96dc76-ecfb-4b17-8589-493015f1132a", "logoWidth": "auto", "logoHeight": "40", "completedHtml": "
\n\n
\n

Check-in complete.

\n

Thank you for checking in. Your journey with us is all set. Have a great flight.

\n
\n\n
\n", "pages": [ { "name": "page1", "elements": [ { "type": "paneldynamic", "name": "passengers", "width": "100%", "minWidth": "256px", "titleLocation": "hidden", "templateQuestionTitleLocation": "hidden", "templateElements": [ { "type": "text", "name": "first-name", "width": "35%", "minWidth": "208px", "title": "PASSENGER #{panelIndex} INFO", "titleLocation": "top", "placeholder": "First name" }, { "type": "text", "name": "last-name", "width": "30%", "minWidth": "172px", "startWithNewLine": false, "title": " ", "titleLocation": "top", "placeholder": "Last name" }, { "type": "dropdown", "name": "prefix", "width": "35%", "minWidth": "208px", "startWithNewLine": false, "title": " ", "titleLocation": "top", "choices": [ "Mr.", "Mrs.", "Ms." ], "choicesOrder": "random", "placeholder": "Prefix", "allowClear": false }, { "type": "multipletext", "name": "birthdate", "width": "65%", "minWidth": "256px", "items": [ { "name": "date", "inputType": "date", "title": "Date of birth" } ] }, { "type": "text", "name": "nationality", "width": "35%", "minWidth": "208px", "startWithNewLine": false, "placeholder": "Nationality" }, { "type": "text", "name": "passport-number", "width": "100%", "minWidth": "256px", "title": "PASSENGER #{panelIndex} ID", "titleLocation": "top", "placeholder": "Passport #" }, { "type": "dropdown", "name": "passport-issue-country", "width": "35%", "minWidth": "208px", "choicesByUrl": { "url": "https://surveyjs.io/api/CountriesExample", "valueName": "name" }, "placeholder": "Country of issue", "allowClear": false }, { "type": "multipletext", "name": "passport-exp-date", "width": "65%", "minWidth": "256px", "startWithNewLine": false, "items": [ { "name": "date", "inputType": "date", "title": "Exp. date" } ] } ], "panelCount": 1, "minPanelCount": 1, "confirmDeleteText": "Do you want to delete the passenger?", "addPanelText": "ADD PASSENGER", "removePanelText": "REMOVE", "showProgressBar": false }, { "type": "panel", "name": "person-to-notify", "elements": [ { "type": "text", "name": "person-to-notify-first-name", "width": "35%", "minWidth": "208px", "title": "PERSON TO NOTIFY", "titleLocation": "top", "setValueIf": "{passengers[0].first-name} notempty", "setValueExpression": "{passengers[0].first-name}", "placeholder": "First name" }, { "type": "text", "name": "person-to-notify-last-name", "width": "30%", "minWidth": "172px", "startWithNewLine": false, "title": " ", "titleLocation": "top", "setValueIf": "{passengers[0].last-name} notempty", "setValueExpression": "{passengers[0].last-name}", "placeholder": "Last name" }, { "type": "dropdown", "name": "person-to-notify-prefix", "width": "35%", "minWidth": "208px", "startWithNewLine": false, "title": " ", "titleLocation": "top", "setValueIf": "{passengers[0].prefix} notempty", "setValueExpression": "{passengers[0].prefix}", "choices": [ "Mr.", "Mrs.", "Ms." ], "choicesOrder": "random", "placeholder": "Prefix", "allowClear": false }, { "type": "text", "name": "person-to-notify-email", "width": "65%", "minWidth": "256px", "inputType": "email", "placeholder": "Email" }, { "type": "text", "name": "person-to-notify-phone", "width": "35%", "minWidth": "208px", "startWithNewLine": false, "placeholder": "Phone" }, { "type": "text", "name": "person-to-notify-address", "width": "100%", "minWidth": "256px", "title": "ADDRESS", "titleLocation": "top", "placeholder": "Address line 1" }, { "type": "text", "name": "person-to-notify-city", "width": "35%", "minWidth": "208px", "placeholder": "City" }, { "type": "text", "name": "person-to-notify-state", "width": "30%", "minWidth": "172px", "startWithNewLine": false, "placeholder": "State" }, { "type": "text", "name": "person-to-notify-zip", "width": "35%", "minWidth": "208px", "startWithNewLine": false, "placeholder": "Zip Code" }, { "type": "dropdown", "name": "person-to-notify-country", "width": "100%", "minWidth": "256px", "choicesByUrl": { "url": "https://surveyjs.io/api/CountriesExample", "valueName": "name" }, "placeholder": "Country", "allowClear": false } ], "questionTitleLocation": "hidden", "width": "100%", "minWidth": "256px" }, { "type": "panel", "name": "flight", "elements": [ { "type": "text", "name": "departure-booking-number", "width": "65%", "minWidth": "256px", "title": "DEPARTURE", "titleLocation": "top", "validators": [ { "type": "regex", "text": "Your booking number must consist of exactly 6 digits.", "regex": "^\\d{6}$" } ], "maxLength": 6, "placeholder": "Please enter your 6-digit booking number" }, { "type": "text", "name": "departure-flight-number", "width": "35%", "minWidth": "208px", "startWithNewLine": false, "title": " ", "titleLocation": "top", "placeholder": "Flight #" }, { "type": "multipletext", "name": "departure-date", "width": "65%", "minWidth": "256px", "items": [ { "name": "date", "inputType": "date", "title": "Date" } ] }, { "type": "multipletext", "name": "departure-time", "width": "35%", "minWidth": "208px", "startWithNewLine": false, "items": [ { "name": "time", "inputType": "time", "title": "Time" } ] }, { "type": "dropdown", "name": "departure-country", "width": "65%", "minWidth": "256px", "title": "DEPARTING FROM", "choicesByUrl": { "url": "https://surveyjs.io/api/CountriesExample" }, "placeholder": "Country", "allowClear": false }, { "type": "text", "name": "departure-city", "width": "35%", "minWidth": "208px", "startWithNewLine": false, "title": " ", "placeholder": "City" }, { "type": "dropdown", "name": "destination-country", "width": "65%", "minWidth": "256px", "title": "DESTINATION", "titleLocation": "top", "choicesByUrl": { "url": "https://surveyjs.io/api/CountriesExample" }, "placeholder": "Country", "allowClear": false }, { "type": "text", "name": "destination-city", "width": "35%", "minWidth": "208px", "startWithNewLine": false, "title": " ", "titleLocation": "top", "placeholder": "City" }, { "type": "checkbox", "name": "connecting-flight", "width": "100%", "minWidth": "256px", "choices": [ { "value": "true", "text": "I have a connecting flight" } ] }, { "type": "multipletext", "name": "connecting-flight-date", "visibleIf": "{connecting-flight} = ['true']", "width": "65%", "minWidth": "256px", "items": [ { "name": "date", "inputType": "date", "title": "Date" } ] }, { "type": "multipletext", "name": "connecting-flight-time", "visibleIf": "{connecting-flight} = ['true']", "width": "35%", "minWidth": "208px", "startWithNewLine": false, "items": [ { "name": "time", "inputType": "time", "title": "Time" } ] }, { "type": "text", "name": "connecting-flight-booking-number", "visibleIf": "{connecting-flight} = ['true']", "width": "65%", "minWidth": "256px", "title": "DEPARTURE", "validators": [ { "type": "regex", "text": "Your booking number must consist of exactly 6 digits.", "regex": "^\\d{6}$" } ], "maxLength": 6, "placeholder": "Please enter your 6-digit booking number" }, { "type": "text", "name": "connecting-flight-number", "visibleIf": "{connecting-flight} = ['true']", "width": "35%", "minWidth": "208px", "startWithNewLine": false, "placeholder": "Flight #" } ], "questionTitleLocation": "hidden", "width": "100%", "minWidth": "256px" } ] } ], "questionDescriptionLocation": "underInput", "questionErrorLocation": "bottom", "completeText": "Check In", "widthMode": "static", "width": "860" }; ``` ### `src/app/components/survey.component.css` ```css /* You can add your custom CSS here. */ ``` ### `src/app/components/survey.component.html` ```html ``` ### `src/app/components/survey.component.ts` ```ts import { Component, OnInit } from "@angular/core"; import { Model } from "survey-core"; import { json } from "./json"; import { themeJson } from "./theme"; import "./survey.component.css"; import "survey-core/survey-core.min.css"; @Component({ // tslint:disable-next-line:component-selector selector: "component-survey", templateUrl: "./survey.component.html", styleUrls: ["./survey.component.css"] }) export class SurveyComponent implements OnInit { model: Model; ngOnInit() { const survey = new Model(json); survey.applyTheme(themeJson); survey.onComplete.add((sender, options) => { console.log(JSON.stringify(sender.data, null, 3)); }); this.model = survey; } } ``` ### `src/app/components/theme.ts` ```ts export const themeJson = { "backgroundImage": "https://api.surveyjs.io/private/Surveys/files?name=0e692c99-8fa6-4f8b-b06e-ded5f714d0c8", "backgroundImageFit": "cover", "backgroundImageAttachment": "fixed", "backgroundOpacity": 0.75, "cssVariables": { "--sjs-general-backcolor": "rgba(255, 255, 255, 0.25)", "--sjs-general-backcolor-dark": "rgba(248, 248, 248, 1)", "--sjs-general-backcolor-dim": "#197CE6", "--sjs-general-backcolor-dim-light": "rgba(255, 255, 255, 1)", "--sjs-general-backcolor-dim-dark": "rgba(243, 243, 243, 1)", "--sjs-general-forecolor": "rgba(0, 0, 0, 0.91)", "--sjs-general-forecolor-light": "rgba(0, 0, 0, 0.45)", "--sjs-primary-backcolor": "rgba(4, 91, 185, 1)", "--sjs-primary-backcolor-light": "rgba(255, 255, 255, 0.25)", "--sjs-primary-backcolor-dark": "rgba(4, 91, 185, 0.75)", "--sjs-primary-forecolor": "rgba(255, 255, 255, 1)", "--sjs-primary-forecolor-light": "rgba(255, 255, 255, 0.25)", "--sjs-base-unit": "8px", "--sjs-corner-radius": "4px", "--sjs-shadow-small": "0px 0px 0px 0px rgba(0, 0, 0, 0)", "--sjs-shadow-medium": "0px 2px 6px 0px rgba(0, 0, 0, 0.1)", "--sjs-shadow-large": "0px 8px 16px 0px rgba(0, 0, 0, 0.1)", "--sjs-shadow-inner": "0px 0px 0px 0px rgba(0, 0, 0, 0)", "--sjs-border-light": "rgba(255, 255, 255, 0.15)", "--sjs-border-default": "rgba(0, 0, 0, 0.25)", "--sjs-border-inside": "rgba(0, 0, 0, 0.16)", "--sjs-special-red": "rgba(229, 10, 62, 1)", "--sjs-special-red-light": "rgba(229, 10, 62, 0.1)", "--sjs-special-red-forecolor": "rgba(255, 255, 255, 1)", "--sjs-special-green": "rgba(25, 179, 148, 1)", "--sjs-special-green-light": "rgba(25, 179, 148, 0.1)", "--sjs-special-green-forecolor": "rgba(255, 255, 255, 1)", "--sjs-special-blue": "rgba(67, 127, 217, 1)", "--sjs-special-blue-light": "rgba(67, 127, 217, 0.1)", "--sjs-special-blue-forecolor": "rgba(255, 255, 255, 1)", "--sjs-special-yellow": "rgba(255, 152, 20, 1)", "--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)", "--sjs-special-yellow-forecolor": "rgba(255, 255, 255, 1)", "--font-family": "Open Sans", "--sjs-questionpanel-cornerRadius": "8px", "--sjs-editorpanel-hovercolor": "rgba(4, 91, 185, 1)", "--sjs-editorpanel-cornerRadius": "3px", "--sjs-font-pagetitle-color": "rgba(255, 255, 255, 1)", "--sjs-font-editorfont-color": "rgba(0, 0, 0, 0.9)", "--sjs-font-editorfont-placeholdercolor": "rgba(0, 0, 0, 0.5)", "--sjs-font-questiontitle-color": "rgba(255, 255, 255, 1)", "--sjs-font-questiondescription-color": "rgba(255, 255, 255, 0.75)", "--sjs-questionpanel-hovercolor": "rgba(255, 255, 255, 0.15)", "--sjs-font-questiontitle-weight": "700", "--sjs-font-questiontitle-size": "14px", "--sjs-font-questiondescription-size": "14px", "--sjs-font-editorfont-size": "14px", "--sjs-header-backcolor": "transparent", "--sjs-font-headertitle-color": "rgba(255, 255, 255, 1)", "--sjs-font-headertitle-size": "24px", "--sjs-font-headerdescription-color": "rgba(255, 255, 255, 1)", "--sjs-font-headerdescription-size": "14px", "--sjs-font-headerdescription-weight": "600", "--sjs-questionpanel-backcolor": "rgba(255, 255, 255, 0.25)", "--sjs-font-headertitle-weight": "700", "--sjs-font-pagetitle-weight": "700" }, "themeName": "default", "colorPalette": "light", "isPanelless": false, "header": { "height": 176, "textAreaWidth": 424, "inheritWidthFrom": "survey", "logoPositionX": "right", "logoPositionY": "top", "titlePositionX": "left", "titlePositionY": "bottom", "descriptionPositionX": "left", "descriptionPositionY": "bottom" }, "headerView": "advanced" }; ``` ### `src/app/app.component.css` ```css ``` ### `src/app/app.component.html` ```html ``` ### `src/app/app.component.ts` ```ts import { Component } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { title = "CodeSandbox"; } ``` ### `src/app/app.module.ts` ```ts import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { AppComponent } from "./app.component"; import { SurveyModule } from "survey-angular-ui"; import { SurveyComponent } from "./components/survey.component"; @NgModule({ declarations: [AppComponent, SurveyComponent], imports: [BrowserModule, SurveyModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` ### `src/environments/environment.prod.ts` ```ts export const environment = { production: true }; ``` ### `src/environments/environment.ts` ```ts // The file contents for the current environment will overwrite these during build. // The build system defaults to the dev environment which uses `environment.ts`, but if you do // `ng build --env=prod` then `environment.prod.ts` will be used instead. // The list of which env maps to which file can be found in `.angular-cli.json`. export const environment = { production: false }; ``` ### `src/index.html` ```html ``` ### `src/main.ts` ```ts import { enableProdMode } from "@angular/core"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import { AppModule } from "./app/app.module"; import { environment } from "./environments/environment"; if (environment.production) { enableProdMode(); } platformBrowserDynamic() .bootstrapModule(AppModule) .catch(err => console.log(err)); ``` ### `src/polyfills.ts` ```ts /** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file. * * This file is divided into 2 sections: * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. * 2. Application imports. Files imported after ZoneJS that should be loaded before your main * file. * * The current setup is for so-called "evergreen" browsers; the last versions of browsers that * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. * * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html */ /*************************************************************************************************** * BROWSER POLYFILLS */ /** IE9, IE10 and IE11 requires all of the following polyfills. **/ // import 'core-js/es6/symbol'; // import 'core-js/es6/object'; // import 'core-js/es6/function'; // import 'core-js/es6/parse-int'; // import 'core-js/es6/parse-float'; // import 'core-js/es6/number'; // import 'core-js/es6/math'; // import 'core-js/es6/string'; // import 'core-js/es6/date'; // import 'core-js/es6/array'; // import 'core-js/es6/regexp'; // import 'core-js/es6/map'; // import 'core-js/es6/weak-map'; // import 'core-js/es6/set'; /** IE10 and IE11 requires the following for NgClass support on SVG elements */ // import 'classlist.js'; // Run `npm install classlist.js`. /** IE10 and IE11 requires the following for the Reflect API. */ // import 'core-js/es6/reflect'; /** Evergreen browsers require these. **/ // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. import "core-js/proposals/reflect-metadata"; /** * Required to support Web Animations `@angular/platform-browser/animations`. * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation **/ // import 'web-animations-js'; // Run `npm install web-animations-js`. /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ import "zone.js/dist/zone"; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS */ ``` ### `src/styles.css` ```css /* You can add your custom CSS here. */ ``` ### `src/typings.d.ts` ```ts /* SystemJS module definition */ declare var module: NodeModule; interface NodeModule { id: string; } ``` ### `.angular-cli.json` ```json { "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "prefix": "app", "styles": [ "styles.css" ], "scripts": [ ], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ] } ``` ### `_tsconfig.json` ```json { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "allowSyntheticDefaultImports": true, "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, "resolveJsonModule": true, "target": "es2015", "module": "es2020", "lib": [ "es2018", "dom" ] } } ``` ### `package.json` ```json { "name": "surveyjs-angular", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "14.1.1", "@angular/cdk": "14.1.1", "@angular/common": "14.1.1", "@angular/compiler": "14.1.1", "@angular/core": "14.1.1", "@angular/forms": "14.1.1", "@angular/platform-browser": "14.1.1", "@angular/platform-browser-dynamic": "14.1.1", "@angular/router": "14.1.1", "core-js": "3.6.4", "rxjs": "6.5.4", "survey-core": "latest", "survey-angular-ui": "latest", "tslib": "1.13.0", "zone.js": "0.11.7" }, "devDependencies": { "@angular/cli": "1.6.6", "@angular/compiler-cli": "^5.2.0", "@angular/language-service": "^5.2.0", "@types/core-js": "0.9.46", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~4.1.0", "tslint": "~5.9.1", "typescript": "3.9.7" }, "keywords": [ "angular", "surveyjs" ], "description": "SurveyJS-Angular example project" } ``` ## Other Frameworks - [React](https://surveyjs.io/form-library/examples/online-check-in-form-template-free/reactjs.md) - [Vue 3](https://surveyjs.io/form-library/examples/online-check-in-form-template-free/vue3js.md) - [jQuery](https://surveyjs.io/form-library/examples/online-check-in-form-template-free/jquery.md) - [Vanilla JS](https://surveyjs.io/form-library/examples/online-check-in-form-template-free/vanillajs.md)