Создание многостраничной формы заявления о приеме на работу с помощью Angular

Пошаговое руководство по созданию многостраничной формы заявления о приеме на работу с помощью Angular и SurveyJS, бесплатной библиотеки JavaScript с открытым исходным кодом.

Оглавление:

1. Введение
2. Структура формы заявления о приеме на работу
3. Шаги по созданию формы заявления о приеме на работу
4. Заключение

Введение

Наличие на корпоративном сайте форм заявлений о приеме на работу, или "трудовых анкет", экономит время и деньги как для соискателей, так и для рекрутеров, повышает узнаваемость компании в Интернете и является неотъемлемой частью процесса найма в целом.

В типичной форме заявления о приеме на работу соискателю предлагается заполнить онлайн-анкету, содержащую поля для заполнения личной информации, образовательного ценза, предыдущего опыта работы и загрузки резюме.

Такая форма заявления может быть создана с помощью специальных онлайн-инструментов, которые обычно являются платными, но знаете что, вы можете создать форму заявления о приеме на работу с нуля, не используя никаких платных программ.

В этой статье мы рассмотрим бесплатную библиотеку JavaScript с открытым исходным кодом, которую можно использовать для создания формы заявления о приеме на работу, которую можно легко подключить к вашему сайту. Но прежде чем перейти к деталям, давайте посмотрим на технологии, которые мы будем использовать:

• Angular : Фреймворк для проектирования приложений и платформа разработки для создания одностраничных приложений.
• SurveyJS : Бесплатный конструктор форм на JavaScript с открытым исходным кодом ( ссылка на Github ), который значительно упрощает и облегчает создание форм на собственном хостинге.

Если вы задаетесь вопросом, зачем вам еще одна библиотека JavaScript для создания формы заявления на работу, вместо того чтобы использовать только Angular, вы можете прочитать это руководство . В нем подробно описаны преимущества этой библиотеки и то, как она делает вашу работу быстрее и проще.

Далее рассмотрим основную структуру нашей формы заявления о приеме на работу, включая количество страниц формы и поля на каждой странице.

Структура формы заявления о приеме на работу

Форма заявления о приеме на работу, которую мы создадим в этой статье, состоит из 4 различных страниц:

Страница 1: Личная информация

• Имя
• Адрес
• Страна
• Телефон
• Электронная почта

Страница 2: Образование и обучение (максимум 3 диплома об образовании)

• Диплом (степень)
• Школа
• Год окончания
• Описание

Страница 3: Опыт работы (максимум 3 предыдущих опыта работы)

• Должность
• Компания
• Дата начала
• Дата окончания
• Описание

Страница 4: Резюме и сопроводительное письмо

• Скачайте резюме
• Напишите сопроводительное письмо (почему вы подходите на эту должность)

Наконец, мы начнем пошаговый процесс создания приведенной выше формы заявления о приеме на работу.

Давайте начнем.

Шаги по созданию формы заявления о приеме на работу

Шаг 1: Создание приложения Angular и настройка SurveyJS

Перед началом работы мы должны убедиться, что у нас установлены NPM и последняя версия Angular CLI.

Затем давайте создадим проект Angular с помощью CLI и установим SurveyJS:

ng new job-application-form-app
cd job-application-form-app
npm install survey-angular-ui — save

Эта команда создаст проект со следующей структурой:

После этого мы настроим тему SurveyJS. Согласно официальной документации , SurveyJS поставляется с двумя темами:

• Современный пользовательский интерфейс
• Пользовательский интерфейс по умолчанию V2

Для нашего примера мы будем использовать тему Default V2 UI.

Добавим следующую зависимость в файл angular.json:

{
  “$schema”: “./node_modules/@angular/cli/lib/config/schema.json”,
  “version”: 1,
  “newProjectRoot”: “projects”,
  “projects”: {
    “job-application-form-app”: {
      “projectType”: “application”,
      “schematics”: {},
      “root”: “”,
      “sourceRoot”: “src”,
      “prefix”: “app”,
      “architect”: {
        “build”: {
          “builder”: “@angular-devkit/build-angular:browser”,
          “options”: {
            …
            “styles”: [
              “src/styles.css”,
              // Default V2 theme
              “node_modules/survey-core/defaultV2.min.css”
            ],
            …
          },
          ….
        },
        “serve”: {
        …
        },
        “extract-i18n”: {
        …
        },
        “test”: {
        …
        }
      }
    }
  }
}

