---
title: Product Usage Research Survey
product: Form Library
description: Gather valuable insights with our customizable product usage research survey template. Easily integrate SurveyJS Form Builder with your existing application to build multiple market research forms, collect responses, and analyze customer behavior, preferences, and product performance.
framework: React
source: https://surveyjs.io/form-library/examples/product-usage-research-survey-template/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Product Usage Research Survey (React)

## 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": "Product Usage Research Survey",
 "completedHtmlOnCondition": [
  {
   "expression": "{models} allof ['none']",
   "html": "Thank you for your interest in our survey. Unfortunately, based on your responses, you are not eligible to participate at this time. We appreciate your understanding and hope you will consider participating in future surveys."
  }
 ],
 "pages": [
  {
   "name": "participant-information",
   "elements": [
    {
     "type": "text",
     "name": "name",
     "title": "Full name",
     "isRequired": true
    },
    {
     "type": "text",
     "name": "dob",
     "startWithNewLine": false,
     "title": "Date of birth",
     "inputType": "date"
    },
    {
     "type": "text",
     "name": "age",
     "title": "Age",
     "resetValueIf": "{dob} empty",
     "setValueExpression": "age({dob})",
     "readOnly": true,
     "validators": [
      {
       "type": "expression"
      }
     ]
    },
    {
     "type": "radiogroup",
     "name": "gender",
     "startWithNewLine": false,
     "title": "Gender",
     "choices": [
      "Male",
      "Female"
     ],
     "otherText": "Other (please specify)",
     "colCount": 2
    },
    {
     "type": "text",
     "name": "occupation",
     "title": "Occupation",
     "placeholder": "Start typing...",
     "dataList": [
      "Software Developer",
      "Registered Nurse",
      "Medical and Health Services Manager",
      "Data Scientist",
      "Information Security Analyst",
      "Market Research Analyst",
      "Management Analyst",
      "Financial Manager",
      "Industrial Engineer",
      "Physical Therapist",
      "Physician Assistant",
      "Construction Manager",
      "Human Resources Specialist",
      "Accountant and Auditor",
      "Marketing Manager"
     ]
    },
    {
     "type": "dropdown",
     "name": "location",
     "title": "Location",
     "choices": [
      "Item 1",
      "Item 2",
      "Item 3"
     ],
     "choicesByUrl": {
      "url": "https://surveyjs.io/api/CountriesExample"
     },
     "placeholder": "Select country...",
     "autocomplete": "country"
    },
    {
     "type": "text",
     "name": "email",
     "title": "Email",
     "description": "(optional)",
     "inputType": "email",
     "autocomplete": "email",
     "placeholder": "example@gmail.com"
    },
    {
     "type": "text",
     "name": "phone-number",
     "startWithNewLine": false,
     "title": "Phone Number",
     "description": "(optional)",
     "maskType": "pattern",
     "maskSettings": {
      "pattern": "+1(999)-999-99-99"
     }
    },
    {
     "type": "radiogroup",
     "name": "income",
     "title": "Household Income",
     "choices": [
      "Below $25,000",
      "$25,000 - $50,000",
      "$50,000 - $75,000",
      "$75,000 - $100,000",
      "Above $100,000"
     ],
     "colCount": 2
    },
    {
     "type": "radiogroup",
     "name": "education-level",
     "title": "Education Level",
     "choices": [
      "High School",
      "Some College",
      "Bachelor’s Degree",
      "Master’s Degree",
      "Doctorate"
     ],
     "showOtherItem": true,
     "otherPlaceholder": "please specify here...",
     "otherText": "Other:",
     "colCount": 2
    },
    {
     "type": "radiogroup",
     "name": "marital-status",
     "title": "Marital Status",
     "choices": [
      "Single",
      "Married",
      "Divorced",
      "Widowed"
     ],
     "colCount": 2
    }
   ],
   "title": "Section 1: Demographics"
  },
  {
   "name": "product-information",
   "elements": [
    {
     "type": "checkbox",
     "name": "models",
     "title": "Please select the model of sneakers you have used from the following list:",
     "valueName": "models",
     "isRequired": true,
     "choices": [
      "Nike Air Max Plus OG 'Voltage Purple'",
      "Nike Dunk Low 'Brazil'",
      "Salehe Bembury x New Balance 1906R 'Lava'",
      "Stash x Nike Air Max 95 'Black'",
      "Supreme x Nike Air Max Dn 'Black'",
      "Travis Scott x Jordan Jumpman Jack 'Sail'",
      "Trophy Room x Air Jordan 1 Low OG 'Away'"
     ],
     "showNoneItem": true,
     "colCount": 2,
     "maxSelectedChoices": 7,
     "minSelectedChoices": 1,
     "valuePropertyName": "model_id"
    },
    {
     "type": "matrixdynamic",
     "name": "models-rating",
     "visibleIf": "{models} <> ['none'] and {models} notempty",
     "title": "Please rate each model",
     "valueName": "models",
     "columns": [
      {
       "name": "model_id",
       "title": "Model",
       "cellType": "expression"
      },
      {
       "name": "purchase-date",
       "title": "Purchase Date",
       "cellType": "text",
       "inputType": "date"
      },
      {
       "name": "frequency",
       "title": "Frequency of Use",
       "cellType": "dropdown",
       "choices": [
        "Daily",
        "Several times a week",
        "Once a week",
        "Several times a month",
        "Once a month or less"
       ]
      },
      {
       "name": "primary-activity",
       "title": "Primary Activity",
       "cellType": "dropdown",
       "choices": [
        "Casual wear",
        "Sports/Exercise",
        "Work/School",
        "Special occasions",
        "Collecting"
       ]
      }
     ],
     "allowAddRows": false,
     "allowRemoveRows": false,
     "rowCount": 1
    },
    {
     "type": "paneldynamic",
     "name": "purchase-details",
     "visibleIf": "{models} <> ['none'] and {models} notempty",
     "title": "Purchase details",
     "valueName": "models",
     "templateElements": [
      {
       "type": "radiogroup",
       "name": "first-hear",
       "title": "How did you first hear about this sneaker model?",
       "choices": [
        "Social Media",
        "Friend/Family",
        "Online Advertisement",
        "In-store Display",
        "Sneaker Review Website"
       ],
       "showOtherItem": true,
       "otherPlaceholder": "please specify",
       "otherText": "Other:"
      },
      {
       "type": "radiogroup",
       "name": "where-purchased",
       "startWithNewLine": false,
       "title": "Where did you purchase this sneaker model?",
       "choices": [
        "Online Retailer",
        "Brand's Official Website",
        "Physical Store",
        "Reseller"
       ],
       "showOtherItem": true,
       "otherPlaceholder": "please specify",
       "otherText": "Other:"
      },
      {
       "type": "boolean",
       "name": "remember-name",
       "visibleIf": "{panel.where-purchased} notempty and {panel.where-purchased-Comment} notempty",
       "title": "Do you remember the name of that {panel.where-purchased}?"
      },
      {
       "type": "text",
       "name": "specify-name",
       "visibleIf": "{panel.remember-name} notempty",
       "startWithNewLine": false,
       "title": "Please specify "
      },
      {
       "type": "matrixdropdown",
       "name": "rating-matrix",
       "title": "On a scale of 1 to 5, rate the following:",
       "showHeader": false,
       "alternateRows": true,
       "columns": [
        {
         "name": "rating-scale",
         "cellType": "rating",
         "rateType": "smileys",
         "autoGenerate": false,
         "rateValues": [
          {
           "value": 1,
           "text": "Very Dissatisfied"
          },
          {
           "value": 2,
           "text": "Dissatisfied"
          },
          {
           "value": 3,
           "text": "Neutral"
          },
          {
           "value": 4,
           "text": "Satisfied"
          },
          {
           "value": 5,
           "text": "Very Satisfied"
          }
         ],
         "minRateDescription": "Very Dissatisfied",
         "maxRateDescription": "Very Satisfied"
        }
       ],
       "rows": [
        {
         "value": "Row 1",
         "text": "How satisfied are you with the comfort of these sneakers?"
        },
        {
         "value": "Row 2",
         "text": "How satisfied are you with the durability of these sneakers?"
        },
        {
         "value": "Row 3",
         "text": "How satisfied are you with the style/design of these sneakers?"
        }
       ]
      }
     ],
     "templateTitle": "Model {panel.model_id}",
     "allowAddPanel": false,
     "allowRemovePanel": false
    }
   ],
   "title": "Section 2: Purchase and Usage Patterns"
  },
  {
   "name": "usage-patterns",
   "elements": [
    {
     "type": "paneldynamic",
     "name": "most-least-panel",
     "visibleIf": "{models} <> ['none'] and {models} notempty",
     "title": "Please select and rank your most and least favorite features of the sneakers.",
     "valueName": "models",
     "templateElements": [
      {
       "type": "ranking",
       "name": "like-most",
       "title": "What features do you like the most about {panel.model_id}?",
       "description": "(Select all that apply and then rank in order of priority)",
       "choices": [
        "Comfort",
        "Style/Design",
        "Brand Reputation",
        "Durability",
        "Exclusivity/Limited Edition",
        "Versatility"
       ],
       "minSelectedChoices": 2,
       "selectToRankEnabled": true
      },
      {
       "type": "ranking",
       "name": "like-least",
       "title": "What features do you like the least about {panel.model_id}?",
       "description": "(Select all that apply and then rank in order of how much you dislike them)",
       "choices": [
        "Comfort",
        "Style/Design",
        "Brand Reputation",
        "Durability",
        "Exclusivity/Limited Edition",
        "Versatility"
       ],
       "minSelectedChoices": 2,
       "selectToRankEnabled": true
      },
      {
       "type": "boolean",
       "name": "issues",
       "title": "Have you encountered any issues with {panel.model_id}?",
       "commentText": "If yes, please describe:"
      },
      {
       "type": "comment",
       "name": "describe-issue",
       "visibleIf": "{panel.issues} = true",
       "title": "Please describe:",
       "enableIf": "{panel.issues} = true",
       "maxLength": 250,
       "rows": 2,
       "autoGrow": true
      },
      {
       "type": "radiogroup",
       "name": "recommend",
       "title": "Would you recommend {panel.model_id} to others?",
       "choices": [
        "Yes",
        "No",
        "Maybe"
       ],
       "colCount": 3
      },
      {
       "type": "radiogroup",
       "name": "purchase-same-brand",
       "title": "How likely are you to purchase another pair of sneakers from this brand?",
       "choices": [
        "Very Unlikely",
        "Unlikely",
        "Neutral",
        "Likely",
        "Very Likely"
       ],
       "colCount": 3
      }
     ],
     "templateTitle": "Model {panel.model_id}",
     "allowAddPanel": false,
     "allowRemovePanel": false
    }
   ],
   "title": "Section 3: Product Features and Preferences\n"
  },
  {
   "name": "additional-feedback-section",
   "elements": [
    {
     "type": "paneldynamic",
     "name": "additional-question",
     "visibleIf": "{models} <> ['none'] and {models} notempty",
     "titleLocation": "hidden",
     "valueName": "models",
     "templateElements": [
      {
       "type": "boolean",
       "name": "support",
       "title": "Have you contacted customer support? ",
       "titleLocation": "top"
      },
      {
       "type": "rating",
       "name": "support-experience",
       "visibleIf": "{panel.support} = true",
       "title": "How would you rate your experience?",
       "titleLocation": "top",
       "rateCount": 10,
       "rateMax": 10,
       "minRateDescription": "Very Poor",
       "maxRateDescription": "Excellent"
      },
      {
       "type": "comment",
       "name": "improvements",
       "title": "What improvements would you suggest for {panel.model_id}?",
       "titleLocation": "top",
       "maxLength": 250,
       "rows": 3,
       "autoGrow": true
      },
      {
       "type": "comment",
       "name": "additional-comments",
       "title": "Is there anything else you would like to share about your experience with {panel.model_id}?",
       "titleLocation": "top",
       "maxLength": 250,
       "rows": 3,
       "autoGrow": true
      }
     ],
     "templateTitle": "Model {panel.model_id}",
     "allowAddPanel": false,
     "allowRemovePanel": false
    }
   ],
   "title": "Section 4: Additional Feedback\n"
  }
 ],
 "triggers": [
  {
   "type": "complete",
   "expression": "{models} = ['none']"
  }
 ],
 "showProgressBar": true,
 "progressBarType": "questions",
 "progressBarShowNavigationText": true,
 "progressBarShowPageNumbers": true,
 "autoAdvanceEnabled": true,
 "widthMode": "static",
 "width": "1050"
};
```

### `src/theme.js`

```js
export const themeJson = {
    "themeName": "plain",
    "colorPalette": "light",
    "isPanelless": false,
    "backgroundImage": "",
    "backgroundOpacity": 1,
    "backgroundImageAttachment": "scroll",
    "backgroundImageFit": "cover",
    "cssVariables": {
        "--sjs2-color-bg-basic-primary": "rgba(255, 255, 255, 1)",
        "--sjs2-color-utility-property-grid": "rgba(255, 255, 255, 1)",
        "--sjs2-color-utility-tabs": "rgba(255, 255, 255, 1)",
        "--sjs2-color-utility-toolbox": "rgba(255, 255, 255, 1)",
        "--sjs2-color-bg-basic-primary-dim": "rgba(248, 248, 248, 1)",
        "--sjs2-color-bg-neutral-tertiary-dim": "rgba(255, 255, 255, 1)",
        "--sjs2-color-utility-surface-survey-panelless": "rgba(255, 255, 255, 1)",
        "--sjs2-color-utility-surface-survey": "rgba(255, 255, 255, 1)",
        "--sjs2-color-bg-basic-secondary": "rgba(255, 255, 255, 1)",
        "--sjs2-color-bg-basic-secondary-dim": "rgba(243, 243, 243, 1)",
        "--sjs2-color-fg-basic-primary": "rgba(0, 0, 0, 0.91)",
        "--sjs2-color-fg-basic-secondary": "rgba(0, 0, 0, 0.45)",
        "--sjs2-color-project-brand-600": "rgba(37, 137, 229, 1)",
        "--sjs2-color-bg-brand-secondary": "rgba(37, 137, 229, 0.1)",
        "--sjs2-color-bg-brand-primary-dim": "rgba(21, 119, 209, 1)",
        "--sjs2-color-fg-brand-on-primary": "rgba(255, 255, 255, 1)",
        "--sjs2-color-fg-brand-primary-disabled": "rgba(255, 255, 255, 0.25)",
        "--sjs2-base-unit-size": "8px",
        "--sjs2-base-unit-spacing": "8px",
        "--sjs2-base-unit-radius": "4px",
        "--sjs2-color-bg-accent-primary": "rgba(255, 152, 20, 1)",
        "--sjs2-color-bg-accent-secondary": "rgba(255, 152, 20, 0.1)",
        "--sjs2-color-bg-accent-secondary-dim": "rgba(255, 152, 20, 0.25)",
        "--sjs2-color-fg-accent-on-primary": "rgba(255, 255, 255, 1)",
        "--sjs2-color-fg-accent-primary-disabled": "rgba(255, 255, 255, 0.25)",
        "--sjs2-border-effect-surface-default": "0px 0px 0px 1px rgba(0, 0, 0, 0.15)",
        "--sjs2-border-effect-floating-default": "0px 0px 0px 1px rgba(0, 0, 0, 0.1),0px 8px 16px 0px rgba(0, 0, 0, 0.05)",
        "--sjs2-border-effect-component-formbox-default": "0px 0px 0px 1px rgba(0, 0, 0, 0.15)",
        "--sjs2-border-effect-component-check-true-default": "0px 0px 0px 1px rgba(0, 0, 0, 0.15)",
        "--sjs2-border-effect-component-check-false-default": "0px 0px 0px 1px rgba(0, 0, 0, 0.15)",
        "--sjs2-color-border-basic-secondary": "rgba(0, 0, 0, 0.15)",
        "--sjs2-color-component-input-default-line": "rgba(0, 0, 0, 0.15)",
        "--sjs2-color-border-basic-secondary-overlay": "rgba(0, 0, 0, 0.16)",
        "--sjs2-color-bg-alert-primary": "rgba(229, 10, 62, 1)",
        "--sjs2-color-bg-alert-secondary": "rgba(229, 10, 62, 0.1)",
        "--sjs2-color-fg-alert-on-primary": "rgba(255, 255, 255, 1)",
        "--sjs2-color-bg-positive-primary": "rgba(25, 179, 148, 1)",
        "--sjs2-color-bg-positive-secondary": "rgba(25, 179, 148, 0.1)",
        "--sjs2-color-fg-positive-on-primary": "rgba(255, 255, 255, 1)",
        "--sjs2-color-bg-note-primary": "rgba(67, 127, 217, 1)",
        "--sjs2-color-bg-note-secondary": "rgba(67, 127, 217, 0.1)",
        "--sjs2-color-fg-note-on-primary": "rgba(255, 255, 255, 1)",
        "--sjs2-color-bg-warning-primary": "rgba(255, 152, 20, 1)",
        "--sjs2-color-bg-warning-secondary": "rgba(255, 152, 20, 0.1)",
        "--sjs2-color-fg-warning-on-primary": "rgba(255, 255, 255, 1)",
        "--sjs2-typography-font-weight-component-header-title": "700",
        "--sjs2-typography-font-size-component-header-description": "20px",
        "--sjs2-typography-font-weight-component-page-title": "700"
    },
    "headerView": "basic"
};
```

### `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/product-usage-research-survey-template/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/product-usage-research-survey-template/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/product-usage-research-survey-template/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/product-usage-research-survey-template/vanillajs.md)