---
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: jQuery
source: https://surveyjs.io/survey-creator/examples/add-contact-information-to-form-template/jquery
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Contact Information Template (jQuery)

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
<!-- 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: "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 SurveyCreator();
creator.toolbox.defineCategories([{
    category: "Custom Items",
    items: [
        "contactinformation"
    ]
}], true);

creator.JSON = {
  elements: [{
    type: "contactinformation",
    name: "question1"
  }]
};
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/add-contact-information-to-form-template/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/add-contact-information-to-form-template/reactjs.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/add-contact-information-to-form-template/vue3js.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/add-contact-information-to-form-template/vanillajs.md)