Чтобы применить тему пользовательского интерфейса Default V2, мы должны использовать метод applyTheme(themeName) и передать в качестве параметра "defaultV2". Итак, в файле app.component.js вызовем следующий метод:

App.component.js

import { Component } from ‘@angular/core’;
import { StylesManager } from “survey-core”;

StylesManager.applyTheme(“defaultV2”);
@Component({
  selector: ‘app-root’,
  templateUrl: ‘./app.component.html’,
  styleUrls: [‘./app.component.css’]
})
export class AppComponent {
  title = ‘job-application-form-app’;
}

Шаг 2: Создание модели формы заявления о приеме на работу

Модель описывает содержимое нашей формы. Самый простой способ создания модели формы - использовать объект схемы на основе JSON. Эта схема содержит различные разделы и части нашей формы.

Итак, теперь давайте создадим схему нашей модели:

Form.schema.ts

export const schema = {
  title: ‘Application For Software engineer position’,
  showProgressBar: ‘top’,
  progressBarType: ‘buttons’,
  pages: [
    {
      name: ‘personalInformation’,
      navigationTitle: ‘Personal information’,
      navigationDescription: ‘Tell us about you’,
      startWithNewLine: false,
      showQuestionNumbers: ‘off’,
      elements: [
      …
      ],
    },
    {
      name: ‘educationTraining’,
      navigationTitle: ‘Education and training’,
      navigationDescription: ‘Tell us about your education’,
      elements: [
      …
      ],
    },
    {
      name: ‘experience’,
      navigationTitle: ‘Experience’,
      navigationDescription: ‘Tell us more about your experience’,
      elements: [
      …
      ],
    },
    {
      name: ‘resumeCoverLetter’,
      navigationTitle: ‘Resume and cover letter’,
      navigationDescription: ‘Tell us why you are suitable for the position’,
      elements: [
      …
      ],
    },
  ],
};

В приведенном выше коде мы поместили "..." в содержимое каждой страницы в качестве замены фактического кода, который мы заполним в ближайшее время.

Наша схема - это объект JSON, который содержит содержимое нашей формы. Вот краткое объяснение каждого свойства:

• title: Отображение заголовка формы.
• showProgressBar: Размещение индикатора выполнения формы. Оно может быть ["off", "top", "bottom", "both"].
• progressBarType: Тип информации, отображаемой в индикаторе выполнения. Он может быть ["pages", "questions", "requiredQuestions", "correctQuestions", "buttons"].
• pages: Описывает все страницы формы. Здесь у нас есть 4 различные страницы, каждая из которых посвящена определенной части нашей формы заявления о приеме на работу.

В следующих строках мы рассмотрим код для каждой страницы.

• Страница 1: Личная информация

Эта страница содержит 5 простых текстовых полей, как показано ниже:

{
  name: ‘personalInformation’,
  navigationTitle: ‘Personal information’,
  navigationDescription: ‘Tell us about you’,
  startWithNewLine: false,
  showQuestionNumbers: ‘off’,
  elements: [
    {
    type: ‘text’,
    name: ‘fullname’,
    title: ‘Full name’,
    },
    {
    type: ‘text’,
    name: ‘address’,
    title: ‘Address’,
    },
    {
    type: ‘text’,
    name: ‘country’,
    title: ‘Country’,
    },
    {
    type: ‘text’,
    name: ‘phone’,
    title: ‘Telephone number’,
    },
    {
    type: ‘text’,
    name: ‘email’,
    title: ‘Email’,
    },
  ],
},

Сам код довольно прост и не требует пояснений. Далее мы рассмотрим 2-ю страницу, которая немного сложнее.

• Страница 2: Образование и обучение

Эта страница немного сложнее, чем первая. Здесь у нас есть максимум 3 поля и минимум 1 поле для "Образования". И чтобы реализовать это простым и элегантным способом, мы воспользуемся компонентом SurveyJS "paneldynamic". Как это сделать, мы увидим в приведенном ниже коде.

Вот код:

