admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-16 17:46:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dana
2025-04-01 12:21:39 +02:00
committed by GitHub
parent 87bc38d409
commit 4bc1c1a547
11 changed files with 122 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
cypress/e2e/16-form-trigger-node.cy.ts
View File

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

252
packages/cli/templates/form-trigger.handlebars
View File

@@ -437,141 +437,125 @@
<hr> <hr>
{{/if}} {{/if}}
{{#if validForm}} <form class='card' action='#' method='POST' name='n8n-form' id='n8n-form' novalidate>
<form class='card' action='#' method='POST' name='n8n-form' id='n8n-form' novalidate> <div class='form-header'>
<div class='form-header'> <h1>{{formTitle}}</h1>
<h1>{{formTitle}}</h1> <p style="white-space: pre-line">{{{formDescription}}} </p>
<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>
</div> </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='card' id='submitted-form' style='display: none;'>
<div class='form-header'> <div class='form-header'>

2
packages/nodes-base/nodes/Form/common.descriptions.ts
View File

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

9
packages/nodes-base/nodes/Form/formNodeUtils.ts
View File

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

1
packages/nodes-base/nodes/Form/interfaces.ts
View File

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

1
packages/nodes-base/nodes/Form/test/Form.node.test.ts
View File

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

1
packages/nodes-base/nodes/Form/test/FormTriggerV2.node.test.ts
View File

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

1
packages/nodes-base/nodes/Form/test/formNodeUtils.test.ts
View File

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

5
packages/nodes-base/nodes/Form/test/utils.test.ts
View File

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

6
packages/nodes-base/nodes/Form/utils.ts
View File

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

2
packages/nodes-base/utils/sendAndWait/test/util.test.ts
View File

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