/** * n8n Form Node - Version 2.4 * Generate webforms in n8n and pass their responses to the workflow */ export interface FormV24Params { operation?: 'page' | 'completion'; /** * Define Form * @displayOptions.show { operation: ["page"] } * @default fields */ defineForm?: 'fields' | 'json'; /** * Form Fields * @hint <a href="https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.form/" target="_blank">See docs</a> for field syntax * @displayOptions.show { defineForm: ["json"], operation: ["page"] } */ jsonOutput?: IDataObject | string | Expression; /** * Form Elements * @displayOptions.show { defineForm: ["fields"], operation: ["page"] } * @default {} */ formFields?: { /** Values */ values?: Array<{ /** The name of the field, used in input attributes and referenced by the workflow * @displayOptions.hide { fieldType: ["html"] } */ fieldName?: string | Expression | PlaceholderValue; /** Label that appears above the input field * @displayOptions.hide { fieldType: ["hiddenField", "html"] } */ fieldLabel?: string | Expression | PlaceholderValue; /** Label that appears above the input field * @displayOptions.hide { fieldType: ["hiddenField", "html"] } */ fieldLabel?: string | Expression | PlaceholderValue; /** The name of the field, used in input attributes and referenced by the workflow * @displayOptions.show { fieldType: ["hiddenField"] } */ fieldName?: string | Expression | PlaceholderValue; /** The type of field to add to the form * @default text */ fieldType?: 'checkbox' | 'html' | 'date' | 'dropdown' | 'email' | 'file' | 'hiddenField' | 'number' | 'password' | 'radio' | 'text' | 'textarea' | Expression; /** Optional field. It can be used to include the html in the output. * @displayOptions.show { fieldType: ["html"] } */ elementName?: string | Expression | PlaceholderValue; /** The name of the field, used in input attributes and referenced by the workflow * @displayOptions.hide { fieldType: ["html"] } */ fieldName?: string | Expression | PlaceholderValue; /** Sample text to display inside the field * @displayOptions.hide { fieldType: ["dropdown", "date", "file", "html", "hiddenField", "radio", "checkbox"] } */ placeholder?: string | Expression | PlaceholderValue; /** Default value that will be pre-filled in the form field * @displayOptions.show { fieldType: ["text", "number", "email", "textarea"] } */ defaultValue?: string | Expression | PlaceholderValue; /** Default date value that will be pre-filled in the form field (format: YYYY-MM-DD) * @displayOptions.show { fieldType: ["date"] } */ defaultValue?: string | Expression; /** Default value that will be pre-selected. Must match one of the option labels. * @displayOptions.show { fieldType: ["dropdown", "radio"] } */ defaultValue?: string | Expression | PlaceholderValue; /** Default value(s) that will be pre-selected. Must match one or multiple of the option labels. Separate multiple pre-selected options with a comma. * @displayOptions.show { fieldType: ["checkbox"] } */ defaultValue?: string | Expression | PlaceholderValue; /** Input value can be set here or will be passed as a query parameter via Field Name if no value is set * @displayOptions.show { fieldType: ["hiddenField"] } */ fieldValue?: string | Expression | PlaceholderValue; /** List of options that can be selected from the dropdown * @displayOptions.show { fieldType: ["dropdown"] } * @default {"values":[{"option":""}]} */ fieldOptions?: { /** Values */ values?: Array<{ /** Option */ option?: string | Expression | PlaceholderValue; }>; }; /** Checkboxes * @displayOptions.show { fieldType: ["checkbox"] } * @default {"values":[{"option":""}]} */ fieldOptions?: { /** Values */ values?: Array<{ /** Checkbox Label */ option?: string | Expression | PlaceholderValue; }>; }; /** Radio Buttons * @displayOptions.show { fieldType: ["radio"] } * @default {"values":[{"option":""}]} */ fieldOptions?: { /** Values */ values?: Array<{ /** Radio Button Label */ option?: string | Expression | PlaceholderValue; }>; }; /** Whether to allow the user to select multiple options from the dropdown list * @displayOptions.show { fieldType: ["dropdown"] } * @default false */ multiselect?: boolean | Expression; /** Limit Selection * @displayOptions.show { fieldType: ["checkbox"] } * @default unlimited */ limitSelection?: 'exact' | 'range' | 'unlimited' | Expression; /** Number of Selections * @displayOptions.show { fieldType: ["checkbox"], limitSelection: ["exact"] } * @default 1 */ numberOfSelections?: number | Expression; /** Minimum Selections * @displayOptions.show { fieldType: ["checkbox"], limitSelection: ["range"] } * @default 0 */ minSelections?: number | Expression; /** Maximum Selections * @displayOptions.show { fieldType: ["checkbox"], limitSelection: ["range"] } * @default 1 */ maxSelections?: number | Expression; /** HTML elements to display on the form page * @hint Does not accept <code><script></code>, <code><style></code> or <code><input></code> tags * @displayOptions.show { fieldType: ["html"] } */ html?: string; /** Whether to allow the user to select multiple files from the file input or just one * @displayOptions.show { fieldType: ["file"] } * @default true */ multipleFiles?: boolean | Expression; /** Comma-separated list of allowed file extensions * @hint Leave empty to allow all file types * @displayOptions.show { fieldType: ["file"] } */ acceptFileTypes?: string | Expression | PlaceholderValue; /** Whether to require the user to enter a value for this field before submitting the form * @displayOptions.hide { fieldType: ["html", "hiddenField"] } * @default false */ requiredField?: boolean | Expression; }>; }; /** * Whether to limit the time this node should wait for a user response before execution resumes * @displayOptions.show { operation: ["page", "completion"] } * @default false */ limitWaitTime?: boolean | Expression; /** * Sets the condition for the execution to resume. Can be a specified date or after some time. * @displayOptions.show { limitWaitTime: [true], operation: ["page", "completion"] } * @default afterTimeInterval */ limitType?: 'afterTimeInterval' | 'atSpecifiedTime' | Expression; /** * The time to wait * @displayOptions.show { limitType: ["afterTimeInterval"], limitWaitTime: [true], operation: ["page", "completion"] } * @default 1 */ resumeAmount?: number | Expression; /** * Unit of the interval value * @displayOptions.show { limitType: ["afterTimeInterval"], limitWaitTime: [true], operation: ["page", "completion"] } * @default hours */ resumeUnit?: 'minutes' | 'hours' | 'days' | Expression; /** * Continue execution after the specified date and time * @displayOptions.show { limitType: ["atSpecifiedTime"], limitWaitTime: [true], operation: ["page", "completion"] } */ maxDateAndTime?: string | Expression; /** * Options * @displayOptions.show { operation: ["page", "completion"], respondWith: ["text", "returnBinary", "redirect"] } * @default {} */ options?: { /** Shown at the top of the form */ formTitle?: string | Expression | PlaceholderValue; /** Shown underneath the Form Title. Can be used to prompt the user on how to complete the form. Accepts HTML. Does not accept <code><script></code>, <code><style></code> or <code><input></code> tags. */ formDescription?: string | Expression | PlaceholderValue; /** Button Label * @default Submit */ buttonLabel?: string | Expression | PlaceholderValue; /** Override default styling of the public form interface with CSS */ customCss?: string | Expression | PlaceholderValue; }; /** * On n8n Form Submission * @displayOptions.show { operation: ["completion"] } * @default text */ respondWith?: 'text' | 'redirect' | 'showText' | 'returnBinary' | Expression; /** * URL * @displayOptions.show { respondWith: ["redirect"], operation: ["completion"] } */ redirectUrl?: string | Expression | PlaceholderValue; /** * Completion Title * @displayOptions.show { respondWith: ["text", "returnBinary"], operation: ["completion"] } */ completionTitle?: string | Expression | PlaceholderValue; /** * Completion Message * @displayOptions.show { respondWith: ["text", "returnBinary"], operation: ["completion"] } */ completionMessage?: string | Expression | PlaceholderValue; /** * The text to display on the page. Use HTML to show a customized web page. * @displayOptions.show { respondWith: ["showText"], operation: ["completion"] } */ responseText?: string | Expression | PlaceholderValue; /** * Find the name of input field containing the binary data to return in the Input panel on the left, in the Binary tab * @hint The name of the input field containing the binary file data to be returned * @displayOptions.show { respondWith: ["returnBinary"], operation: ["completion"] } * @default data */ inputDataFieldName?: string | Expression | PlaceholderValue; } interface FormV24NodeBase { type: 'n8n-nodes-base.form'; version: 2.4; } export type FormV24ParamsNode = FormV24NodeBase & { config: NodeConfig; }; export type FormV24Node = FormV24ParamsNode;