{
        name: ‘educationTraining’,
        navigationTitle: ‘Education and training’,
        navigationDescription: ‘Tell us about your education’,
        elements: [
          {
            type: ‘paneldynamic’,
            name: ‘educations’,
            title: ‘Educations’,
            keyName: ‘diploma’,
            showQuestionNumbers: ‘off’,
            templateTitle: ‘Education #{panelIndex}’,
            minPanelCount: 1,
            maxPanelCount: 3,
            panelAddText: ‘Add another education’,
            panelRemoveText: ‘Remove education’,
            templateElements: [
              {
                type: ‘dropdown’,
                name: ‘diploma’,
                title: ‘Diploma’,
                showNoneItem: true,
                showOtherItem: true,
                choices: [
                ‘High school Degree’,
                ‘Bachelor Degree’,
                ‘Master Degree’,
                ‘Doctoral Degree’,
                ],
              },
              {
              type: ‘text’,
              name: ‘school1’,
              title: ‘School or University’,
              },
              {
              type: ‘text’,
              name: ‘graduationYear’,
              title: ‘Graduation year’,
              inputType: ‘date’,
              },
              {
              type: ‘comment’,
              name: ‘description’,
              title: ‘Description of what you have studied’,
              },
            ],
          },
        ],
},

Перейдем к третьей странице.

• Страница 3: Опыт

Эта страница очень похожа на 2-ю страницу. Фактически, для ее реализации мы снова воспользуемся компонентом "paneldynamic".

Вот как:

{
    name: ‘experience’,
    navigationTitle: ‘Experience’,
    navigationDescription: ‘Tell us more about your experience’,
    elements: [
      {
      type: ‘paneldynamic’,
      name: ‘experiences’,
      title: ‘Experiences’,
      keyName: ‘position’,
      showQuestionNumbers: ‘off’,
      templateTitle: ‘Education #{panelIndex}’,
      minPanelCount: 1,
      maxPanelCount: 3,
      panelAddText: ‘Add another experience’,
      panelRemoveText: ‘Remove experience’,
      templateElements: [
        {
          type: ‘text’,
          name: ‘position’,
          title: ‘Position’,
          isRequired: true,
        },
        {
          type: ‘text’,
          name: ‘company’,
          title: ‘Company’,
          isRequired: true,
        },
        {
          type: ‘text’,
          name: ‘startDate’,
          title: ‘Start date’,
          inputType: ‘date’,
          isRequired: true,
        },
        {
          type: ‘text’,
          name: ‘endDate’,
          title: ‘End date’,
          inputType: ‘date’,
          isRequired: true,
          visibleIf: ‘{panel.untilNow}=false’,
        },
        {
          type: ‘boolean’,
          name: ‘untilNow’,
          title: ‘Until now’,
          isRequired: true,
          defaultValue: false,
        },
        {
          type: ‘comment’,
          name: ‘description’,
          title: ‘Description of what you have worked on’,
        },
      ],
    },
  ],
},

Что интересно в этой части, так это использование условного ветвления. Мы использовали булево выражение "visibleIf", чтобы скрыть или показать поле "дата окончания" в зависимости от поля "до настоящего времени". Это самый простой пример условной логики SurveyJS в действии, но это все, что вам понадобится в большинстве случаев. Подробнее об условной видимости вы можете прочитать здесь .

• Страница 4: Резюме и сопроводительное письмо

Последняя страница нашей формы содержит всего 2 поля: одно для загрузки резюме, а другое - для написания сопроводительного письма.

{
  name: ‘resumeCoverLetter’,
  navigationTitle: ‘Resume and cover letter’,
  navigationDescription: ‘Tell us why you are suitable for the position’,
  elements: [
    {
      type: ‘file’,
      name: ‘resume’,
      title: ‘Please upload your resume’,
      showPreview: true,
      maxSize: 102400,
    },
    {
      type: ‘comment’,
      name: ‘coverLetter’,
      title: ‘why you are suitable for the position ?’,
    },
  ],
},

SurveyJS поставляется со специальным компонентом для работы с файлами - QuestionFileModel . Доступ к загруженным файлам можно получить с помощью триггера 'onUploadFiles' модели формы, см. код ниже:

import { Component, OnInit } from ‘@angular/core’;
import { StylesManager, Model } from ‘survey-core’;
import ‘survey-core/survey.i18n’;
import { schema } from ‘./form.schema’;

