---
title: Page-by-Page Form Editing
product: Survey Creator
description: With SurveyJS you can modify a question, a page of a form, or an entire form. View a free JavaScript demo that shows how to enable page-by-page editing mode and make changes to each form page separately.
framework: jQuery
source: https://surveyjs.io/survey-creator/examples/page-level-editing/jquery
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Page-by-Page Form Editing (jQuery)

With Survey Creator, users can build surveys that contain thousands of questions spread across hundreds of pages. To make navigation within lengthy surveys easier, you can enable page-by-page edit mode. In this mode, the design surface displays only one survey page at a time, allowing survey authors to focus on the page they configure at the moment. Users can quickly jump from one survey page to another using the page navigator instead of scrolling through the entire survey. To enable page-by-page edit mode, set the [`pageEditMode`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#pageEditMode) property to `"bypage"`.

## Files

### `public/index.html`

```html
<!-- Uncomment the following lines to enable Ace Editor in the JSON Editor tab -->
<!-- 
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ext-searchbox.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/theme-clouds_midnight.js"></script>
-->

<div id="surveyCreatorContainer" style="position: absolute; height: 100%; width: 100%"></div>
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/nps_survey.js`

```js
export const NpsSurvey = {
  "completedHtmlOnCondition": [
   {
    "expression": "{nps-score} <= 6 or {rebuy} = false",
    "html": "Thanks for your feedback! We highly value all ideas and suggestions from our customers, whether they're positive or critical. In the future, our team might reach out to you to learn more about how we can further improve our product so that it exceeds your expectations."
   },
   {
    "expression": "{nps-score} = 6 or {nps-score} = 7",
    "html": "Thanks for your feedback. Our goal is to create the best possible product, and your thoughts, ideas, and suggestions play a major role in helping us identify opportunities to improve."
   },
   {
    "expression": "{nps-score} >= 8",
    "html": "Thanks for your feedback. It's great to hear that you're a fan of our product. Your feedback helps us discover new opportunities to improve it and make sure you have the best possible experience."
   }
  ],
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "rating",
          "name": "nps-score",
          "title": "On a scale from 0 to 10, how likely are you to recommend us to a friend or colleague?",
          "rateMin": 0,
          "rateMax": 10,
          "minRateDescription": "Very unlikely",
          "maxRateDescription": "Very likely",
          "rateDescriptionLocation": "bottom"
        },
        {
          "type": "comment",
          "name": "disappointing-experience",
          "visibleIf": "{nps-score} <= 5",
          "title": "How did we disappoint you and what can we do to make things right?",
          "maxLength": 300
        },
        {
          "type": "comment",
          "name": "improvements-required",
          "visibleIf": "{nps-score} >= 6",
          "title": "What can we do to make your experience more satisfying?",
          "maxLength": 300
        },
        {
          "type": "checkbox",
          "name": "promoter-features",
          "visibleIf": "{nps-score} >= 9",
          "title": "Which of the following features do you value the most?",
          "description": "Please select no more than three features.",
          "isRequired": true,
          "choices": [
            { "value": "performance", "text": "Performance" },
            { "value": "stability", "text": "Stability" },
            { "value": "ui", "text": "User interface" },
            { "value": "complete-functionality", "text": "Complete functionality" },
            { "value": "learning-materials", "text": "Learning materials (documentation, demos, code examples)" },
            { "value": "support", "text": "Quality support" }
          ],
          "showOtherItem": true,
          "otherPlaceholder": "Please specify...",
          "otherText": "Other features",
          "colCount": 2,
          "maxSelectedChoices": 3
        }
      ]
    },
    {
      "name": "page2",
      "elements": [
        {
          "type": "boolean",
          "name": "rebuy",
          "title": "Would you buy our product again?"
        },
      ]
    },
    {
      "name": "page3",
      "elements": [
        {
          "type": "radiogroup",
          "name": "testimonial",
          "title": "Would you mind providing us a brief testimonial for the website?",
          "choices": [
            { "value": "yes", "text": "Sure!" },
            { "value": "no", "text": "No" }
          ]
        },
        {
          "type": "text",
          "name": "email",
          "visibleIf": "{testimonial} = 'yes'",
          "title": "What is your email address?",
          "validators": [{
            "type": "email"
          }],
          "placeholder": "Enter your email here"
        }
      ]
    }
  ],
  "showPrevButton": false,
  "widthMode": "static",
  "width": "1000px"
};
```

### `src/index.js`

```js
import { SurveyCreator } from "survey-creator-js";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import { NpsSurvey } from "./nps_survey";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";
import "./index.css";

import SurveyTheme from "survey-core/themes";
import { registerCreatorTheme } from "survey-creator-core";

registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes

const creator = new SurveyCreator({ pageEditMode: "bypage" });
creator.JSON = NpsSurvey;
creator.render("surveyCreatorContainer");
```

### `package.json`

```json
{
  "dependencies": {
    "jquery": "latest",
    "survey-core": "latest",
    "survey-js-ui": "latest",
    "survey-creator-core": "latest",
    "survey-creator-js": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/page-level-editing/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/page-level-editing/reactjs.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/page-level-editing/vue3js.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/page-level-editing/vanillajs.md)