---
title: Shipping Details Template
product: Survey Creator
description: Choose from a collection of free ready-made templates of most common web form sections, e.g., shipping details or an order form grid. The elements ship with predefined properties for easy and fast integration into your JavaScript app.
framework: Vanilla JS
source: https://surveyjs.io/survey-creator/examples/add-shipping-details-to-form-template/vanillajs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Shipping Details Template (Vanilla JS)

The Shipping Details question includes input fields for both business and shipping addresses. If the two addresses are identical, users can enable a switch to automatically copy the business address into the shipping address field. To include the Shipping Details template in your question collection, create a composite question type.

[Create a Composite Question Type](https://surveyjs.io/form-library/documentation/customize-question-types/create-composite-question-types (linkStyle))

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

```js
import { SurveyCreator } from "survey-creator-js";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import { ComponentCollection, Serializer } from "survey-core";
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

ComponentCollection.Instance.add({
    name: "shippingaddress",
    title: "Shipping Address",
    defaultQuestionTitle: "Shipping Address",
    elementsJSON: [{
        type: "comment",
        name: "businessAddress",
        title: "Business Address",
        isRequired: true
    }, {
        type: "boolean",
        name: "shippingSameAsBusiness",
        title: "Shipping address same as business address",
        defaultValue: true
    }, {
        type: "comment",
        name: "shippingAddress",
        title: "Shipping Address",
        // Use the `composite` prefix to access a question nested in the composite question
        enableIf: "{composite.shippingSameAsBusiness} <> true",
        isRequired: true
    }],
    onInit() {
        // Hide title-related settings from the Property Grid
        Serializer.addProperty("shippingaddress", {
            name: "titleLocation",
            visible: false,
            default: "hidden",
        });
        Serializer.addProperty("shippingaddress", {
            name: "title",
            visible: false,
        });
        Serializer.addProperty("shippingaddress", {
            name: "description",
            visible: false,
        });
    },
    onValueChanged (question, propertyName) {
        const businessAddress = question.contentPanel.getQuestionByName("businessAddress");
        const shippingAddress = question.contentPanel.getQuestionByName("shippingAddress");
        const shippingSameAsBusiness = question.contentPanel.getQuestionByName("shippingSameAsBusiness");

        if (propertyName === "businessAddress") {
            // If "Shipping address same as business address" is selected
            if (shippingSameAsBusiness.value == true) {
                // Copy the Business Address value to Shipping Address
                shippingAddress.value = businessAddress.value;
            }
        }
        if (propertyName === "shippingSameAsBusiness") {
            // If "Shipping address same as business address" is selected, copy the Business Address to Shipping Address
            // Otherwise, clear the Shipping Address value
            shippingAddress.value = shippingSameAsBusiness.value == true ? businessAddress.value : "";
        }
    },
});
const creator = new SurveyCreator();

creator.toolbox.defineCategories([{
    category: "Custom Items",
    items: [
        "shippingaddress"
    ]
}], true);

creator.JSON = {
  elements: [{
      type: "shippingaddress",
      name: "question1"
  }]
};
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/add-shipping-details-to-form-template/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/add-shipping-details-to-form-template/reactjs.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/add-shipping-details-to-form-template/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/add-shipping-details-to-form-template/jquery.md)