StylesManager.applyTheme(‘defaultV2’);
@Component({
  selector: ‘app-root’,
  templateUrl: ‘./app.component.html’,
  styleUrls: [‘./app.component.css’],
})
export class AppComponent implements OnInit {
  title = ‘job-application-form-app’;
  jobApplicationForm!: Model;
  ngOnInit(): void {
    const form = new Model(schema);
    // access to the uploaded files
    form.onUploadFiles.add((form, options) => {
      console.info(‘File uploaded’);
      var formData = new FormData();
      options.files.forEach(function (file: any) {
        formData.append(file.name, file);
      });
    });
    this.jobApplicationForm = form;
  }
}

Шаг 3: Добавьте валидацию формы

Чтобы сделать нашу форму более реалистичной, мы должны добавить валидацию формы, чтобы отметить обязательные вопросы и отобразить ошибки при вводе данных в различные поля нашей формы. Для этого мы будем использовать следующее:

• isRequired: Чтобы отметить каждое обязательное поле.

isRequired: true,

• inputType: Чтобы определить тип ввода нашего поля.

inputType: ‘tel’
// or
inputType: ‘email’
// or
inputType: ‘date’

• Валидаторы с регулярными выражениями (regex). Например, для валидации поля номера телефона мы будем использовать следующее свойство:

validators: [{
  type: “regex”,
    regex: “\\+[0–9]{1} \\([0–9]{3}\\) [0–9]{3}-[0–9]{2}-[0–9]{2}”,
    text: “Phone number must be in the following format: +0 (000) 000–00–00”
}]

• Валидаторы с выражениями, которые выбрасывают ошибку, когда выражение оценивается как false. Например, мы можем обработать ошибку, когда поле 'начальная дата' находится после поля 'конечная дата'.

{
  type: ‘text’,
  name: ‘endDate’,
  title: {
    default: ‘End date’,
    fr: ‘Date de fin’,
  },
  inputType: ‘date’,
  isRequired: true,
  visibleIf: ‘{panel.untilNow}=false’,
  validators: [
    {
      type: ‘expression’,
      expression: ‘{panel.startDate} < {panel.endDate}’,
      text: {
        default: ‘The end date should be after the start date’,
        fr: ‘La date du fin doit être inférieur à la date du début’,
      },
    },
  ],
},

Шаг 4: Добавьте поддержку локализации формы

Библиотека SurveyJS поддерживает i18n "из коробки", при этом стандартные строки пользовательского интерфейса переведены на более чем 50 языков, и имеется простая в использовании структура для включения нескольких переводов строк вопросов без каких-либо внешних зависимостей от библиотеки i18n (см. официальную документацию ).

Это поможет нам добавить поддержку локализации в нашу форму, которая будет доступна, скажем, на французском и английском языках.

Чтобы включить свойство локализации, мы должны импортировать этот модуль в наш файл app.component.ts:

App.component.ts

import { Component, OnInit } from ‘@angular/core’;
import { StylesManager, Model } from ‘survey-core’;
import “survey-core/survey.i18n”;
import { schema } from ‘./form.schema’;
StylesManager.applyTheme(‘defaultV2’);
@Component({
  selector: ‘app-root’,
  templateUrl: ‘./app.component.html’,
  styleUrls: [‘./app.component.css’],
})
export class AppComponent implements OnInit {
  title = ‘job-application-form-app’;
  jobApplicationForm!: Model;
  ngOnInit(): void {
    const form = new Model(schema);
    this.jobApplicationForm = form;
    // To switch the language
    form.locale = ‘fr’;
    // form.locale = “en”
  }
}

Затем мы должны перевести содержимое схемы нашей формы, как показано ниже:

