AI Solutions This workflow corresponds to n8n.io template #14981 — we link there as the canonical source.
The workflow JSON
Copy or download the full n8n JSON below. Paste it into a new n8n workflow, add your credentials, activate. Full import guide →
{
"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": "<your credential>"
}
},
"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 = '<div style=\"margin:0;padding:0;background-color:#f4f6f9;font-family:Arial,Helvetica,sans-serif;\">'\n + '<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"background-color:#f4f6f9;\">'\n + '<tr><td align=\"center\" style=\"padding:30px 15px;\">'\n + '<table width=\"600\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"max-width:600px;width:100%;\">'\n\n + '<tr>'\n + '<td align=\"center\" style=\"background-color:' + COLOR_HEADER + ';padding:28px 30px 20px 30px;border-radius:8px 8px 0 0;\">'\n + '<img src=\"' + LOGO_URL + '\" alt=\"' + BRAND_NAME + '\" width=\"200\" style=\"display:block;max-width:200px;height:auto;margin:0 auto 12px auto;\">'\n + '<p style=\"margin:0;color:#ffffff;font-size:13px;letter-spacing:1px;text-transform:uppercase;\">New Website Inquiry</p>'\n + '</td>'\n + '</tr>'\n\n + '<tr><td style=\"background-color:' + COLOR_ACCENT + ';height:4px;\"></td></tr>'\n\n + '<tr>'\n + '<td style=\"background-color:#ffffff;padding:32px 36px;\">'\n + '<p style=\"margin:0 0 22px 0;font-size:16px;color:' + COLOR_HEADER + ';font-weight:bold;\">You have received a new contact form submission.</p>'\n\n + '<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">'\n\n + '<tr>'\n + '<td width=\"130\" style=\"padding:10px 12px;background-color:#e8f0fb;border-radius:4px 0 0 4px;font-size:13px;font-weight:bold;color:' + COLOR_HEADER + ';vertical-align:top;\">Name</td>'\n + '<td style=\"padding:10px 14px;background-color:#f9fbff;border-radius:0 4px 4px 0;font-size:14px;color:#1a1a1a;vertical-align:top;\">' + name + '</td>'\n + '</tr>'\n\n + '<tr><td colspan=\"2\" style=\"height:6px;\"></td></tr>'\n\n + '<tr>'\n + '<td width=\"130\" style=\"padding:10px 12px;background-color:#e8f0fb;border-radius:4px 0 0 4px;font-size:13px;font-weight:bold;color:' + COLOR_HEADER + ';vertical-align:top;\">Email</td>'\n + '<td style=\"padding:10px 14px;background-color:#f9fbff;border-radius:0 4px 4px 0;font-size:14px;color:#1a1a1a;vertical-align:top;\"><a href=\"mailto:' + email + '\" style=\"color:' + COLOR_BUTTON + ';text-decoration:none;\">' + email + '</a></td>'\n + '</tr>'\n\n + '<tr><td colspan=\"2\" style=\"height:6px;\"></td></tr>'\n\n + '<tr>'\n + '<td width=\"130\" style=\"padding:10px 12px;background-color:#e8f0fb;border-radius:4px 0 0 4px;font-size:13px;font-weight:bold;color:' + COLOR_HEADER + ';vertical-align:top;\">Phone</td>'\n + '<td style=\"padding:10px 14px;background-color:#f9fbff;border-radius:0 4px 4px 0;font-size:14px;color:#1a1a1a;vertical-align:top;\"><a href=\"tel:' + phone + '\" style=\"color:' + COLOR_BUTTON + ';text-decoration:none;\">' + phone + '</a></td>'\n + '</tr>'\n\n + '<tr><td colspan=\"2\" style=\"height:6px;\"></td></tr>'\n\n + '<tr>'\n + '<td width=\"130\" style=\"padding:10px 12px;background-color:#e8f0fb;border-radius:4px 0 0 4px;font-size:13px;font-weight:bold;color:' + COLOR_HEADER + ';vertical-align:top;\">Date / Time</td>'\n + '<td style=\"padding:10px 14px;background-color:#f9fbff;border-radius:0 4px 4px 0;font-size:14px;color:#1a1a1a;vertical-align:top;\">' + date + '</td>'\n + '</tr>'\n\n + '<tr><td colspan=\"2\" style=\"height:6px;\"></td></tr>'\n\n + '<tr>'\n + '<td width=\"130\" style=\"padding:10px 12px;background-color:#e8f0fb;border-radius:4px 0 0 4px;font-size:13px;font-weight:bold;color:' + COLOR_HEADER + ';vertical-align:top;\">Message</td>'\n + '<td style=\"padding:10px 14px;background-color:#f9fbff;border-radius:0 4px 4px 0;font-size:14px;color:#1a1a1a;vertical-align:top;line-height:1.6;\">' + message + '</td>'\n + '</tr>'\n\n + '</table>'\n\n + '<div style=\"text-align:center;margin-top:28px;\">'\n + '<a href=\"mailto:' + email + '\" style=\"display:inline-block;background-color:' + COLOR_BUTTON + ';color:#ffffff;text-decoration:none;font-size:14px;font-weight:bold;padding:12px 32px;border-radius:5px;letter-spacing:0.5px;\">Reply to ' + name + '</a>'\n + '</div>'\n\n + '</td>'\n + '</tr>'\n\n + '<tr>'\n + '<td style=\"background-color:' + COLOR_HEADER + ';padding:18px 30px;border-radius:0 0 8px 8px;text-align:center;\">'\n + '<p style=\"margin:0;font-size:12px;color:#a8c4e0;\">' + BRAND_NAME + ' • ' + BRAND_WEBSITE + '</p>'\n + '<p style=\"margin:6px 0 0 0;font-size:11px;color:#6a93bb;\">This notification was sent automatically from your website contact form.</p>'\n + '</td>'\n + '</tr>'\n\n + '</table>'\n + '</td></tr>'\n + '</table>'\n + '</div>';\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
}
]
]
}
}
}
Credentials you'll need
Each integration node will prompt for credentials when you import. We strip credential IDs before publishing — you'll add your own.
microsoftSharePointOAuth2Api
Pro
For the full experience including quality scoring and batch install features for each workflow upgrade to Pro
About this workflow
This workflow fires whenever a visitor submits a contact form on your website.
Source: https://n8n.io/workflows/14981/ — original creator credit. Request a take-down →
Related workflows
Workflows that share integrations, category, or trigger type with this one. All free to copy and import.
Automate WhatsApp communication for recruitment agencies with an interactive, structured customer experience. This workflow handles pricing inquiries, request submissions, tracking, complaints, and hu
HTTP Request, Google Sheets, Gmail +1
Code. Uses googleSheets, gmail, supabase, stickyNote. Webhook trigger; 51 nodes.
Google Sheets, Gmail, Supabase +1
This template turns Podium's conversation inbox into a full sales CRM with a custom funnel, AI message classification, automated drip follow-ups, daily admin reports, and a live Kanban dashboard. Six
HTTP Request, Google Sheets, Gmail
Suspicious_login_detection. Uses postgres, httpRequest, noOp, html. Webhook trigger; 43 nodes.
Postgres, HTTP Request, Gmail +1
This n8n workflow is designed for security monitoring and incident response when suspicious login events are detected. It can be initiated either manually from within the n8n UI for testing or automat
Postgres, HTTP Request, Gmail +1