{ "id": "7ebD2fYHEFz7Qzku", "meta": { "templateCredsSetupCompleted": true }, "name": "Custom Interactive Forms - Submission Handler", "tags": [], "nodes": [ { "id": "06da9d06-b087-4cfd-a35f-ccaf59c9ca5b", "name": "Read Form Config", "type": "n8n-nodes-base.googleSheets", "position": [ -208, 128 ], "parameters": { "options": {}, "sheetName": { "__rl": true, "mode": "list", "value": "gid=0", "cachedResultUrl": "https://docs.google.com/spreadsheets/d/1eAwCFWAICx3m9_ZCka0i0orrtMwcyRXbcunpgHFZc_k/edit#gid=0", "cachedResultName": "Form_Config" }, "documentId": { "__rl": true, "mode": "list", "value": "1eAwCFWAICx3m9_ZCka0i0orrtMwcyRXbcunpgHFZc_k", "cachedResultUrl": "https://docs.google.com/spreadsheets/d/1eAwCFWAICx3m9_ZCka0i0orrtMwcyRXbcunpgHFZc_k/edit?usp=drivesdk", "cachedResultName": "Feedback Form" } }, "credentials": { "googleSheetsOAuth2Api": { "name": "" } }, "typeVersion": 4 }, { "id": "1beea621-4227-42e8-beaf-8955a4d37c03", "name": "Format Config", "type": "n8n-nodes-base.code", "position": [ 16, 128 ], "parameters": { "jsCode": "const items = $input.all();\nlet config = { title: '', subtitle: '', fields: [] };\nfor (const item of items) {\n const data = item.json;\n if (data.Setting_Type === 'Meta') {\n config[data.Key] = data.Value;\n }\n if (data.Setting_Type === 'Field') {\n config.fields.push({\n name: data.Key,\n type: data.Value,\n label: data.Label,\n options: data.Options ? data.Options.split(',').map(s => s.trim()) : [],\n required: data.Required === 'TRUE' || data.Required === 'true'\n });\n }\n}\nreturn [{ json: config }];" }, "typeVersion": 2 }, { "id": "990ee665-d30d-4717-a36a-8787a54f10ca", "name": "Generate HTML", "type": "n8n-nodes-base.code", "position": [ 288, 128 ], "parameters": { "jsCode": "const inputData = $input.all()[0].json;\n\n// Handle both array and object inputs\nconst config = Array.isArray(inputData) ? inputData[0] : inputData;\n\n// Escape closing script tags to avoid breaking HTML\nconst safeConfig = JSON.stringify(config).replace(/<\\/script>/gi, '<\\\\/script>');\n\n// 1. Get your n8n instance's base URL from its environment variables\nconst n8nBaseUrl = $env.WEBHOOK_URL || \"http:localhost:5678\";\n// 2. Check if you clicked 'Execute workflow' (manual/test) or if it's running live\nconst isTestMode = n8nBaseUrl === \"http:localhost:5678\";\nconst webhookPrefix = isTestMode ? \"webhook-test\" : \"webhook\";\n// 3. Dynamically build the final URL\nconst URL = `${n8nBaseUrl}/${webhookPrefix}/dynamic-form-submit`;\n\nconst html = `\n\n\n \n \n\n \n \n\n \n\n \n\n ${config.title || 'Dynamic Form Portal'}\n\n\n\n\n \n

\n\n \n

\n\n \n\n \n

\n\n

\n \n

\n\n

\n\n \n

\n\n \n\n

\n\n \n

\n\n

\n \n

\n\n

All done!

\n\n

Your response has been submitted successfully.

\n\n \n \n Submit another response\n \n\n

\n\n \n \n\n \n\n \n\n\n`;\n\nreturn [\n {\n json: {\n html\n }\n }\n];" }, "typeVersion": 2 }, { "id": "bb37a34e-3b27-408c-8237-2c1973bf77cb", "name": "When clicking \u2018Execute workflow\u2019", "type": "n8n-nodes-base.manualTrigger", "position": [ -480, 0 ], "parameters": {}, "typeVersion": 1 }, { "id": "c6117291-f528-4e97-95a9-d30a11775055", "name": "Upsert HTML Page", "type": "@custom-js/n8n-nodes-pdf-toolkit-v2.pdfToolkit", "position": [ 448, 128 ], "parameters": { "pageName": "={{ $('Format Config').item.json.title }}", "resource": "page", "operation": "upsert", "htmlContent": "={{ $json.html }}" }, "credentials": { "customJsApi": { "name": "" } }, "typeVersion": 1 }, { "id": "0e1da581-715a-4b2b-8437-9e3c7bd0872e", "name": "Webhook (POST)", "type": "n8n-nodes-base.webhook", "position": [ -368, 480 ], "parameters": { "path": "dynamic-form-submit", "options": {}, "httpMethod": "POST", "responseMode": "lastNode" }, "typeVersion": 1 }, { "id": "7f44215b-4353-48c3-9f42-69ae936bbd28", "name": "Add Timestamp", "type": "n8n-nodes-base.code", "position": [ 96, 480 ], "parameters": { "jsCode": "const body = $input.all()[0].json.body;\nbody.timestamp = new Date().toISOString();\nreturn [{ json: body }];" }, "typeVersion": 2 }, { "id": "c8467345-3c27-4e38-b587-34c138b83531", "name": "Save Response", "type": "n8n-nodes-base.googleSheets", "position": [ 576, 480 ], "parameters": { "columns": { "value": { "name": "={{ $json.name }}", "comments": "={{ $json.comments }}", "timestamp": "={{ $json.timestamp }}", "department": "={{ $json.department }}", "feedback_date": "={{ $json.feedback_date }}" }, "schema": [ { "id": "name", "type": "string", "display": true, "required": false, "displayName": "name", "defaultMatch": false, "canBeUsedToMatch": true }, { "id": "department", "type": "string", "display": true, "required": false, "displayName": "department", "defaultMatch": false, "canBeUsedToMatch": true }, { "id": "feedback_date", "type": "string", "display": true, "required": false, "displayName": "feedback_date", "defaultMatch": false, "canBeUsedToMatch": true }, { "id": "comments", "type": "string", "display": true, "required": false, "displayName": "comments", "defaultMatch": false, "canBeUsedToMatch": true }, { "id": "timestamp", "type": "string", "display": true, "required": false, "displayName": "timestamp", "defaultMatch": false, "canBeUsedToMatch": true } ], "mappingMode": "defineBelow", "matchingColumns": [], "attemptToConvertTypes": false, "convertFieldsToString": false }, "options": {}, "operation": "append", "sheetName": { "__rl": true, "mode": "list", "value": 479587747, "cachedResultUrl": "https://docs.google.com/spreadsheets/d/1eAwCFWAICx3m9_ZCka0i0orrtMwcyRXbcunpgHFZc_k/edit#gid=479587747", "cachedResultName": "Form_Responses" }, "documentId": { "__rl": true, "mode": "list", "value": "1eAwCFWAICx3m9_ZCka0i0orrtMwcyRXbcunpgHFZc_k", "cachedResultUrl": "https://docs.google.com/spreadsheets/d/1eAwCFWAICx3m9_ZCka0i0orrtMwcyRXbcunpgHFZc_k/edit?usp=drivesdk", "cachedResultName": "Feedback Form" } }, "credentials": { "googleSheetsOAuth2Api": { "name": "" } }, "typeVersion": 4 }, { "id": "df5352fc-1a8a-45a3-9aba-8376ac1a912e", "name": "Convert HTML to PDF", "type": "@custom-js/n8n-nodes-pdf-toolkit-v2.pdfToolkit", "position": [ 736, 128 ], "parameters": { "html": "=\n\n\n\nKPI Dashbaord\n\n\n\n\n\n

\n\n\n\n\n ", "operation": "htmlToPdf", "pdfHeightMm": 120 }, "credentials": { "customJsApi": { "name": "" } }, "typeVersion": 1 }, { "id": "5100eb03-e81a-4c73-b1e0-d75aa2cbcb59", "name": "Sticky Note", "type": "n8n-nodes-base.stickyNote", "position": [ -544, 336 ], "parameters": { "color": 5, "width": 1504, "height": 320, "content": "## Handle Form responses\nReceives incoming form submissions via Webhook, adds a timestamp, and securely logs the data back into Google Sheets." }, "typeVersion": 1 }, { "id": "a4c762af-414f-4a5c-ba8d-2f26acd6cf98", "name": "Sticky Note1", "type": "n8n-nodes-base.stickyNote", "position": [ -544, -128 ], "parameters": { "color": 5, "width": 720, "height": 432, "content": "## Feedback Form Configuration\nRetrieves the form field definitions from Google Sheets and parses them into a structured JSON format." }, "typeVersion": 1 }, { "id": "69f54556-3f4c-4352-8917-0c3489dad32f", "name": "Sticky Note2", "type": "n8n-nodes-base.stickyNote", "position": [ 208, -128 ], "parameters": { "color": 5, "width": 400, "height": 432, "content": "## Generate & Host Form\nDynamically embeds the configuration into the HTML template and publishes the live page to CustomJs server." }, "typeVersion": 1 }, { "id": "773c2f78-50f6-481a-92c1-b27458298ef5", "name": "Sticky Note3", "type": "n8n-nodes-base.stickyNote", "position": [ 640, -128 ], "parameters": { "color": 5, "width": 320, "height": 432, "content": "## Generate QR Code\nConverts the HTML or form link into a PDF/QR code to make sharing and access effortless for your end users." }, "typeVersion": 1 }, { "id": "a7a3a097-fd49-4d27-9bb3-8916c512e67d", "name": "Schedule Trigger", "type": "n8n-nodes-base.scheduleTrigger", "position": [ -480, 160 ], "parameters": { "rule": { "interval": [ {} ] } }, "typeVersion": 1.3 }, { "id": "70797e42-6bcb-4bcc-b56a-3259fb0acece", "name": "Sticky Note4", "type": "n8n-nodes-base.stickyNote", "position": [ -960, -128 ], "parameters": { "color": 5, "width": 400, "height": 784, "content": "## Custom Interactive Forms\n\n### \ud83c\udf1f Overview\nThis workflow powers a fully dynamic, data-driven feedback system. \n\n### \ud83d\udcca Data Source & Integration\nIt automatically pulls form configuration settings (such as field types, dropdown options, and labels) directly from a Google Sheet and seamlessly injects them into a beautiful Tailwind CSS HTML template. \n\n### \u2699\ufe0f Core Processing\nThe workflow handles both generating the live form and listening for user submissions. \n\n### \ud83d\udd04 Triggers & Automation\nYou can trigger it manually whenever you update your form settings, or leave it on a schedule to ensure the live form is always perfectly synced with your spreadsheet.\n" }, "typeVersion": 1 } ], "active": true, "settings": { "executionOrder": "v1" }, "versionId": "f3557e7d-734a-4a1e-ae31-e29768d40bad", "connections": { "Add Timestamp": { "main": [ [ { "node": "Save Response", "type": "main", "index": 0 } ] ] }, "Format Config": { "main": [ [ { "node": "Generate HTML", "type": "main", "index": 0 } ] ] }, "Generate HTML": { "main": [ [ { "node": "Upsert HTML Page", "type": "main", "index": 0 } ] ] }, "Save Response": { "main": [ [] ] }, "Webhook (POST)": { "main": [ [ { "node": "Add Timestamp", "type": "main", "index": 0 } ] ] }, "Read Form Config": { "main": [ [ { "node": "Format Config", "type": "main", "index": 0 } ] ] }, "Schedule Trigger": { "main": [ [ { "node": "Read Form Config", "type": "main", "index": 0 } ] ] }, "Upsert HTML Page": { "main": [ [ { "node": "Convert HTML to PDF", "type": "main", "index": 0 } ] ] }, "When clicking \u2018Execute workflow\u2019": { "main": [ [ { "node": "Read Form Config", "type": "main", "index": 0 } ] ] } } }

All done!

{{$('Format Config').item.json.title}}