---
title: Issue Report
product: Form Library
description: Embed this issue report into your application to collect bugs and suggestions from users. The template highlights SurveyJS Creator's diverse form appearance settings and offers a free code example for JavaScript. Use it as-is or customize fonts, the background image, add custom placeholder text, and a form subtitle to provide more descriptive and detailed instructions for survey takers.
framework: React
source: https://surveyjs.io/form-library/examples/issue-report-template-free/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Issue Report (React)

<!-- cut -->

An issue report form helps customers report problems, defects, or issues related to a product or service. Issue report forms are commonly used in customer support, software development, quality assurance, and other fields where issues must be identified and resolved as quickly as possible. This demo shows how to create an issue report form using SurveyJS Survey Creator with integrated Theme Editor.

## Add a Background Image

The issue report form in this demo has a distinct background image. With Theme Editor by SurveyJS, you can add background images to your forms with ease. Open the **Themes** tab in Survey Creator and switch to the **Background** category. Editors under the **Background image** title enable you to add a background image and configure its every aspect.

<img src="/Content/Images/examples/featured-demos/background-image.png" alt="Configure a background image in SurveyJS Theme Editor" width="100%">

These editors are mapped to the following theme JSON schema properties, which you can find in the `theme.js` file:

- [`backgroundImage`](https://surveyjs.io/form-library/documentation/api-reference/itheme#backgroundImage): `string`          
An image to display as form background. This property accepts a hyperlink or a data URL.

- [`backgroundImageFit`](https://surveyjs.io/form-library/documentation/api-reference/itheme#backgroundImageFit): `"auto"` | `"contain"` | `"cover"`            
A string value that specifies how to resize the background image to fit it into its container. Refer to the description of the [`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#values) CSS property values on MDN for detailed information on the possible values.

- [`backgroundImageAttachment`](https://surveyjs.io/form-library/documentation/api-reference/itheme#backgroundImageAttachment): `"fixed"` | `"scroll"`          
A string value that specifies whether the background image is fixed in its position (as in this demo) or scrolled along with the survey.

- [`backgroundOpacity`](https://surveyjs.io/form-library/documentation/api-reference/itheme#backgroundOpacity): `number`      
A value from 0 to 1 that specifies how transparent the background image should be: 0 makes the image completely transparent, and 1 makes it opaque. In Theme Editor, the opacity values are mapped to a scale from 0% to 100%.

## Configure the Form Header

The header of your form typically contains a form title, short description, and a logo of your company. To specify title and description texts, open the Designer tab and enter them in the **Survey title** and **Survey description** editors in the **General** category.

<img src="/Content/Images/examples/featured-demos/survey-title-and-description.png" alt="Specify survey title and description in SurveyJS Survey Creator" width="100%">

To configure a logo, use editors in the **Logo in the Survey Header** category.

<img src="/Content/Images/examples/featured-demos/logo-settings.png" alt="Specify logo in SurveyJS Survey Creator" width="100%">

These editors are mapped to the following survey JSON properties:

- [`title`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#title)
- [`description`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#description)
- [`logo`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logo)
- [`logoWidth`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logoWidth)
- [`logoHeight`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logoHeight)
- [`logoFit`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logoFit)

To configure the appearance of the form header, open the Themes tab and use editors in the **Header** category. Ensure that the **View** switch is set to "Advanced". All editors in the Header category, except font editors and View, are mapped to corresponding [`header`](https://surveyjs.io/form-library/documentation/api-reference/iheader) object properties in the theme JSON schema (see the `theme.js` file).

<img src="/Content/Images/examples/featured-demos/header-settings.png" alt="Configure form header in SurveyJS Theme Editor" width="100%">

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/SurveyComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/survey-core.min.css";
import { themeJson } from "./theme";
import "./index.css";
import { json } from "./json";

function SurveyComponent() {
    const survey = new Model(json);
    survey.applyTheme(themeJson);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    return (<Survey model={survey} />);
}

export default SurveyComponent;
```

### `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 SurveyComponent from "./SurveyComponent";

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

### `src/json.js`

```js
export const json = {
 "title": "Report an Issue",
 "description": "This form is designed to report issues and propose suggestions for improvement. Your feedback is invaluable in helping us make our services better and resolve issues promptly. Please complete the form below in as much detail as possible.",
 "completedHtml": "<div style=\"max-width:688px;text-align:center;margin:16px auto;\">\n\n<div style=\"padding:0 24px;\">\n<h4>Thank you.</h4>\n<p>Your message has been sent successfully.</p>\n</div>\n\n</div>\n\n",
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "panel",
     "name": "issue-report",
     "elements": [
      {
       "type": "text",
       "name": "issue-title",
       "width": "100%",
       "minWidth": "auto",
       "title": "Title"
      },
      {
       "type": "comment",
       "name": "issue-details",
       "width": "100%",
       "minWidth": "auto",
       "title": "Details",
       "maxLength": 512,
       "rows": 6,
       "placeholder": "Introduce the problem and expand on what you put in the title. Describe what you tried, what you expected to happen, and what actually resulted.",
       "autoGrow": true,
       "allowResize": false
      },
      {
       "type": "rating",
       "name": "issue-priority",
       "title": "Level of priority",
       "autoGenerate": false,
       "rateCount": 3,
       "rateValues": [
        {
         "value": 1,
         "text": "Low"
        },
        {
         "value": 2,
         "text": "Medium"
        },
        {
         "value": 3,
         "text": "High"
        }
       ]
      },
      {
       "type": "file",
       "name": "attached-files",
       "title": "Attachments",
       "allowMultiple": true,
       "filePlaceholder": "Click the button below to select files to upload."
      },
      {
       "type": "text",
       "name": "email",
       "width": "100%",
       "minWidth": "auto",
       "title": "Email address"
      }
     ],
     "width": "100%"
    }
   ]
  }
 ],
 "questionDescriptionLocation": "underInput",
 "questionErrorLocation": "bottom",
 "completeText": "Submit",
 "widthMode": "static",
 "width": "720"
};
```

### `src/theme.js`

```js
export const themeJson = {
  "themeName": "custom",
  "colorPalette": "light",
  "isPanelless": false,
  "backgroundImage": "https://api.surveyjs.io/private/Surveys/files?name=7784247a-6d78-4801-9480-dc22fbed404f",
  "backgroundImageFit": "auto",
  "backgroundImageAttachment": "fixed",
  "backgroundOpacity": 1,
  "cssVariables": {
    "--sjs-editorpanel-hovercolor": "rgba(189, 236, 235, 1)",
    "--sjs-questionpanel-hovercolor": "rgba(189, 236, 235, 1)",
    "--sjs-corner-radius": "8px",
    "--sjs-base-unit": "8px",
    "--sjs-shadow-small": "0px 0px 0px 2px rgba(53, 52, 48, 1),2px 2px 0px 2px rgba(53, 52, 48, 1)",
    "--sjs-font-questiontitle-color": "rgba(14, 13, 8, 1)",
    "--sjs-font-questiondescription-color": "rgba(53, 52, 48, 1)",
    "--sjs-shadow-inner": "inset 0px 0px 0px 2px rgba(53, 52, 48, 1)",
    "--sjs-font-editorfont-color": "rgba(14, 13, 8, 1)",
    "--sjs-font-editorfont-placeholdercolor": "rgba(14, 13, 8, 0.5)",
    "--sjs-border-default": "rgba(53, 52, 48, 1)",
    "--sjs-border-light": "rgba(53, 52, 48, 1)",
    "--sjs-general-backcolor": "rgba(252, 246, 232, 1)",
    "--sjs-general-backcolor-dark": "rgba(248, 248, 248, 1)",
    "--sjs-general-backcolor-dim-light": "rgba(255, 255, 255, 0.99)",
    "--sjs-general-backcolor-dim-dark": "rgba(243, 243, 243, 1)",
    "--sjs-general-forecolor": "rgba(0, 0, 0, 0.91)",
    "--sjs-general-forecolor-light": "rgba(0, 0, 0, 0.45)",
    "--sjs-shadow-medium": "0px 2px 6px 0px rgba(0, 0, 0, 0.1)",
    "--sjs-shadow-large": "0px 8px 16px 0px rgba(0, 0, 0, 0.1)",
    "--sjs-border-inside": "rgba(0, 0, 0, 0.16)",
    "--sjs-special-red-forecolor": "rgba(255, 255, 255, 1)",
    "--sjs-special-green": "rgba(25, 179, 148, 1)",
    "--sjs-special-green-light": "rgba(25, 179, 148, 0.1)",
    "--sjs-special-green-forecolor": "rgba(255, 255, 255, 1)",
    "--sjs-special-blue": "rgba(67, 127, 217, 1)",
    "--sjs-special-blue-light": "rgba(67, 127, 217, 0.1)",
    "--sjs-special-blue-forecolor": "rgba(255, 255, 255, 1)",
    "--sjs-special-yellow": "rgba(255, 152, 20, 1)",
    "--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
    "--sjs-special-yellow-forecolor": "rgba(255, 255, 255, 1)",
    "--sjs-general-backcolor-dim": "#FCF6E8",
    "--sjs-primary-backcolor": "rgba(53, 52, 48, 1)",
    "--sjs-primary-backcolor-dark": "rgba(100, 99, 94, 1)",
    "--sjs-primary-backcolor-light": "rgba(53, 52, 48, 0.1)",
    "--sjs-primary-forecolor": "rgba(255, 255, 255, 1)",
    "--sjs-primary-forecolor-light": "rgba(255, 255, 255, 0.25)",
    "--sjs-special-red": "rgba(229, 10, 62, 1)",
    "--sjs-special-red-light": "rgba(229, 10, 62, 0.1)",
    "--sjs-font-headertitle-color": "rgba(14, 13, 8, 1)",
    "--sjs-font-headerdescription-weight": "600",
    "--sjs-font-headerdescription-size": "16px",
    "--sjs-font-headerdescription-color":  "rgba(14, 13, 8, 1)",
    "--sjs-font-headertitle-weight":  "700",
    "--sjs-font-pagetitle-weight":  "700"
  },
  "header": {
    "height": 208,
    "textAreaWidth": 544
  },
  "headerView": "advanced"
};
```

### `package.json`

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

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/issue-report-template-free/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/issue-report-template-free/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/issue-report-template-free/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/issue-report-template-free/vanillajs.md)