---
title: Order Cancellation Form
product: Survey Creator
description: Create a custom order cancellation form in minutes. Use this free template for JavaScript as a starting point, easily remove or add form fields in a no-code UI, apply your brand identity to make it look great.
framework: Vanilla JS
source: https://surveyjs.io/survey-creator/examples/order-cancellation-form-template/vanillajs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Order Cancellation Form (Vanilla JS)

## 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/survey_json.js`

```js
export const surveyJSON = {
    "title": "Cancellation Survey",
    "description": "Thank you for using our service. We would highly appreciate if you would take the time to fill our cancellation survey. This would help us improve the service.",
    "logo": "https://surveyjs.io/Content/Images/examples/logo.png",
    "logoHeight": "60px",
    "headerView": "advanced",
    "pages": [
        {
            "name": "page1",
            "elements": [
                {
                    "type": "radiogroup",
                    "name": "using_duration",
                    "title": "How long have you been using the service?",
                    "choices": [
                        "Less than a month",
                        "1-6 months",
                        "7-12 months",
                        "1-3 years",
                        "Over 3 years"
                    ]
                },
                {
                    "type": "radiogroup",
                    "name": "using_frequency",
                    "title": "How often did you use the service?",
                    "choices": [
                        "Once a week",
                        "2 or 3 times a month",
                        "Once a month",
                        "Less than once a month"
                    ]
                },
                {
                    "type": "radiogroup",
                    "name": "cancel_reason",
                    "title": "What was the main reason for cancelling the service?",
                    "choices": [
                        "No longer need it",
                        "It didn't meet my needs",
                        "Found a better alternative",
                        "Found a cheaper alternative",
                        "Quality was less than expected",
                        "Ease of use was less than expected",
                        "Access to the service was less than expected",
                        "Customer service was less than expected"
                    ],
                    "showOtherItem": true
                },
                {
                    "type": "radiogroup",
                    "name": "satisfaction",
                    "title": "Overall, how satisfied were you with the service?",
                    "choices": [
                        "Very Satisfied",
                        "Satisfied",
                        "Neutral",
                        "Unsatisfied",
                        "Very Unsatisfied"
                    ]
                },
                {
                    "type": "matrix",
                    "name": "future_using",
                    "titleLocation": "hidden",
                    "columns": [
                        "Definitely",
                        "Probably",
                        "Not Sure",
                        "Probably Not",
                        "Definitely Not"
                    ],
                    "rows": [
                        {
                            "value": "use_in_future",
                            "text": "Will you use our service in the future?"
                        },
                        {
                            "value": "recommend",
                            "text": "Will you recommend our service to others?"
                        }
                    ]
                },
                {
                    "type": "comment",
                    "name": "service_improvements",
                    "title": "How can we improve our service?",
                    "maxLength": 500
                }
            ]
        }
    ]
};
```

### `src/index.js`

```js
import { SurveyCreator } from "survey-creator-js";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import { surveyJSON } from "./survey_json";
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();

creator.JSON = surveyJSON;
creator.render("surveyCreatorContainer");
```

### `package.json`

```json
{
  "dependencies": {
    "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/order-cancellation-form-template/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/order-cancellation-form-template/reactjs.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/order-cancellation-form-template/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/order-cancellation-form-template/jquery.md)