fix(n8n Form Node): Remove field requirement and do not inherit description (#14254)

cypress/e2e/16-form-trigger-node.cy.ts

@@ -14,7 +14,6 @@ describe('n8n Form Trigger', () => {
 		workflowPage.getters.nodeCreatorNodeItems().contains('On form submission').click();
 		ndv.getters.parameterInput('formTitle').type('Test Form');
 		ndv.getters.parameterInput('formDescription').type('Test Form Description');
-		ndv.getters.parameterInput('fieldLabel').type('Test Field 1');
 		ndv.getters.backToCanvas().click();
 		workflowPage.getters.nodeIssuesByName('On form submission').should('not.exist');
 	});
@@ -26,9 +25,10 @@ describe('n8n Form Trigger', () => {
 		});
 		ndv.getters.parameterInput('formTitle').type('Test Form');
 		ndv.getters.parameterInput('formDescription').type('Test Form Description');
-		//fill up first field of type number
+		cy.get('[data-test-id="fixed-collection-add"]').click();
 		ndv.getters.parameterInput('fieldLabel').type('Test Field 1');
 		ndv.getters.parameterInput('fieldType').click();
+		//fill up first field of type number
 		getVisibleSelect().contains('Number').click();
 		cy.get(
 			'[data-test-id="parameter-input-requiredField"] > .parameter-input > .el-switch > .el-switch__core',

packages/cli/templates/form-trigger.handlebars

@@ -437,141 +437,125 @@
 					<hr>
 				{{/if}}
 
-				{{#if validForm}}
-					<form class='card' action='#' method='POST' name='n8n-form' id='n8n-form' novalidate>
-						<div class='form-header'>
-							<h1>{{formTitle}}</h1>
-							<p style="white-space: pre-line">{{{formDescription}}} </p>
-						</div>
-
-						<div class='inputs-wrapper'>
-							{{#each formFields}}
-								{{#if isMultiSelect}}
-									<div>
-										<label class='form-label {{inputRequired}}'>{{label}}</label>
-										<div class='multiselect {{inputRequired}}' id='{{id}}'>
-											{{#each multiSelectOptions}}
-												<div class='multiselect-option'>
-													<input type='checkbox' class='multiselect-checkbox' id='{{id}}' />
-													<label for='{{id}}'>{{label}}</label>
-												</div>
-											{{/each}}
-										</div>
-										<p class='{{errorId}} error-hidden'>
-											This field is required
-										</p>
-									</div>
-								{{/if}}
-
-								{{#if isSelect}}
-									<div class='form-group'>
-										<label class='form-label {{inputRequired}}' for='{{id}}'>{{label}}</label>
-										<div class='select-input'>
-											<select id='{{id}}' name='{{id}}' class='{{inputRequired}}'>
-												<option value='' disabled selected>Select an option ...</option>
-												{{#each selectOptions}}
-													<option value='{{this}}'>{{this}}</option>
-												{{/each}}
-											</select>
-										</div>
-										<p class='{{errorId}} error-hidden'>
-											This field is required
-										</p>
-									</div>
-								{{/if}}
-
-								{{#if isHtml}}
-									<div class="form-group html">
-										{{{html}}}
-										<input type="hidden" id="{{id}}" name="{{id}}" value="{{html}}" />
-									</div>
-								{{/if}}
-
-								{{#if isHidden}}
-									<input type="hidden" id="{{id}}" name="{{id}}" value="{{hiddenValue}}" />
-								{{/if}}
-
-								{{#if isTextarea}}
-									<div class='form-group'>
-										<label class='form-label {{inputRequired}}' for='{{id}}'>{{label}}</label>
-										<textarea
-											class='form-input {{inputRequired}}'
-											id='{{id}}'
-											name='{{id}}'
-											placeholder="{{placeholder}}"
-										>{{defaultValue}}</textarea>
-										<p class='{{errorId}} error-hidden'>
-											This field is required
-										</p>
-									</div>
-								{{/if}}
-
-								{{#if isFileInput}}
-									<div class='form-group file-input-wrapper'>
-										<label class='form-label {{inputRequired}}' for='{{id}}'>{{label}}</label>
-										<input
-											class='form-input {{inputRequired}}'
-											type='file'
-											id='{{id}}'
-											name='{{id}}'
-											accept='{{acceptFileTypes}}'
-											{{multipleFiles}}
-											placeholder="{{placeholder}}"
-										/>
-										<button class="clear-button">&times;</button>
-										<p class='{{errorId}} error-hidden'>
-											This field is required
-										</p>
-									</div>
-								{{/if}}
-
-								{{#if isInput}}
-									<div class='form-group'>
-										<label class='form-label {{inputRequired}}' for='{{id}}'>{{label}}</label>
-										<input
-											class='form-input {{inputRequired}}'
-											type='{{type}}'
-											id='{{id}}'
-											name='{{id}}'
-											value="{{defaultValue}}"
-											placeholder="{{placeholder}}"
-										/>
-										<p class='{{errorId}} error-hidden'>
-											This field is required
-										</p>
-									</div>
-								{{/if}}
-							{{/each}}
-						</div>
-
-						<button id='submit-btn' type='submit'>
-							<span><svg
-									xmlns='http://www.w3.org/2000/svg'
-									height='18px'
-									viewBox='0 0 512 512'
-								>
-									<path
-										d='M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z'
-									/>
-								</svg></span>
-							{{ buttonLabel }}
-						</button>
-					</form>
-				{{else}}
-					<div class='card'>
-						<div class='form-header'>
-							{{#if testRun}}
-								<h1>Please add at least one field to your form</h1>
-							{{else}}
-								<h1>Problem loading form</h1>
-								<p>
-									This usually occurs if the n8n workflow serving this form is deactivated or no
-									longer exist
-								</p>
-							{{/if}}
-						</div>
+				<form class='card' action='#' method='POST' name='n8n-form' id='n8n-form' novalidate>
+					<div class='form-header'>
+						<h1>{{formTitle}}</h1>
+						<p style="white-space: pre-line">{{{formDescription}}} </p>
 					</div>
-				{{/if}}
+
+					<div class='inputs-wrapper'>
+						{{#each formFields}}
+							{{#if isMultiSelect}}
+								<div>
+									<label class='form-label {{inputRequired}}'>{{label}}</label>
+									<div class='multiselect {{inputRequired}}' id='{{id}}'>
+										{{#each multiSelectOptions}}
+											<div class='multiselect-option'>
+												<input type='checkbox' class='multiselect-checkbox' id='{{id}}' />
+												<label for='{{id}}'>{{label}}</label>
+											</div>
+										{{/each}}
+									</div>
+									<p class='{{errorId}} error-hidden'>
+										This field is required
+									</p>
+								</div>
+							{{/if}}
+
+							{{#if isSelect}}
+								<div class='form-group'>
+									<label class='form-label {{inputRequired}}' for='{{id}}'>{{label}}</label>
+									<div class='select-input'>
+										<select id='{{id}}' name='{{id}}' class='{{inputRequired}}'>
+											<option value='' disabled selected>Select an option ...</option>
+											{{#each selectOptions}}
+												<option value='{{this}}'>{{this}}</option>
+											{{/each}}
+										</select>
+									</div>
+									<p class='{{errorId}} error-hidden'>
+										This field is required
+									</p>
+								</div>
+							{{/if}}
+
+							{{#if isHtml}}
+								<div class="form-group html">
+									{{{html}}}
+									<input type="hidden" id="{{id}}" name="{{id}}" value="{{html}}" />
+								</div>
+							{{/if}}
+
+							{{#if isHidden}}
+								<input type="hidden" id="{{id}}" name="{{id}}" value="{{hiddenValue}}" />
+							{{/if}}
+
+							{{#if isTextarea}}
+								<div class='form-group'>
+									<label class='form-label {{inputRequired}}' for='{{id}}'>{{label}}</label>
+									<textarea
+										class='form-input {{inputRequired}}'
+										id='{{id}}'
+										name='{{id}}'
+										placeholder="{{placeholder}}"
+									>{{defaultValue}}</textarea>
+									<p class='{{errorId}} error-hidden'>
+										This field is required
+									</p>
+								</div>
+							{{/if}}
+
+							{{#if isFileInput}}
+								<div class='form-group file-input-wrapper'>
+									<label class='form-label {{inputRequired}}' for='{{id}}'>{{label}}</label>
+									<input
+										class='form-input {{inputRequired}}'
+										type='file'
+										id='{{id}}'
+										name='{{id}}'
+										accept='{{acceptFileTypes}}'
+										{{multipleFiles}}
+										placeholder="{{placeholder}}"
+									/>
+									<button class="clear-button">&times;</button>
+									<p class='{{errorId}} error-hidden'>
+										This field is required
+									</p>
+								</div>
+							{{/if}}
+
+							{{#if isInput}}
+								<div class='form-group'>
+									<label class='form-label {{inputRequired}}' for='{{id}}'>{{label}}</label>
+									<input
+										class='form-input {{inputRequired}}'
+										type='{{type}}'
+										id='{{id}}'
+										name='{{id}}'
+										value="{{defaultValue}}"
+										placeholder="{{placeholder}}"
+									/>
+									<p class='{{errorId}} error-hidden'>
+										This field is required
+									</p>
+								</div>
+							{{/if}}
+						{{/each}}
+					</div>
+
+					<button id='submit-btn' type='submit'>
+						<span><svg
+								xmlns='http://www.w3.org/2000/svg'
+								height='18px'
+								viewBox='0 0 512 512'
+							>
+								<path
+									d='M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z'
+								/>
+							</svg></span>
+						{{ buttonLabel }}
+					</button>
+				</form>
 
 				<div class='card' id='submitted-form' style='display: none;'>
 					<div class='form-header'>

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

@@ -46,7 +46,7 @@ export const formFields: INodeProperties = {
 	name: 'formFields',
 	placeholder: 'Add Form Element',
 	type: 'fixedCollection',
-	default: { values: [{ label: '', fieldType: 'text' }] },
+	default: {},
 	typeOptions: {
 		multipleValues: true,
 		sortable: true,

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

@@ -27,13 +27,6 @@ export const renderFormNode = async (
 		title = context.evaluateExpression(`{{ $('${trigger?.name}').params.formTitle }}`) as string;
 	}
 
-	let description = options.formDescription;
-	if (!description) {
-		description = context.evaluateExpression(
-			`{{ $('${trigger?.name}').params.formDescription }}`,
-		) as string;
-	}
-
 	let buttonLabel = options.buttonLabel;
 	if (!buttonLabel) {
 		buttonLabel =
@@ -50,7 +43,7 @@ export const renderFormNode = async (
 		context,
 		res,
 		formTitle: title,
-		formDescription: description,
+		formDescription: options.formDescription,
 		formFields: fields,
 		responseMode: 'responseNode',
 		mode,

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

@@ -19,7 +19,6 @@ export type FormTriggerInput = {
 
 export type FormTriggerData = {
 	testRun: boolean;
-	validForm: boolean;
 	formTitle: string;
 	formDescription?: string;
 	formDescriptionMetadata?: string;

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

@@ -167,7 +167,6 @@ describe('Form Node', () => {
 				n8nWebsiteLink: 'https://n8n.io/?utm_source=n8n-internal&utm_medium=form-trigger',
 				testRun: true,
 				useResponseData: true,
-				validForm: true,
 				formSubmittedHeader: undefined,
 			});
 		});

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

@@ -109,7 +109,6 @@ describe('FormTrigger', () => {
 				'https://n8n.io/?utm_source=n8n-internal&utm_medium=form-trigger&utm_campaign=instanceId',
 			testRun: true,
 			useResponseData: false,
-			validForm: true,
 		});
 
 		expect(responseData).toEqual({ noWebhookResponse: true });

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

@@ -117,7 +117,6 @@ describe('formNodeUtils', () => {
 			n8nWebsiteLink: 'https://n8n.io/?utm_source=n8n-internal&utm_medium=form-trigger',
 			testRun: true,
 			useResponseData: true,
-			validForm: true,
 		});
 	});
 });

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

@@ -203,7 +203,6 @@ describe('FormTrigger, formWebhook', () => {
 				'https://n8n.io/?utm_source=n8n-internal&utm_medium=form-trigger&utm_campaign=instanceId',
 			testRun: true,
 			useResponseData: false,
-			validForm: true,
 		});
 	});
 
@@ -250,7 +249,6 @@ describe('FormTrigger, formWebhook', () => {
 					'https://n8n.io/?utm_source=n8n-internal&utm_medium=form-trigger&utm_campaign=instanceId',
 				testRun: true,
 				useResponseData: false,
-				validForm: true,
 			});
 		}
 	});
@@ -353,7 +351,6 @@ describe('FormTrigger, prepareFormData', () => {
 
 		expect(result).toEqual({
 			testRun: false,
-			validForm: true,
 			formTitle: 'Test Form',
 			formDescription: 'This is a test form',
 			formDescriptionMetadata: 'This is a test form',
@@ -455,7 +452,6 @@ describe('FormTrigger, prepareFormData', () => {
 
 		expect(result).toEqual({
 			testRun: true,
-			validForm: true,
 			formTitle: 'Test Form',
 			formDescription: 'This is a test form',
 			formDescriptionMetadata: 'This is a test form',
@@ -515,7 +511,6 @@ describe('FormTrigger, prepareFormData', () => {
 			query: {},
 		});
 
-		expect(result.validForm).toBe(false);
 		expect(result.formFields).toEqual([]);
 	});
 

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

@@ -141,7 +141,6 @@ export function prepareFormData({
 	formSubmittedHeader?: string;
 	customCss?: string;
 }) {
-	const validForm = formFields.length > 0;
 	const utm_campaign = instanceId ? `&utm_campaign=${instanceId}` : '';
 	const n8nWebsiteLink = `https://n8n.io/?utm_source=n8n-internal&utm_medium=form-trigger${utm_campaign}`;
 
@@ -151,7 +150,6 @@ export function prepareFormData({
 
 	const formData: FormTriggerData = {
 		testRun,
-		validForm,
 		formTitle,
 		formDescription,
 		formDescriptionMetadata: createDescriptionMetadata(formDescription),
@@ -172,10 +170,6 @@ export function prepareFormData({
 		formData.redirectUrl = redirectUrl;
 	}
 
-	if (!validForm) {
-		return formData;
-	}
-
 	for (const [index, field] of formFields.entries()) {
 		const { fieldType, requiredField, multiselect, placeholder } = field;
 

packages/nodes-base/utils/sendAndWait/test/util.test.ts

@@ -238,7 +238,6 @@ describe('Send and Wait utils tests', () => {
 
 			expect(mockRender).toHaveBeenCalledWith('form-trigger', {
 				testRun: false,
-				validForm: true,
 				formTitle: '',
 				formDescription: 'Test message',
 				formDescriptionMetadata: 'Test message',
@@ -317,7 +316,6 @@ describe('Send and Wait utils tests', () => {
 
 			expect(mockRender).toHaveBeenCalledWith('form-trigger', {
 				testRun: false,
-				validForm: true,
 				formTitle: 'Test title',
 				formDescription: 'Test description',
 				formDescriptionMetadata: 'Test description',