--- title: Income Survey product: Form Library description: Gain valuable insights into the financial status of your target audience with this free demo. Learn how to configure and embed an income survey in your JavaScript app to do an effective market research or consumer behavior analysis, plan product development strategies, and more. framework: React source: https://surveyjs.io/form-library/examples/how-to-configure-and-embed-income-survey/reactjs index: https://surveyjs.io/form-library/examples/overview.md --- # Income Survey (React) ## Files ### `public/index.html` ```html
``` ### `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 "./index.css"; import { json } from "./json"; function SurveyComponent() { const survey = new Model(json); survey.onComplete.add((sender, options) => { console.log(JSON.stringify(sender.data, null, 3)); }); return (); } 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(); ``` ### `src/json.js` ```js export const json = { "pages": [ { "name": "page0", "elements": [ { "type": "panel", "name": "panel1", "elements": [ { "type": "html", "name": "income_intro", "html": "

Income

In this section, you will be asked about your current employment and any other way you and your partner currently receive income.

It will be handy to have the following in front of you:

  • Payslip (for employment details)

  • A current Centrelink Schedule for any account-based pension from super, annuities, or other income stream products that you own.

    If you don't have a current one, you can get these schedules by contacting your income stream provider.

  • Latest statement from any payments (from Centrelink or other authority)
" } ] } ] }, { "name": "page1", "elements": [ { "type": "radiogroup", "name": "maritalstatus_c", "title": "What is your marital status?", "titleLocation": "top", "choices": [ "Married", "In a registered relationship", "Living with my partner", "Widowed", "Single" ] } ] }, { "name": "page2", "elements": [ { "type": "panel", "name": "panel5", "title": "Do you and/or your partner currently receive income from employment?", "elements": [ { "type": "panel", "name": "panel2", "questionTitleLocation": "hidden", "title": "You", "elements": [ { "type": "radiogroup", "name": "member_receives_income_from_employment", "isRequired": true, "choices": [ { "value": "1", "text": "Yes" }, { "value": "0", "text": "No" } ], "colCount": 2 }, { "type": "checkbox", "name": "member_type_of_employment", "visible": false, "visibleIf": "{member_receives_income_from_employment} =1", "isRequired": true, "choices": [ "Self employment", "All other types of employment" ] } ] }, { "type": "panel", "name": "panel-yourPartner-receive_income", "visible": false, "visibleIf": "{maritalstatus_c} = 'Married' or {maritalstatus_c} = 'In a registered relationship' or {maritalstatus_c} = 'Living with my partner'", "questionTitleLocation": "hidden", "title": "Your Partner", "startWithNewLine": false, "elements": [ { "type": "radiogroup", "name": "partner_receives_income_from_employment", "isRequired": true, "choices": [ { "value": "1", "text": "Yes" }, { "value": "0", "text": "No" } ], "colCount": 2 }, { "type": "checkbox", "name": "partner_type_of_employment", "visible": false, "visibleIf": "{partner_receives_income_from_employment} =1", "isRequired": true, "choices": [ "Self employment", "All other types of employment" ] } ] } ] } ] }, { "name": "page3.1", "visible": false, "visibleIf": "{member_type_of_employment} contains 'All other types of employment' or {partner_type_of_employment} contains 'All other types of employment'", "elements": [ { "type": "panel", "name": "panel6", "title": "Who are you employed by?", "elements": [ { "type": "panel", "name": "you-employed", "visible": false, "visibleIf": "{member_type_of_employment} contains 'All other types of employment'", "title": "You", "elements": [ { "type": "paneldynamic", "name": "member_arrray_employer_names", "title": "Please enter all your employers", "valueName": "member_arrray_employer", "templateElements": [ { "type": "text", "name": "member_employer_name", "title": "Name of employer", "valueName": "name" } ], "panelCount": 1, "minPanelCount": 1, "addPanelText": "Add another employer" } ] }, { "type": "panel", "name": "panel8", "visible": false, "visibleIf": "{partner_type_of_employment} contains 'All other types of employment'", "title": "Your Partner", "startWithNewLine": false, "elements": [ { "type": "paneldynamic", "name": "partner_arrray_employer_names", "title": "Please enter all your partner employers", "valueName": "partner_arrray_employer", "templateElements": [ { "type": "text", "name": "partner_employer_name", "title": "Name of employer", "valueName": "name" } ], "panelCount": 1, "minPanelCount": 1, "addPanelText": "Add another employer" } ] } ] } ] }, { "name": "page3.2", "visibleIf": "{member_type_of_employment} contains 'All other types of employment' or {partner_type_of_employment} contains 'All other types of employment'", "elements": [ { "type": "panel", "name": "panel16", "title": "Tells us about your employer(s)", "elements": [ { "type": "panel", "name": "panel17", "visibleIf": "{member_type_of_employment} contains 'All other types of employment'", "title": "You", "elements": [ { "type": "paneldynamic", "name": "member_arrray_employer_info", "title": "Your employers", "valueName": "member_arrray_employer", "templateElements": [ { "type": "panel", "name": "panel_member_employer_address", "title": "Address", "elements": [ { "type": "text", "name": "member_employer_address", "title": "Address", "valueName": "address" }, { "type": "text", "name": "member_employer_phone", "title": "Phone number:", "valueName": "phone" }, { "type": "text", "name": "member_employer_abn", "title": "ABN", "valueName": "abn" } ] }, { "type": "panel", "name": "panel_member_employer_role", "title": "What is your role?", "elements": [ { "type": "radiogroup", "name": "member_employer_role", "title": "Your role", "valueName": "role", "choices": [ "Full time", "Part time", "Casual", "Seasonal" ] } ] }, { "type": "panel", "name": "panel_member_employer_hours_work", "title": "What hours do you work?", "elements": [ { "type": "text", "name": "member_employer_hours_worked", "title": "Hours:", "valueName": "hours_worked", "inputType": "number" }, { "type": "dropdown", "name": "member_employer_hours_worked_frequency", "startWithNewLine": false, "title": "Worked Frequency:", "valueName": "hours_worked_frequency", "defaultValue": "Year", "choices": [ "Day", "Week", "Fortnight", "Month", "Year" ] } ] }, { "type": "panel", "name": "panel_member_employer_income", "title": "What income do you receive?", "elements": [ { "type": "text", "name": "member_employer_income", "title": "Income:", "valueName": "income", "inputType": "number" }, { "type": "dropdown", "name": "member_employer_income_frequency", "startWithNewLine": false, "title": "Income Frequency", "valueName": "income_frequency", "defaultValue": "Year", "choices": [ "Day", "Week", "Fortnight", "Month", "Year" ] } ] } ], "templateTitle": "Employer name: {panel.name}", "allowAddPanel": false, "allowRemovePanel": false, "panelCount": 1, "displayMode": "carousel" } ] }, { "type": "panel", "name": "panel18", "visibleIf": "{partner_type_of_employment} contains 'All other types of employment'", "title": "You partner", "startWithNewLine": false, "elements": [ { "type": "paneldynamic", "name": "partner_arrray_employer_info", "title": "Your partner employers", "valueName": "partner_arrray_employer", "templateElements": [ { "type": "panel", "name": "panel_partner_employer_address", "title": "Address", "elements": [ { "type": "text", "name": "partner_employer_address", "title": "Address:", "valueName": "address" }, { "type": "text", "name": "partner_employer_phone", "title": "Phone number", "valueName": "phone" }, { "type": "text", "name": "partner_employer_abn", "title": "ABN", "valueName": "abn" } ] }, { "type": "panel", "name": "panel_partner_employer_role", "title": "What is your role?", "elements": [ { "type": "radiogroup", "name": "partner_employer_role", "title": "Your role", "valueName": "role", "choices": [ "Full time", "Part time", "Casual", "Seasonal" ] } ] }, { "type": "panel", "name": "panel_partner_employer_hours_work", "title": "What hours do you work?", "elements": [ { "type": "text", "name": "partner_employer_hours_worked", "title": "Hours", "valueName": "hours_worked", "inputType": "number" }, { "type": "dropdown", "name": "partner_employer_hours_worked_frequency", "startWithNewLine": false, "title": "Worked Frequency:", "valueName": "hours_worked_frequency", "defaultValue": "Year", "choices": [ "Day", "Week", "Fortnight", "Month", "Year" ] } ] }, { "type": "panel", "name": "panel_partner_employer_income", "title": "What income do you receive?", "elements": [ { "type": "text", "name": "partner_employer_income", "title": "Income:", "valueName": "income", "inputType": "number" }, { "type": "dropdown", "name": "partner_employer_income_frequency", "startWithNewLine": false, "title": "Income frequency:", "valueName": "income_frequency", "defaultValue": "Year", "choices": [ "Day", "Week", "Fortnight", "Month", "Year" ] } ] } ], "templateTitle": "Employer name: {panel.name}", "allowAddPanel": false, "allowRemovePanel": false, "panelCount": 1, "displayMode": "carousel" } ] } ] } ] }, { "name": "page4", "visible": false, "visibleIf": "{member_type_of_employment} contains 'All other types of employment' or {partner_type_of_employment} contains 'All other types of employment'", "elements": [ { "type": "panel", "name": "panel9", "title": "Do any of your employers provide you with fringe benefits?", "elements": [ { "type": "panel", "name": "panel-you-fringe-benefits", "visible": false, "visibleIf": "{member_type_of_employment} contains 'All other types of employment'", "questionTitleLocation": "hidden", "title": "You", "elements": [ { "type": "radiogroup", "name": "member_receive_fringe_benefits", "isRequired": true, "choices": [ { "value": "1", "text": "Yes" }, { "value": "0", "text": "No" } ], "colCount": 2 }, { "type": "panel", "name": "panel11", "visible": false, "visibleIf": "{member_receive_fringe_benefits} = 1", "elements": [ { "type": "text", "name": "member_fringe_benefits_type" }, { "type": "text", "name": "member_fringe_benefits_value" }, { "type": "radiogroup", "name": "member_fringe_benefits_grossing", "choices": [ "Grossed up", "Not grossed up" ] } ] } ] }, { "type": "panel", "name": "your-partner-employed", "visible": false, "visibleIf": "{partner_type_of_employment} contains 'All other types of employment'", "questionTitleLocation": "hidden", "title": "Your Partner", "startWithNewLine": false, "elements": [ { "type": "radiogroup", "name": "partner_receive_fringe_benefits", "isRequired": true, "choices": [ { "value": "1", "text": "Yes" }, { "value": "0", "text": "No" } ], "colCount": 2 }, { "type": "panel", "name": "panel12", "visible": false, "visibleIf": "{partner_receive_fringe_benefits} = 1", "elements": [ { "type": "text", "name": "partner_fringe_benefits_type" }, { "type": "text", "name": "partner_fringe_benefits_value" }, { "type": "radiogroup", "name": "partner_fringe_benefits_grossing", "choices": [ "Grossed up", "Not grossed up" ] } ] } ] } ] } ] }, { "name": "page5", "visible": false, "visibleIf": "{member_receives_income_from_employment} = 1 or {partner_receives_income_from_employment} =1 ", "elements": [ { "type": "panel", "name": "panel10", "title": "In the last 6 months, have you done any seasonal, intermittent or contract work?", "elements": [ { "type": "panel", "name": "panel-you-work", "visible": false, "visibleIf": "{member_receives_income_from_employment} = 1", "questionTitleLocation": "hidden", "title": "You", "elements": [ { "type": "radiogroup", "name": "member_seasonal_intermittent_or_contract_work", "isRequired": true, "choices": [ { "value": "1", "text": "Yes" }, { "value": "0", "text": "No" } ], "colCount": 2 } ] }, { "type": "panel", "name": "panel-partner-work", "visible": false, "visibleIf": "{partner_receives_income_from_employment} =1 ", "questionTitleLocation": "hidden", "title": "Your Partner", "startWithNewLine": false, "elements": [ { "type": "radiogroup", "name": "partner_seasonal_intermittent_or_contract_work", "title": " ", "isRequired": true, "choices": [ { "value": "1", "text": "Yes" }, { "value": "0", "text": "No" } ], "colCount": 2 } ] } ] } ] } ], "storeOthersAsComment": false, "pagePrevText": "Previous", "pageNextText": "Continue", "completeText": "Finish", "requiredMark": "" }; ``` ### `src/theme.js` ```js export const themeJson = {}; ``` ### `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/how-to-configure-and-embed-income-survey/angular.md) - [Vue 3](https://surveyjs.io/form-library/examples/how-to-configure-and-embed-income-survey/vue3js.md) - [jQuery](https://surveyjs.io/form-library/examples/how-to-configure-and-embed-income-survey/jquery.md) - [Vanilla JS](https://surveyjs.io/form-library/examples/how-to-configure-and-embed-income-survey/vanillajs.md)