{ "id": "TcrHaQAWIeGsHHS0", "name": "My workflow", "tags": [], "nodes": [ { "id": "5c7eafd7-ca03-4541-8915-e2f936f92e81", "name": "Sticky Note", "type": "n8n-nodes-base.stickyNote", "position": [ 256, -480 ], "parameters": { "width": 480, "height": 816, "content": "## My workflow\n\n### How it works\n\nThis workflow handles contact form submissions from a website. It receives the webhook payload, normalizes key form fields, builds email content, sends notifications to both the site admin and visitor, then returns a success response to the website.\n\n### Setup steps\n\n- Configure the webhook URL in the website contact form so submissions are sent to the n8n webhook trigger.\n- Review the field mappings in the normalization step to match the form payload keys for name, email, subject, message, and timestamp.\n- Connect and authorize the Gmail credentials used by both email-sending nodes.\n- Set the admin recipient address and verify the visitor confirmation email uses the submitted email address.\n- Test the workflow with a sample form submission and confirm both emails are delivered and the website receives a success response.\n\n### Customization\n\nCustomize the email templates in the code node, update the admin recipient, or add validation/spam checks before sending emails." }, "typeVersion": 1 }, { "id": "810dad9b-7344-4c14-9ffe-4ffddbca0b6d", "name": "Sticky Note1", "type": "n8n-nodes-base.stickyNote", "position": [ 816, -384 ], "parameters": { "color": 7, "width": 640, "height": 336, "content": "## Receive and prepare form\n\nCaptures the incoming contact form webhook submission, standardizes the submitted fields, and builds the admin and visitor email payloads. These nodes form the left-side preparation cluster before any messages are sent." }, "typeVersion": 1 }, { "id": "f8f4bad8-75c6-44f6-a8ec-5e7d6c46856e", "name": "Sticky Note2", "type": "n8n-nodes-base.stickyNote", "position": [ 1488, -432 ], "parameters": { "color": 7, "width": 416, "height": 464, "content": "## Send notification emails\n\nSends the prepared email content through Gmail, first notifying the administrator of the new submission and then sending a confirmation email to the visitor. These two Gmail nodes sit together in the central-right email delivery cluster." }, "typeVersion": 1 }, { "id": "ab83a664-9b73-4081-a535-fa5dc4f2721e", "name": "Sticky Note3", "type": "n8n-nodes-base.stickyNote", "position": [ 1936, -480 ], "parameters": { "color": 7, "height": 432, "content": "## Return website response\n\nCompletes the webhook request by returning a success response to the website after both emails have been sent. This final response node is positioned at the far right as the workflow endpoint." }, "typeVersion": 1 }, { "id": "65b080f9-9624-4c70-ad8d-f933314c5160", "name": "When Form Submitted", "type": "n8n-nodes-base.webhook", "position": [ 864, -208 ], "parameters": { "path": "portfolio-contact", "options": {}, "httpMethod": "POST", "responseMode": "responseNode" }, "typeVersion": 2 }, { "id": "1d2cceeb-a257-48f5-b7c0-4130aae0297d", "name": "Set Contact Form Data", "type": "n8n-nodes-base.set", "position": [ 1088, -208 ], "parameters": { "options": {}, "assignments": { "assignments": [ { "id": "c1", "name": "timestamp", "type": "string", "value": "={{ $now.toISO() }}" }, { "id": "c2", "name": "name", "type": "string", "value": "={{ $json.body?.name ?? $json.name }}" }, { "id": "c3", "name": "email", "type": "string", "value": "={{ $json.body?.email ?? $json.email }}" }, { "id": "c4", "name": "subject", "type": "string", "value": "={{ $json.body?.subject ?? $json.subject }}" }, { "id": "c5", "name": "message", "type": "string", "value": "={{ $json.body?.message ?? $json.message }}" } ] } }, "typeVersion": 3.4 }, { "id": "0f5c7115-38d9-4a06-b63c-d81dc043917f", "name": "Compose Emails for Admin & Visitor", "type": "n8n-nodes-base.code", "position": [ 1312, -208 ], "parameters": { "jsCode": "const item = $input.first().json;\n\nconst d = {\n timestamp: String(item.timestamp ?? ''),\n name: String(item.name ?? ''),\n email: String(item.email ?? ''),\n subject: String(item.subject ?? ''),\n message: String(item.message ?? ''),\n};\n\nfunction esc(value) {\n return String(value ?? '')\n .replace(/&/g, '&')\n .replace(//g, '>')\n .replace(/\"/g, '"')\n .replace(/\\n/g, '
');\n}\n\nconst brand = '#343a9e';\nconst brandLight = '#eef0fa';\n\nconst row = (label, value) =>\n `\n ${label}\n ${value}\n `;\n\nconst adminHtml = `\n\n\n\n \n \n
\n \n \n \n \n \n
\n

Portfolio Contact Form

\n

New Contact Message

\n
\n

Someone submitted the contact form on your portfolio. Details below.

\n \n ${row('Name', esc(d.name))}\n ${row('Email', `${esc(d.email)}`)}\n ${row('Subject', esc(d.subject))}\n ${row('Message', esc(d.message))}\n ${row('Submitted', esc(d.timestamp))}\n
\n
\n Reply to ${esc(d.name)}\n
\n

Umar Imran Portfolio \u00b7

\n
\n
\n\n`;\n\nconst customerHtml = `\n\n\n\n \n \n
\n \n \n \n \n
\n

Umar.

\n

Full Stack Engineer & Shopify Developer

\n
\n

Thanks for reaching out!

\n

Hi ${esc(d.name)},

I've received your message and will get back to you as soon as possible \u2014 usually within 24\u201348 hours.

\n \n \n \n \n \n \n \n \n \n \n
\n

Your Message Summary

\n
Subject${esc(d.subject)}
Message${esc(d.message)}
\n
\n

What happens next?

\n

I'll review your inquiry and reply directly to ${esc(d.email)}. For urgent projects, feel free to mention a timeline in your message.

\n
\n
\n

Prefer a call? Schedule on my portfolio

\n umar.asasosiatix.online\n

\u00a9 Umar Imran \u00b7 This is an automated confirmation

\n
\n
\n\n`;\n\nreturn [\n {\n json: {\n name: d.name,\n email: d.email,\n subject: d.subject,\n message: d.message,\n timestamp: d.timestamp,\n adminSubject: `New Contact \u2014 ${d.name}: ${d.subject}`,\n adminHtml,\n customerSubject: `We received your message \u2014 ${d.subject}`,\n customerHtml,\n },\n },\n];\n" }, "typeVersion": 2 }, { "id": "b7ca5b9a-2f2f-4db9-ac40-8e31d16d0875", "name": "Send Admin Notification Email", "type": "n8n-nodes-base.gmail", "position": [ 1536, -208 ], "parameters": { "sendTo": "user@example.com", "message": "={{ $('Compose Emails for Admin & Visitor').first().json.adminHtml }}", "options": {}, "subject": "={{ $('Compose Emails for Admin & Visitor').first().json.adminSubject }}" }, "credentials": { "gmailOAuth2": { "name": "" } }, "typeVersion": 2.1 }, { "id": "06c00647-adc5-427a-b992-c9ec48245e2d", "name": "Send Confirmation Email to Visitor", "type": "n8n-nodes-base.gmail", "position": [ 1760, -208 ], "parameters": { "sendTo": "={{ $('Compose Emails for Admin & Visitor').first().json.email }}", "message": "={{ $('Compose Emails for Admin & Visitor').first().json.customerHtml }}", "options": {}, "subject": "={{ $('Compose Emails for Admin & Visitor').first().json.customerSubject }}" }, "credentials": { "gmailOAuth2": { "name": "" } }, "typeVersion": 2.1 }, { "id": "477206a5-1255-4160-bdd5-4ecdc0f13322", "name": "Acknowledge Form Submission Success", "type": "n8n-nodes-base.respondToWebhook", "position": [ 1984, -208 ], "parameters": { "options": { "responseCode": 200 }, "respondWith": "json", "responseBody": "={{ { \"success\": true, \"message\": \"Contact emails sent\" } }}" }, "typeVersion": 1.1 } ], "active": false, "settings": { "binaryMode": "separate", "executionOrder": "v1" }, "versionId": "6bfbdc72-b85f-45ba-b77b-e2f2384ffc79", "nodeGroups": [], "connections": { "When Form Submitted": { "main": [ [ { "node": "Set Contact Form Data", "type": "main", "index": 0 } ] ] }, "Set Contact Form Data": { "main": [ [ { "node": "Compose Emails for Admin & Visitor", "type": "main", "index": 0 } ] ] }, "Send Admin Notification Email": { "main": [ [ { "node": "Send Confirmation Email to Visitor", "type": "main", "index": 0 } ] ] }, "Compose Emails for Admin & Visitor": { "main": [ [ { "node": "Send Admin Notification Email", "type": "main", "index": 0 } ] ] }, "Send Confirmation Email to Visitor": { "main": [ [ { "node": "Acknowledge Form Submission Success", "type": "main", "index": 0 } ] ] } } }