diff --git a/packages/nodes-base/utils/sendAndWait/test/util.test.ts b/packages/nodes-base/utils/sendAndWait/test/util.test.ts index f36074d148..62eb5c5b72 100644 --- a/packages/nodes-base/utils/sendAndWait/test/util.test.ts +++ b/packages/nodes-base/utils/sendAndWait/test/util.test.ts @@ -303,6 +303,7 @@ describe('Send and Wait utils tests', () => { responseFormTitle: 'Test title', responseFormDescription: 'Test description', responseFormButtonLabel: 'Test button', + responseFormCustomCss: 'body { background-color: red; }', }, }; return params[parameterName]; @@ -334,6 +335,7 @@ describe('Send and Wait utils tests', () => { ], appendAttribution: true, buttonLabel: 'Test button', + dangerousCustomCss: 'body { background-color: red; }', }); }); diff --git a/packages/nodes-base/utils/sendAndWait/utils.ts b/packages/nodes-base/utils/sendAndWait/utils.ts index e61058be30..57650db563 100644 --- a/packages/nodes-base/utils/sendAndWait/utils.ts +++ b/packages/nodes-base/utils/sendAndWait/utils.ts @@ -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);