From ac3b503014c79c0bb0196dd55cd23d86440a4c0f Mon Sep 17 00:00:00 2001 From: Elena Gorbatkova <102306951+ElenaGorbatkova@users.noreply.github.com> Date: Wed, 21 Feb 2024 19:05:58 +0400 Subject: [PATCH] Seo updates (#7895) * Update overview.md * Update get-started-react.md * Update get-started-angular.md * Update get-started-react.md * Update get-started-jquery.md * Update get-started-vue.md * Update get-started-knockout.md * Make updates --------- Co-authored-by: RomanTsukanov --- docs/get-started-angular.md | 28 ++++++++------ docs/get-started-jquery.md | 2 +- docs/get-started-knockout.md | 4 +- docs/get-started-react.md | 36 ++++++++++-------- docs/get-started-vue.md | 46 ++++++++++++++--------- docs/overview.md | 71 +++++++++++++++++++++++++----------- 6 files changed, 120 insertions(+), 67 deletions(-) diff --git a/docs/get-started-angular.md b/docs/get-started-angular.md index 77a5a046de..c53149011b 100644 --- a/docs/get-started-angular.md +++ b/docs/get-started-angular.md @@ -1,22 +1,24 @@ --- title: Angular Form Library | Getting Started Guide -description: A step-by-step tutorial on how to add the SurveyJS Form Library to an Angular application. +description: SurveyJS Form Library for Angular is an open-source UI component that renders forms built from JSON schema in Angular applications. It offers a rich collection of reusable input fields and other form components and simplifies form handling by managing form state, validation, and submission. --- -# Add a Survey to an Angular Application +# Angular Form Library -This step-by-step tutorial will help you get started with the SurveyJS Form Library in an Angular application. To add a survey to your Angular application, follow the steps below: +SurveyJS Form Library for Angular is a client-side component that uses JSON objects to render dynamic forms in Angular applications and send submission data to a database for storage. These JSON objects contain key-value pairs representing various aspects of a form, including descriptions of each form field, instructions on how to organize form fields on the page, and how the form should behave in response to user interactions, such as submitting data, validating input, and displaying error messages. By loading the JSON schemas that define form layout and content, the rendering Form Library dynamically generates the corresponding HTML elements and displays them on a web page. + +This step-by-step tutorial will help you get started with the SurveyJS Form Library in an Angular application. To add a form to your Angular application, follow the steps below: - [Install the `survey-angular-ui` npm Package](#install-the-survey-angular-ui-npm-package) - [Configure Styles](#configure-styles) - [Create a Model](#create-a-model) -- [Render the Survey](#render-the-survey) -- [Handle Survey Completion](#handle-survey-completion) +- [Render the Form](#render-the-form) +- [Handle Form Completion](#handle-form-completion) -As a result, you will create a survey displayed below: +As a result, you will create a form displayed below: @@ -81,7 +83,7 @@ This style sheet applies the Default theme. If you want to apply a different pre ## Create a Model -A model describes the layout and contents of your survey. The simplest survey model contains one or several questions without layout modifications. +A model describes the layout and contents of your survey. The simplest form model contains one or several questions without layout modifications. Models are specified by model schemas (JSON objects). For example, the following model schema declares two [textual questions](https://surveyjs.io/Documentation/Library?id=questiontextmodel), each with a [title](https://surveyjs.io/Documentation/Library?id=questiontextmodel#title) and a [name](https://surveyjs.io/Documentation/Library?id=questiontextmodel#name). Titles are displayed on screen. Names are used to identify the questions in code. @@ -152,7 +154,9 @@ export class AppComponent implements OnInit { ``` -## Render the Survey + + +## Render the Form Before you render the survey, you need to import the module that integrates the SurveyJS Form Library with Angular. Open your NgModule class (usually resides in the `app.module.ts` file), import the `SurveyModule` from `survey-angular-ui`, and list it in the `imports` array. @@ -247,7 +251,9 @@ export class AppModule { } ``` -## Handle Survey Completion + + +## Handle Form Completion After a respondent completes a survey, the results are available within the [onComplete](https://surveyjs.io/Documentation/Library?id=surveymodel#onComplete) event handler. In real-world applications, you should send the results to a server where they will be stored in a database and processed: @@ -319,7 +325,7 @@ export class AppComponent implements OnInit { ``` ![Get Started with SurveyJS - Survey Results](images/get-started-primitive-survey-alert.png) -As you can see, survey results are saved in a JSON object. Its properties correspond to the `name` property values of your questions in the model schema. +As you can see, form results are saved in a JSON object. Its properties correspond to the `name` property values of your questions in the model schema. To view the application, run `ng serve` in a command line and open [http://localhost:4200/](http://localhost:4200/) in your browser. diff --git a/docs/get-started-jquery.md b/docs/get-started-jquery.md index 164490acc3..53d790d84c 100644 --- a/docs/get-started-jquery.md +++ b/docs/get-started-jquery.md @@ -2,7 +2,7 @@ title: jQuery Form Library | Getting Started Guide description: A step-by-step tutorial on how to add SurveyJS Form Library to a jQuery application. --- -# Add a Survey to a jQuery Application +# jQuery Form Library This step-by-step tutorial will help you get started with SurveyJS Form Library in a jQuery application. To add a survey to your jQuery application, follow the steps below: diff --git a/docs/get-started-knockout.md b/docs/get-started-knockout.md index 9f0bdd0394..a80a7c4451 100644 --- a/docs/get-started-knockout.md +++ b/docs/get-started-knockout.md @@ -2,7 +2,7 @@ title: Knockout Form Library | Getting Started Guide description: A step-by-step tutorial on how to add the SurveyJS Form Library to a Knockout application. --- -# Add a Survey to a Knockout Application +# Knockout Form Library This step-by-step tutorial will help you get started with the SurveyJS Form Library in a Knockout application. To add a survey to your Knockout application, follow the steps below: @@ -309,4 +309,4 @@ document.addEventListener("DOMContentLoaded", function() { - [Create a Simple Survey](https://surveyjs.io/Documentation/Library?id=design-survey-create-a-simple-survey) - [Create a Multi-Page Survey](https://surveyjs.io/Documentation/Library?id=design-survey-create-a-multi-page-survey) -- [Create a Quiz](https://surveyjs.io/Documentation/Library?id=design-survey-create-a-quiz) \ No newline at end of file +- [Create a Quiz](https://surveyjs.io/Documentation/Library?id=design-survey-create-a-quiz) diff --git a/docs/get-started-react.md b/docs/get-started-react.md index 866e1df742..72f976cf10 100644 --- a/docs/get-started-react.md +++ b/docs/get-started-react.md @@ -1,22 +1,24 @@ --- title: React Form Library | Getting Started Guide -description: A step-by-step tutorial on how to add the SurveyJS Form Library to a React application. +description: SurveyJS Form Library for React is an open-source UI component that renders forms built from JSON schema in React applications. It offers a rich collection of reusable input fields and other form components and simplifies form handling by managing form state, validation, and submission. --- -# Add a Survey to a React Application +# React Form Library -This step-by-step tutorial will help you get started with the SurveyJS Form Library in a React application. To add a survey to your React application, follow the steps below: +SurveyJS Form Library for React is a client-side component that uses JSON objects to render dynamic forms in React applications and send submission data to a database for storage. These JSON objects contain key-value pairs representing various aspects of a form, including descriptions of each form field, instructions on how to organize form fields on the page, and how the form should behave in response to user interactions, such as submitting data, validating input, and displaying error messages. By loading the JSON schemas that define form layout and content, the rendering Form Library dynamically generates the corresponding HTML elements and displays them on a web page. + +This step-by-step tutorial will help you get started with the SurveyJS Form Library in a React application. To add a form to your React application, follow the steps below: - [Install the `survey-react-ui` npm Package](#install-the-survey-react-npm-package) - [Configure Styles](#configure-styles) - [Create a Model](#create-a-model) -- [Render the Survey](#render-the-survey) -- [Handle Survey Completion](#handle-survey-completion) +- [Render the Form](#render-the-form) +- [Handle Form Completion](#handle-form-completion) -As a result, you will create a survey displayed below: +As a result, you will create a form displayed below: @@ -36,7 +38,7 @@ SurveyJS Form Library is shipped with several predefined themes illustrated belo ![Themes in SurveyJS Form Library](images/survey-library-themes.png) -To add SurveyJS themes to your application, open the React component that will render your survey and import the Form Library style sheet: +To add SurveyJS themes to your application, open the React component that will render your form or survey and import the Form Library style sheet: ```js import 'survey-core/defaultV2.min.css'; @@ -48,7 +50,7 @@ This style sheet applies the Default theme. If you want to apply a different pre ## Create a Model -A model describes the layout and contents of your survey. The simplest survey model contains one or several questions without layout modifications. +A model describes the layout and contents of your survey. The simplest form model contains one or several questions without layout modifications. Models are specified by model schemas (JSON objects). For example, the following model schema declares two [textual questions](https://surveyjs.io/Documentation/Library?id=questiontextmodel), each with a [title](https://surveyjs.io/Documentation/Library?id=questiontextmodel#title) and a [name](https://surveyjs.io/Documentation/Library?id=questiontextmodel#name). Titles are displayed on screen. Names are used to identify the questions in code. @@ -107,9 +109,11 @@ export default App; ``` -## Render the Survey + + +## Render the Form -To render a survey, import the `Survey` component, add it to the template, and pass the model instance you created in the previous step to the component's `model` attribute: +To render a form, import the `Survey` component, add it to the template, and pass the model instance you created in the previous step to the component's `model` attribute: ```js import { Survey } from 'survey-react-ui'; @@ -123,7 +127,7 @@ function App() { } ``` -If you replicate the code correctly, you should see the following survey: +If you replicate the code correctly, you should see the following form: ![Get Started with SurveyJS - Primitive Survey](images/get-started-primitive-survey.png) @@ -157,9 +161,11 @@ export default App; ``` -## Handle Survey Completion + + +## Handle Form Completion -After a respondent completes a survey, the results are available within the [onComplete](https://surveyjs.io/Documentation/Library?id=surveymodel#onComplete) event handler. In real-world applications, you should send the results to a server where they will be stored in a database and processed: +After a respondent submits a form, the results are available within the [onComplete](https://surveyjs.io/Documentation/Library?id=surveymodel#onComplete) event handler. In real-world applications, you should send the results to a server where they will be stored in a database and processed: ```js import { useCallback } from 'react'; @@ -221,7 +227,7 @@ function App() { ![Get Started with SurveyJS - Survey Results](images/get-started-primitive-survey-alert.png) -As you can see, survey results are saved in a JSON object. Its properties correspond to the `name` property values of your questions in the model schema. +As you can see, form results are saved in a JSON object. Its properties correspond to the `name` property values of your questions in the model schema. To view the application, run `npm run start` in a command line and open [http://localhost:3000/](http://localhost:3000/) in your browser. diff --git a/docs/get-started-vue.md b/docs/get-started-vue.md index 6d6f27a7c3..5390d3d3aa 100644 --- a/docs/get-started-vue.md +++ b/docs/get-started-vue.md @@ -1,21 +1,25 @@ --- title: Vue.js Form Library | Getting Started Guide -description: A step-by-step tutorial on how to add the SurveyJS Form Library to a Vue.js application. +description: SurveyJS Form Library for Vue.js is an open-source UI component that renders forms built from JSON schema in Vue.js applications. It offers a rich collection of reusable input fields and other form components and simplifies form handling by managing form state, validation, and submission. --- -# Add a Survey to a Vue.js Application +# Vue.js Form Library -This step-by-step tutorial will help you get started with the SurveyJS Form Library in a Vue 2 or Vue 3 application. As a result, you will create a survey displayed below: +SurveyJS Form Library for Vue.js is a client-side component that uses JSON objects to render dynamic forms in Vue 2 and Vue 3 applications and send submission data to a database for storage. These JSON objects contain key-value pairs representing various aspects of a form, including descriptions of each form field, instructions on how to organize form fields on the page, and how the form should behave in response to user interactions, such as submitting data, validating input, and displaying error messages. By loading the JSON schemas that define form layout and content, the Form Library dynamically generates the corresponding HTML elements and renders them using native Vue rendering mechanism. + +This step-by-step tutorial will help you get started with the SurveyJS Form Library in a Vue 2 or Vue 3 application. As a result, you will create a form displayed below: [View Full Code for Vue 3](https://github.com/surveyjs/code-examples/tree/main/get-started-library/vue3 (linkStyle)) [View Full Code for Vue 2](https://github.com/surveyjs/code-examples/tree/main/get-started-library/vue (linkStyle)) -## Add a Survey to a Vue 3 Application + + +## Add a Form to a Vue 3 Application ### Install the `survey-vue3-ui` npm Package @@ -31,7 +35,7 @@ SurveyJS Form Library is shipped with several predefined themes illustrated belo ![Themes in SurveyJS Form Library](images/survey-library-themes.png) -To add SurveyJS themes to your application, open the Vue component that will render your survey and import the Form Library style sheet: +To add SurveyJS themes to your application, open the Vue component that will render your form and import the Form Library style sheet: ```html