feat: Add custom CSS to response form for HITL nodes (#15807)

Co-authored-by: RomanDavydchuk <roman.davydchuk@n8n.io>
This commit is contained in:
Elias Meire
2025-06-05 10:34:51 +02:00
committed by GitHub
parent 8a1cabe62a
commit 3f4810615b
2 changed files with 22 additions and 2 deletions

View File

@@ -22,6 +22,7 @@ import {
createEmailBodyWithoutN8nAttribution,
} from './email-templates';
import type { IEmail } from './interfaces';
import { cssVariables } from '../../nodes/Form/cssVariables';
import { formFieldsProperties } from '../../nodes/Form/Form.node';
import { prepareFormData, prepareFormReturnItem, resolveRawData } from '../../nodes/Form/utils';
import { escapeHtml } from '../utilities';
@@ -39,6 +40,7 @@ type FormResponseTypeOptions = {
responseFormTitle?: string;
responseFormDescription?: string;
responseFormButtonLabel?: string;
responseFormCustomCss?: string;
};
const INPUT_FIELD_IDENTIFIER = 'field-0';
@@ -283,6 +285,17 @@ export function getSendAndWaitProperties(
type: 'string',
default: 'Submit',
},
{
displayName: 'Response Form Custom Styling',
name: 'responseFormCustomCss',
type: 'string',
typeOptions: {
rows: 10,
editor: 'cssEditor',
},
default: cssVariables.trim(),
description: 'Override default styling of the response form with CSS',
},
limitWaitTimeOption,
appendAttributionOption,
],
@@ -331,6 +344,7 @@ const getFormResponseCustomizations = (context: IWebhookFunctions) => {
formTitle,
formDescription,
buttonLabel,
customCss: options.responseFormCustomCss,
};
};
@@ -351,7 +365,8 @@ export async function sendAndWaitWebhook(this: IWebhookFunctions) {
if (responseType === 'freeText') {
if (method === 'GET') {
const { formTitle, formDescription, buttonLabel } = getFormResponseCustomizations(this);
const { formTitle, formDescription, buttonLabel, customCss } =
getFormResponseCustomizations(this);
const data = prepareFormData({
formTitle,
@@ -369,6 +384,7 @@ export async function sendAndWaitWebhook(this: IWebhookFunctions) {
],
testRun: false,
query: {},
customCss,
});
res.render('form-trigger', data);
@@ -408,7 +424,8 @@ export async function sendAndWaitWebhook(this: IWebhookFunctions) {
}
if (method === 'GET') {
const { formTitle, formDescription, buttonLabel } = getFormResponseCustomizations(this);
const { formTitle, formDescription, buttonLabel, customCss } =
getFormResponseCustomizations(this);
const data = prepareFormData({
formTitle,
@@ -420,6 +437,7 @@ export async function sendAndWaitWebhook(this: IWebhookFunctions) {
formFields: fields,
testRun: false,
query: {},
customCss,
});
res.render('form-trigger', data);