export const schema = {
  title: ‘Application For Software engineer position’,
  showProgressBar: ‘top’,
  progressBarType: ‘buttons’,
  pages: [
    {
      name: ‘personalInformation’,
      navigationTitle: {
        default: ‘Personal information’,
        fr: ‘Informations personnelles’,
      },
      navigationDescription: {
        default: ‘Tell us about you’,
        fr: ‘Parlez nous de vous’,
      },
      startWithNewLine: false,
      showQuestionNumbers: ‘off’,
      elements: [
        {
        type: ‘text’,
        name: ‘fullname’,
        title: {
          default: ‘Full name’,
          fr: ‘Nom et prénom’,
        },
        isRequired: true,
      },
      {
        type: ‘text’,
        name: ‘address’,
        title: {
          default: ‘Address’,
          fr: ‘Adresse’,
        },
        isRequired: true,
      },
      {
        type: ‘text’,
        name: ‘country’,
        title: {
          default: ‘Country’,
          fr: ‘Pays’,
        },
        isRequired: true,
      },
      {
        type: ‘text’,
        name: ‘phone’,
        title: {
          default: ‘Telephone number’,
          fr: ‘Numéro de téléphone’,
        },
        inputType: ‘tel’,
        isRequired: true,
        validators: [
          {
            type: ‘regex’,
            regex: ‘\\+[0–9]{1} \\([0–9]{3}\\) [0–9]{3}-[0–9]{2}-[0–9]{2}’,
            text: ‘Phone number must be in the following format: +0 (000) 000–00–00’,
          },
        ],
      },
      {
        type: ‘text’,
        name: ‘email’,
        title: {
          default: ‘Email’,
          fr: ‘Adresse email’,
        },
        inputType: ‘email’,
        isRequired: true,
      },
    ],
  },
  {
    name: ‘educationTraining’,
    navigationTitle: {
      default: ‘Education and training’,
      fr: ‘Éducation et formation’,
    },
    navigationDescription: {
      default: ‘Tell us about your education’,
      fr: ‘Parlez-nous de votre formation’,
    },
    elements: [
      {
        type: ‘paneldynamic’,
        name: ‘educations’,
        title: {
          default: ‘Educations’,
          fr: ‘Formations’,
        },
        keyName: ‘diploma’,
        showQuestionNumbers: ‘off’,
        templateTitle: {
          default: ‘Education #{panelIndex}’,
          fr: ‘Formation #{panelIndex}’,
        },
        minPanelCount: 1,
        maxPanelCount: 3,
        panelAddText: {
          default: ‘Add another education’,
          fr: ‘Ajouter une autre formation’,
        },
        panelRemoveText: {
          default: ‘Remove education’,
          fr: ‘Supprimer la formation’,
        },
        templateElements: [
          {
            type: ‘dropdown’,
            name: ‘diploma’,
            title: {
              default: ‘Diploma’,
              fr: ‘Diplôme’,
            },
            isRequired: true,
            showNoneItem: true,
            showOtherItem: true,
            choices: [
            {
              value: ‘bac’,
              text: {
                default: ‘High school Degree’,
                fr: ‘Baccalauréat’,
            },
            },
            {
              value: ‘bachelor’,
              text: {
                default: ‘Bachelor Degree’,
                fr: ‘License’,
              },
            },
            {
              value: ‘master’,
              text: {
                default: ‘Master Degree’,
                fr: ‘Master’,
              },
            },
            {
              value: ‘doctorate’,
              text: {
                default: ‘Doctoral Degree’,
                fr: ‘Doctorat’,
              },
            },
          ],
        },
        {
          type: ‘text’,
          name: ‘school’,
          title: {
            default: ‘School or University’,
            fr: ‘Ecole ou université’,
          },
          isRequired: true,
        },
        {
          type: ‘text’,
          name: ‘graduationYear’,
          title: {
            default: ‘Graduation year’,
            fr: “Année d’obtention du diplôme”,
          },
          inputType: ‘date’,
          isRequired: true,
        },
        {
          type: ‘comment’,
          name: ‘description’,
          title: {
            default: ‘Description of what you have studied’,
            fr: ‘Description de ce que vous avez étudié’,
          },
        },
      ],
    },
  ],
},
{
  name: ‘experience’,
  navigationTitle: {
    default: ‘Experience’,
    fr: ‘Experience’,
  },
  navigationDescription: {
    default: ‘Tell us more about your experience’,
    fr: ‘Dites-nous en plus sur votre expérience’,
  },
  elements: [
    {
      type: ‘paneldynamic’,
      name: ‘experiences’,
      title: {
        default: ‘Experiences’,
        fr: ‘Expériences’,
      },
      keyName: ‘position’,
      showQuestionNumbers: ‘off’,
      templateTitle: {
        default: ‘Experience #{panelIndex}’,
        fr: ‘Expérience #{panelIndex}’,
      },
      minPanelCount: 1,
      maxPanelCount: 3,
      panelAddText: {
        default: ‘Add another experience’,
        fr: ‘Ajouter une autre expérience’,
      },
      panelRemoveText: {
        default: ‘Remove experience’,
        fr: “Supprimer l’expérience”,
      },
      templateElements: [
        {
          type: ‘text’,
          name: ‘position’,
          title: {
            default: ‘Position’,
            fr: ‘Poste’,
          },
          isRequired: true,
        },
        {
          type: ‘text’,
          name: ‘company’,
          title: {
            default: ‘Company’,
            fr: ‘Entreprise’,
          },
          isRequired: true,
        },
        {
          type: ‘text’,
          name: ‘startDate’,
          title: {
            default: ‘Start date’,
            fr: ‘Date de début’,
          },
          inputType: ‘date’,
          isRequired: true,
        },
        {
          type: ‘text’,
          name: ‘endDate’,
          title: {
            default: ‘End date’,
            fr: ‘Date de fin’,
          },
          inputType: ‘date’,
          isRequired: true,
          visibleIf: ‘{panel.untilNow}=false’,
        },
        {
          type: ‘boolean’,
          name: ‘untilNow’,
          title: {
            default: ‘Until now’,
            fr: “Jusqu’à maintenant”,
          },
          isRequired: true,
          defaultValue: false,
        },
        {
          type: ‘comment’,
          name: ‘description’,
          title: {
            default: ‘Description of what you have worked on’,
            fr: ‘Description de ce sur quoi vous avez travaillé’,
          },
        },
      ],
    },
  ],
},
{
  name: ‘resumeCoverLetter’,
  navigationTitle: {
    default: ‘Resume and cover letter’,
    fr: ‘CV et lettre de motivation’,
  },
  navigationDescription: {
    default: ‘Tell us why you are suitable for the position’,
    fr: ‘Dites-nous pourquoi vous correspondez au poste’,
  },
  elements: [
    {
      type: ‘file’,
      name: ‘resume’,
      title: {
        default: ‘Please upload your resume’,
        fr: ‘Veuillez télécharger votre CV’,
      },
      showPreview: true,
      maxSize: 102400,
      isRequired: true,
    },
    {
      type: ‘comment’,
      name: ‘coverLetter’,
      title: {
        default: ‘why you are suitable for the position ?’,
        fr: ‘pourquoi vous convenez pour le poste ?’,
      },
      isRequired: true,
    },
  ],
},
],
};

