chore(n8n Form Node): Incorporate design feedback for Custom HTML (#12817)

packages/nodes-base/nodes/Form/common.descriptions.ts

@@ -57,7 +57,7 @@ export const formFields: INodeProperties = {
 			name: 'values',
 			values: [
 				{
-					displayName: 'Field Label',
+					displayName: 'Field Name',
 					name: 'fieldLabel',
 					type: 'string',
 					default: '',
@@ -66,7 +66,7 @@ export const formFields: INodeProperties = {
 					required: true,
 					displayOptions: {
 						hide: {
-							fieldType: ['hiddenField'],
+							fieldType: ['hiddenField', 'html'],
 						},
 					},
 				},
@@ -120,6 +120,19 @@ export const formFields: INodeProperties = {
 					],
 					required: true,
 				},
+				{
+					displayName: 'Element Name',
+					name: 'elementName',
+					type: 'string',
+					default: '',
+					placeholder: 'e.g. content-section',
+					description: 'Optional field. It can be used to include the html in the output.',
+					displayOptions: {
+						show: {
+							fieldType: ['html'],
+						},
+					},
+				},
 				{
 					displayName: 'Placeholder',
 					name: 'placeholder',
@@ -204,14 +217,16 @@ export const formFields: INodeProperties = {
 					},
 				},
 				{
-					displayName: 'HTML Template',
+					displayName: 'HTML',
 					name: 'html',
 					typeOptions: {
 						editor: 'htmlEditor',
 					},
 					type: 'string',
+					noDataExpression: true,
 					default: placeholder,
-					description: 'HTML template to render',
+					description: 'HTML elements to display on the form page',
+					hint: 'Does not accept <code>&lt;script&gt;</code>, <code>&lt;style&gt;</code> or <code>&lt;input&gt;</code> tags',
 					displayOptions: {
 						show: {
 							fieldType: ['html'],
@@ -256,18 +271,6 @@ export const formFields: INodeProperties = {
 						},
 					},
 				},
-				{
-					displayName:
-						'Does not accept <code>&lt;style&gt;</code> <code>&lt;script&gt;</code> or <code>&lt;input&gt;</code> tags.',
-					name: 'htmlTips',
-					type: 'notice',
-					default: '',
-					displayOptions: {
-						show: {
-							fieldType: ['html'],
-						},
-					},
-				},
 				{
 					displayName: 'Required Field',
 					name: 'requiredField',

packages/nodes-base/nodes/Form/test/utils.test.ts

@@ -743,6 +743,22 @@ describe('prepareFormReturnItem', () => {
 
 		expect(result.json.formQueryParameters).toEqual(staticData);
 	});
+
+	it('should return html if field name is set', async () => {
+		mockContext.getBodyData.mockReturnValue({
+			data: { 'field-0': '<div>hi</div>', 'field-1': '<h1><haha/hi>' },
+			files: {},
+		});
+
+		const formFields = [
+			{ fieldLabel: '', elementName: 'greeting', fieldType: 'html' },
+			{ fieldLabel: '', elementName: '', fieldType: 'html' },
+		];
+		const result = await prepareFormReturnItem(mockContext, formFields, 'production');
+
+		expect(result.json.greeting).toBe('<div>hi</div>');
+		expect(result.json.formMode).toBe('production');
+	});
 });
 
 describe('resolveRawData', () => {

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

@@ -50,6 +50,10 @@ export function sanitizeHtml(text: string) {
 			'pre',
 			'span',
 			'br',
+			'ul',
+			'ol',
+			'li',
+			'p',
 		],
 		allowedAttributes: {
 			a: ['href', 'target', 'rel'],
@@ -280,6 +284,13 @@ export async function prepareFormReturnItem(
 			continue;
 		}
 
+		if (field.fieldType === 'html') {
+			if (field.elementName) {
+				returnItem.json[field.elementName as string] = value;
+			}
+			continue;
+		}
+
 		if (field.fieldType === 'number') {
 			value = Number(value);
 		}