feat(n8n Form Trigger Node, Chat Trigger Node): Allow to customize form and chat css (#13506)

packages/nodes-base/nodes/Form/Form.node.ts

@@ -18,6 +18,7 @@ import {
 	NodeConnectionType,
 } from 'n8n-workflow';
 
+import { cssVariables } from './cssVariables';
 import { renderFormCompletion } from './formCompletionUtils';
 import { renderFormNode } from './formNodeUtils';
 import { configureWaitTillDate } from '../../utils/sendAndWait/configureWaitTillDate.util';
@@ -107,6 +108,17 @@ const pageProperties = updateDisplayOptions(
 					type: 'string',
 					default: 'Submit',
 				},
+				{
+					displayName: 'Custom Form Styling',
+					name: 'customCss',
+					type: 'string',
+					typeOptions: {
+						rows: 10,
+						editor: 'cssEditor',
+					},
+					default: cssVariables.trim(),
+					description: 'Override default styling of the public form interface with CSS',
+				},
 			],
 		},
 	],
@@ -205,7 +217,20 @@ const completionProperties = updateDisplayOptions(
 			type: 'collection',
 			placeholder: 'Add option',
 			default: {},
-			options: [{ ...formTitle, required: false, displayName: 'Completion Page Title' }],
+			options: [
+				{ ...formTitle, required: false, displayName: 'Completion Page Title' },
+				{
+					displayName: 'Custom Form Styling',
+					name: 'customCss',
+					type: 'string',
+					typeOptions: {
+						rows: 10,
+						editor: 'cssEditor',
+					},
+					default: cssVariables.trim(),
+					description: 'Override default styling of the public form interface with CSS',
+				},
+			],
 			displayOptions: {
 				show: {
 					respondWith: ['text'],