Шаг 5: Протестируйте и запустите приложение

Теперь давайте сделаем еще несколько изменений, чтобы увидеть конечный результат нашей формы заявления о приеме на работу.

Во-первых, мы добавим модуль SurveyJS в файл app.module.ts:

import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { SurveyModule } from ‘survey-angular-ui’;
import { AppComponent } from ‘./app.component’;

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SurveyModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Во-вторых, импортируем нашу схему и создадим модель формы в файле app.component.ts:

import { Component, OnInit } from ‘@angular/core’;
import { StylesManager, Model } from ‘survey-core’;
import { schema } from ‘./form.schema’;
StylesManager.applyTheme(‘defaultV2’);
@Component({
  selector: ‘app-root’,
  templateUrl: ‘./app.component.html’,
  styleUrls: [‘./app.component.css’],
})
export class AppComponent implements OnInit {
  title = ‘job-application-form-app’;
  jobApplicationForm!: Model;
  ngOnInit(): void {
    const form = new Model(schema);
    this.jobApplicationForm = form;
  }
}

В-третьих, обновим содержимое файла app.component.html:

<div class=”toolbar” role=”banner”>
<survey [model]=”jobApplicationForm”></survey>
</div>

Наконец, мы готовы к компиляции и обслуживанию нашего приложения. Запустите следующее:

$ npm run start

Теперь давайте откроем наш браузер, чтобы увидеть конечный результат нашей формы заявления о приеме на работу.

Вывод:

Форма заявления о приеме на работу (Страница 1):

Форма заявления о приеме на работу (Страница 2):

Форма заявления о приеме на работу (Страница 3):

Форма заявления о приеме на работу (Страница 4):

Заключение

На этом мы подошли к концу данного руководства. На этом примере мы увидели, как можно использовать SurveyJS Form Library для легкого создания многостраничных форм. Вы также можете создавать более сложные формы (например, опрос об удовлетворенности сотрудников ) с помощью этой бесплатной библиотеки с открытым исходным кодом.

Полный код этого проекта можно найти здесь:

GitHub - EmployeeSatisfactionSurvey/job-app-app-app .

Более того, если вы хотите выйти за рамки бесплатной библиотеки с открытым исходным кодом, вы можете заглянуть в раздел цены , чтобы узнать больше об их платных планах.

Первоначально написано SIHEM BOUHENNICHE .