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

# Contact Information Template (React)

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/SurveyCreatorComponent.jsx`

```js
import React from "react";
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
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;
    }
});
function SurveyCreatorRenderComponent() {
    const creator = new SurveyCreator();
    creator.toolbox.defineCategories([{
        category: "Custom Items",
        items: [
            "contactinformation"
        ]
    }], true);
    
    creator.JSON = {
      elements: [{
        type: "contactinformation",
        name: "question1"
      }]
    };
    return (<SurveyCreatorComponent creator={creator} />);
}

export default SurveyCreatorRenderComponent;
```

### `src/index.css`

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

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyCreatorRenderComponent from "./SurveyCreatorComponent";

const root = createRoot(document.getElementById("surveyCreatorContainer"));
root.render(<SurveyCreatorRenderComponent />);
```

### `package.json`

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

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/add-contact-information-to-form-template/angular.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/add-contact-information-to-form-template/vue3js.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)