---
title: Contact Information Template
product: Survey Creator
description: Simplify form building in your JavaScript app with our built-in form components. Add a Contact Information Component to the toolbox of your self-hosted form builder and enable end users to incorporate an editable ready-to-use template with essential contact fields, including full name and phone number, into any form they make.
framework: Vue 3
source: https://surveyjs.io/survey-creator/examples/add-contact-information-to-form-template/vue3js
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Contact Information Template (Vue 3)

The Contact Information template contains a group of input fields that ask respondents for their first and last name, phone number, email address, and other contact information. Survey authors can add this question to their survey by dragging it from the Toolbox or clicking the Add Question button on the design surface. To implement the Contact Information survey element in your application, create a composite question type.

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

## Files

### `public/index.html`

```html
<div id="app" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;"></div>
```

### `src/App.vue`

```html
<template>
    <SurveyCreatorComponent :model="creator" />
</template>
<script setup lang="ts">
    import { SurveyCreatorModel } from "survey-creator-core";
    import { SurveyCreatorComponent } from "survey-creator-vue";
    import { ComponentCollection, Serializer } from "survey-core";
    import "survey-core/survey.i18n";
    import "survey-creator-core/survey-creator-core.i18n";
    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: "contactinformation",
        title: "Contact Information",
        defaultQuestionTitle: "Contact Information",
        elementsJSON: [{
            "type": "text",
            "name": "firstName",
            "title": "First name",
            "placeholder": "Olivia"
        }, {
            "type": "text",
            "name": "lastName",
            "title": "Last name",
            "placeholder": "Johnson"
        }, {
            "type": "text",
            "name": "phone",
            "title": "Phone number",
            "inputType": "tel",
            "placeholder": "+1 (555) 555-1234"
        }, {
            "type": "text",
            "name": "email",
            "title": "Email",
            "inputType": "email",
            "placeholder": "name@example.com"
        }, {
            "type": "text",
            "name": "company",
            "title": "Company",
            "placeholder": "ABC Corporation"
        }],
        onLoaded (question) {
            question.panelWrapper.questionTitleLocation = "left";
            question.panelWrapper.questionTitleWidth = 120;
        }
    });
    const creator = new SurveyCreatorModel();
    creator.toolbox.defineCategories([{
        category: "Custom Items",
        items: [
            "contactinformation"
        ]
    }], true);
    
    creator.JSON = {
      elements: [{
        type: "contactinformation",
        name: "question1"
      }]
    };
</script>
```

### `src/index.css`

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

### `src/main.ts`

```ts
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");
```

### `src/shims-vue.d.ts`

```ts
/* eslint-disable */
declare module "*.vue" {
    import type { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}
```

### `.eslintrc.js`

```js
module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint"
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
    },
    overrides: [
        {
            files: [
                "**/__tests__/*.{j,t}s?(x)",
                "**/tests/unit/**/*.spec.{j,t}s?(x)"
            ],
            env: {
                jest: true
            }
        }
    ]
};
```

### `babel.config.js`

```js
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"]
};
```

### `package.json`

```json
{
  "name": "surveyjs-library-vue3",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "tslib": "2.6.1",
    "vue": "^3.4.1",
    "survey-core": "latest",
    "survey-vue3-ui": "latest",
    "survey-creator-core": "latest",
    "survey-creator-vue": "latest",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3"
  }
}
```

### `tsconfig.json`

```json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/add-contact-information-to-form-template/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/add-contact-information-to-form-template/reactjs.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/add-contact-information-to-form-template/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/add-contact-information-to-form-template/vanillajs.md)