Example of read-only fields automatcally set with different background color (see below):
", "type": "FormTool_Type", "show": true, "new": true, "events": { "onChange": null, "onBlur": null, "onFocus": null }, "loaded": true, "isdirty": false, "id": 1644271493564, "ClientID": 1644271493564, "islive": false, "showEditPanel": false, "stopBlurSave": false } ] } ], "readonly": false, "open": true, "show": true, "type": "Container_Type", "id": "1644271489757c", "ClientID": "1644271489757c", "new": true, "showEditPanel": false }, { "displayName": "Container", "icon": "crop_square", "columns": [ { "items": [ { "displayName": "Number", "QuestionType": "Number", "Label": "Request ID", "type": "Question_Type", "flex": 100, "ClientID": "numRequestID", "class": "", "show": true, "validation": { "required": false, "requiredMessage": "This field is required", "min": null, "minMessage": "This field is too short", "max": null, "maxMessage": "This field is too long", "regEx": null, "regExMessage": "This field is not valid" }, "events": { "onChange": null, "onBlur": null, "onFocus": null }, "format": { "digitsAfterDecimal": 2, "currency": { "useCurrency": false, "id": "" } }, "Answer": null, "new": false, "id": 1644269813490, "showEditPanel": false, "loaded": true, "isdirty": false, "originalAnswer": null, "islive": false, "stopBlurSave": false, "readonly": true } ] }, { "items": [ { "displayName": "Short Text", "QuestionType": "ShortText", "Label": "Requester", "type": "Question_Type", "flex": 100, "ClientID": "stxtRequester", "class": "", "show": true, "validation": { "required": false, "requiredMessage": "This field is required", "min": null, "minMessage": "This field is too short", "max": null, "maxMessage": "This field is too long", "regEx": null, "regExMessage": "This field is not valid" }, "events": { "onChange": null, "onBlur": null, "onFocus": null }, "Answer": null, "new": false, "id": 1644269824635, "showEditPanel": false, "loaded": true, "isdirty": false, "originalAnswer": null, "islive": false, "stopBlurSave": false, "readonly": true } ] }, { "items": [ { "displayName": "Calendar", "QuestionType": "Calendar", "Label": "Request Date", "type": "Question_Type", "ClientID": "calRequestDate", "class": "", "show": true, "events": { "onChange": null, "onBlur": null, "onFocus": null }, "validation": { "futureDatesOnly": false, "required": false, "requiredMessage": "This field is required", "minDate": null, "maxDate": null, "mdDateFilter": null }, "Answer": null, "new": false, "id": 1644269843076, "showEditPanel": false, "loaded": true, "isdirty": false, "originalAnswer": null, "islive": false, "debugMode": false, "todaysDate": "02/15/2022", "dateFormat": "YYYY-MM-DD", "stopBlurSave": false, "initializeWithTodaysDate": true, "readonly": true } ] } ], "readonly": false, "open": true, "show": true, "type": "Container_Type", "id": "1644269659199c", "ClientID": "1644269659199c", "showEditPanel": false }, { "displayName": "Container", "columns": [ { "items": [ { "displayName": "Long Text", "QuestionType": "LongText", "Label": "Long Text Field", "type": "Question_Type", "flex": 100, "ClientID": "ltxtLongTextField", "class": "", "show": true, "validation": { "required": false, "requiredMessage": "This field is required", "min": null, "minMessage": "This field is too short", "max": null, "maxMessage": "This field is too long", "regEx": null, "regExMessage": "This field is not valid" }, "events": { "onChange": null, "onBlur": null, "onFocus": null }, "Answer": null, "new": false, "id": 1644436139715, "showEditPanel": false, "loaded": true, "isdirty": false, "originalAnswer": null, "islive": false, "stopBlurSave": false, "readonly": true } ] } ], "readonly": false, "open": true, "show": true, "type": "Container_Type", "id": "1644347166036c", "ClientID": "1644347166036c", "new": true, "showEditPanel": false } ], "readonly": false, "type": "Section_Type", "ClientID": "1644269659199s", "id": "1644269659199s", "class": "", "expandOnLoad": true, "open": true, "show": true, "ui": { "backgroundColor": "#757575", "textColor": "#000" }, "showEditPanel": false }, { "displayName": "Section", "Label": "Section", "showAsCollapsible": true, "showSectionOutline": true, "contents": [ { "displayName": "Container", "columns": [ { "items": [ { "displayName": "Radio Buttons", "QuestionType": "DbRadioButton", "Label": "Apply Class", "Choices": [ { "Label": "Example 1", "Value": "stxtExample1" }, { "Label": "Example 2", "Value": "stxtExample2" }, { "Label": "Example 3", "Value": "stxtExample3" } ], "columnOrRow": "row", "type": "Question_Type", "flex": 100, "ClientID": "rbApplyClass", "class": "", "show": true, "dbSettings": { "useDB": false }, "validation": { "required": false, "requiredMessage": "This field is required", "min": null, "minMessage": "This field is too short", "max": null, "maxMessage": "This field is too long", "regEx": null, "regExMessage": "This field is not valid" }, "events": { "onChange": null, "onBlur": null, "onFocus": null }, "Answer": null, "new": false, "id": 1644439840087, "showEditPanel": false, "loaded": true, "isdirty": false, "originalAnswer": null, "islive": false, "stopBlurSave": false } ] } ], "readonly": false, "open": true, "show": true, "type": "Container_Type", "id": "1644439835075c", "ClientID": "1644439835075c", "new": true, "showEditPanel": false }, { "displayName": "Container", "columns": [ { "items": [ { "displayName": "Form Text", "QuestionType": "FormText", "formtext": "Examples of using CSS to target specific Client IDs. Where using a class like int-label you can override the style of all labels, this method allows you to target only specific fields while still applying other styles globally on this form.
", "type": "FormTool_Type", "show": true, "new": true, "events": { "onChange": null, "onBlur": null, "onFocus": null }, "loaded": true, "isdirty": false, "id": 1644439210634, "ClientID": "ftxtInstructions2", "islive": false, "showEditPanel": false, "stopBlurSave": false } ] } ], "readonly": false, "open": true, "show": true, "type": "Container_Type", "id": "1644439194611c", "ClientID": "1644439194611c", "new": true, "showEditPanel": false }, { "displayName": "Container", "columns": [ { "items": [ { "displayName": "Short Text", "QuestionType": "ShortText", "Label": "Example 1 (Bold)", "type": "Question_Type", "flex": 100, "ClientID": "stxtExample1", "class": "", "show": true, "validation": { "required": false, "requiredMessage": "This field is required", "min": null, "minMessage": "This field is too short", "max": null, "maxMessage": "This field is too long", "regEx": null, "regExMessage": "This field is not valid" }, "events": { "onChange": null, "onBlur": null, "onFocus": null }, "Answer": null, "new": false, "id": 1644437848310, "showEditPanel": false, "loaded": true, "isdirty": false, "originalAnswer": null, "islive": false, "stopBlurSave": false } ] }, { "items": [ { "displayName": "Short Text", "QuestionType": "ShortText", "Label": "Example 2 (Italic)", "type": "Question_Type", "flex": 100, "ClientID": "stxtExample2", "class": "", "show": true, "validation": { "required": false, "requiredMessage": "This field is required", "min": null, "minMessage": "This field is too short", "max": null, "maxMessage": "This field is too long", "regEx": null, "regExMessage": "This field is not valid" }, "events": { "onChange": null, "onBlur": null, "onFocus": null }, "Answer": null, "new": false, "id": 1644438583835, "showEditPanel": false, "loaded": true, "isdirty": false, "originalAnswer": null, "islive": false, "stopBlurSave": false, "readonly": false, "hidden": false } ] }, { "items": [ { "displayName": "Short Text", "QuestionType": "ShortText", "Label": "Example 3", "type": "Question_Type", "flex": 100, "ClientID": "stxtExample3", "class": "", "show": true, "validation": { "required": false, "requiredMessage": "This field is required", "min": null, "minMessage": "This field is too short", "max": null, "maxMessage": "This field is too long", "regEx": null, "regExMessage": "This field is not valid" }, "events": { "onChange": null, "onBlur": null, "onFocus": null }, "Answer": null, "new": false, "id": 1644438808886, "showEditPanel": false, "loaded": true, "isdirty": false, "originalAnswer": null, "islive": false, "stopBlurSave": false } ] } ], "readonly": false, "open": true, "show": true, "type": "Container_Type", "id": "1644437843990c", "ClientID": "1644437843990c", "new": true, "showEditPanel": false } ], "readonly": false, "type": "Section_Type", "ClientID": "1644347166036s", "id": "1644347166036s", "class": "", "expandOnLoad": true, "open": true, "show": true, "ui": { "backgroundColor": "#757575", "textColor": "#000" }, "new": true, "showEditPanel": false } ], "version": 1, "rules": [], "script": "intForm.getElementByClientID('numRequestID').Answer = '4242';\nintForm.getElementByClientID('stxtRequester').Answer = 'Jane Doe';\nintForm.getElementByClientID('ltxtLongTextField').Answer = 'Long text fields need to be targeted differently than short text';\nlet rbApplyClass = intForm.getElementByClientID('rbApplyClass');\nlet stxtExample1 = intForm.getElementByClientID('stxtExample1');\nlet stxtExample2 = intForm.getElementByClientID('stxtExample2');\nlet stxtExample3 = intForm.getElementByClientID('stxtExample3');\n\nintForm.getElementByClientID('rbApplyClass').events.onChange = function() {\n stxtExample1.Answer = 'Example 1 user text';\n stxtExample2.Answer = 'Example 2 user text';\n stxtExample3.Answer = 'Example 3 user text';\n\n if (rbApplyClass.Answer == 'stxtExample1'){\n stxtExample1.class = 'readonly'; \n stxtExample1.readonly = true;\n }else{\n stxtExample1.class = '';\n stxtExample1.readonly = false;\n }\n if (rbApplyClass.Answer == 'stxtExample2'){\n stxtExample2.class = 'readonly'; \n stxtExample2.readonly = true;\n }else{\n stxtExample2.class = '';\n stxtExample2.readonly = false;\n }\n if (rbApplyClass.Answer == 'stxtExample3'){\n stxtExample3.class = 'readonly'; \n stxtExample3.readonly = true;\n }else{\n stxtExample3.class = '';\n stxtExample3.readonly = false;\n }\n}", "css": "/** Target any input area set to readonly. \r\nSets the background to a light gray when a field is set to read only.\r\nBenefit is that the moment a field is set to read-only the broswer will \r\napply this style automatically\r\n**/\r\nint-question input[readonly] {\r\n color: rgba(0,0,0,1) !important;\r\n background-color: rgba(245, 245, 245, 1) !important;\r\n /**font-size: 40px !important;**/\r\n}\r\n\r\n/** Target all question labels in the form **/\r\n.int-label { \r\n color: rgba(0,0,0,1) !important;\r\n \r\n}\r\n\r\nint-question textarea[readonly] { /** textarea targets Long Text field input. This is also targeting readonly **/\r\n color: rgba(0, 0, 0, 1) !important;\r\n background-color: rgba(245, 245, 245, 1) !important;\r\n}\r\n\r\n/**Target specific fields by Client ID**/\r\n\r\n#stxtExample1 input {\r\n color: blue; /** Format text entered by user to blue **/\r\n}\r\n\r\n#stxtExample2 input {\r\n font-size: 20px !important;\r\n color: red; /** Format text entered by user to red **/\r\n}\r\n\r\n#stxtExample3 input {\r\n color: green; /** Format text entered by user to green **/\r\n}\r\n\r\n/**Target specific question's label**/\r\n\r\n#stxtExample1 .int-label { /**Target question label with Client ID: stxtExample1 **/\r\n color: red !important;\r\n font-size: 20px !important;\r\n font-weight: bold !important; /**Bold text. Other options include lighter, normal, bolder. **/\r\n}\r\n\r\n#stxtExample2 .int-label {\r\n color: green !important; \r\n font-size: 15px !important;\r\n font-style: italic !important;\r\n}\r\n\r\n#stxtExample3 .int-label {\r\n color: blue !important;\r\n font-size: 15px !important;\r\n}\r\n\r\n/** Target questions with class setting set to \"readonly\"**/\r\n\r\n.readonly {\r\n color: rgba(0, 0, 0, 1) !important;\r\n background-color: rgba(245, 245, 245, 1) !important;\r\n}" }