{ "id": "ZLWKWXVqEITCkXY3", "name": "Website Contact Form Processor", "tags": [], "nodes": [ { "id": "2c8335a0-62db-4c02-85da-a4c389e49d0a", "name": "Overview", "type": "n8n-nodes-base.stickyNote", "position": [ 0, 0 ], "parameters": { "width": 440, "height": 768, "content": "## Website Contact Form Processor\n\n### How it works\nThis workflow fires whenever a visitor submits a contact form on your website.\n\n1. **Webhook** receives the POST payload (Name, Email, Phone, Message, Date, Time) from your website form.\n2. **Log Submission to SharePoint** writes each field into a SharePoint list for permanent record-keeping.\n3. **Build Branded Email HTML** \u2014 Code node constructs a fully branded HTML notification email (customize colors and logo to match your brand).\n4. **Send Email Notification** delivers the notification via Gmail to your designated recipient address, with Reply-To automatically set to the submitter's email so you can respond in one click.\n\n### Setup\n1. Connect your **Microsoft SharePoint** credential and select your target site and list.\n2. Connect your **Gmail OAuth2** credential.\n3. In the **Send Email Notification** node, enter the recipient email address in the `Send To` field.\n4. In the **Build Branded Email HTML** node, replace the placeholder logo URL and brand name with your own.\n5. Point your website form's action URL to the webhook path: `form-processor`.\n\n### Customization\n- To CC or BCC additional staff, add those addresses in the Gmail node Options.\n- Adjust brand colors in the Code node (search for the hex color values).\n- To add or remove SharePoint columns, update both the `columns` mapping and the list schema in the SharePoint node." }, "typeVersion": 1 }, { "id": "d3286a06-1c5f-4131-ae7e-525ca5211168", "name": "Section - SharePoint", "type": "n8n-nodes-base.stickyNote", "position": [ 496, 32 ], "parameters": { "color": 7, "width": 332, "height": 300, "content": "## \ud83d\udccb Log to SharePoint\nWrites all form fields to the **SharePoint** list for record-keeping." }, "typeVersion": 1 }, { "id": "7c30d3b0-59c9-4c02-bf9e-4e38e1b0b57b", "name": "Section - Email", "type": "n8n-nodes-base.stickyNote", "position": [ 832, 32 ], "parameters": { "color": 7, "width": 340, "height": 300, "content": "## \u2709\ufe0f Notify Recipient\nBuilds branded HTML email and delivers via Gmail.\nReply-To is set to the submitter's address." }, "typeVersion": 1 }, { "id": "55bd6d24-fd8a-4ac8-995c-027ba4a1a4db", "name": "Webhook", "type": "n8n-nodes-base.webhook", "position": [ 544, 144 ], "parameters": { "path": "form-processor", "options": {}, "httpMethod": "POST" }, "typeVersion": 2.1 }, { "id": "596a68c8-738c-4fe0-a9b8-32c6dac1d88e", "name": "Log Submission to SharePoint", "type": "n8n-nodes-base.microsoftSharePoint", "position": [ 688, 144 ], "parameters": { "site": { "__rl": true, "mode": "list", "value": "", "cachedResultName": "-- Select your SharePoint site --" }, "resource": "item", "operation": "create", "requestOptions": {} }, "credentials": { "microsoftSharePointOAuth2Api": { "name": "" } }, "typeVersion": 1 }, { "id": "3cf18597-124f-4e14-b5c6-008d488300fe", "name": "Build Branded Email HTML", "type": "n8n-nodes-base.code", "position": [ 880, 144 ], "parameters": { "jsCode": "const body = $('Webhook').first().json.body;\n\nconst name = body.Name || '(not provided)';\nconst email = body.Email || '(not provided)';\nconst phone = body.Phone || '(not provided)';\nconst message = body.Message || '(not provided)';\nconst date = (body.Date || '') + (body.Time ? ' at ' + body.Time : '');\n\n// ---- CUSTOMIZE BELOW ----\n// Replace the logo URL with your own hosted image URL.\n// Replace 'Your Company Name' and 'yourwebsite.com' with your brand details.\n// Adjust hex color values to match your brand palette.\nconst LOGO_URL = 'https://yourwebsite.com/path/to/your-logo.png';\nconst BRAND_NAME = 'Your Company Name';\nconst BRAND_WEBSITE = 'yourwebsite.com';\nconst COLOR_HEADER = '#004080'; // Primary / header background\nconst COLOR_ACCENT = '#ffc107'; // Accent stripe\nconst COLOR_BUTTON = '#008080'; // CTA button\n// ---- END CUSTOMIZE ----\n\nconst html = '
'\n + ''\n + ''\n + '
'\n + ''\n\n + ''\n + ''\n + ''\n\n + ''\n\n + ''\n + ''\n + ''\n\n + ''\n + ''\n + ''\n\n + '
'\n + '\"''\n + '

New Website Inquiry

'\n + '
'\n + '

You have received a new contact form submission.

'\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\n + '
Name' + name + '
Email' + email + '
Phone' + phone + '
Date / Time' + date + '
Message' + message + '
'\n\n + '
'\n + 'Reply to ' + name + ''\n + '
'\n\n + '
'\n + '

' + BRAND_NAME + ' • ' + BRAND_WEBSITE + '

'\n + '

This notification was sent automatically from your website contact form.

'\n + '
'\n + '
'\n + '
';\n\nreturn [{ json: { html, name, email, phone, date, message } }];" }, "typeVersion": 2 }, { "id": "7631f638-a2a7-4dbd-aa45-4b12a8ef8a96", "name": "Send Email Notification", "type": "n8n-nodes-base.gmail", "position": [ 1056, 144 ], "parameters": { "sendTo": "user@example.com", "message": "={{ $json.html }}", "options": { "replyTo": "={{ $json.email }}", "appendAttribution": false }, "subject": "=New Website Inquiry from {{ $json.name }}" }, "typeVersion": 2.2 }, { "id": "ad643bac-2091-4ce7-8d89-83a3862632c5", "name": "Sticky Note", "type": "n8n-nodes-base.stickyNote", "position": [ 720, 368 ], "parameters": { "color": 5, "width": 512, "height": 304, "content": "## Update this part of the Build Branded Email HTML node with your information\n\nconst LOGO_URL = 'https://yourwebsite.com/path/to/your-logo.png';\nconst BRAND_NAME = 'Your Company Name';\nconst BRAND_WEBSITE = 'yourwebsite.com';\nconst COLOR_HEADER = '#004080'; // Primary / header background\nconst COLOR_ACCENT = '#ffc107'; // Accent stripe\nconst COLOR_BUTTON = '#008080'; // CTA button" }, "typeVersion": 1 } ], "active": false, "settings": { "binaryMode": "separate", "executionOrder": "v1" }, "versionId": "8d3b3e46-c613-46f8-8ca6-de3a230b272f", "connections": { "Webhook": { "main": [ [ { "node": "Log Submission to SharePoint", "type": "main", "index": 0 } ] ] }, "Build Branded Email HTML": { "main": [ [ { "node": "Send Email Notification", "type": "main", "index": 0 } ] ] }, "Log Submission to SharePoint": { "main": [ [ { "node": "Build Branded Email HTML", "type": "main", "index": 0 } ] ] } } }