AutomationFlowsGeneral › N8n Contact Form Workflow

N8n Contact Form Workflow

ByAkhil Varma Gadiraju @akhilv7 on n8n.io

This n8n workflow facilitates contact form submissions through a customizable form that sends an email notification to support and redirects users based on the submission outcome. It is ideal for embedding a functional "Contact Us" form on websites with automated email…

Event trigger★★★★☆ complexity13 nodesForm TriggerFormEmail Send
General Trigger: Event Nodes: 13 Complexity: ★★★★☆ Added:

This workflow corresponds to n8n.io template #4337 — we link there as the canonical source.

This workflow follows the Emailsend → Form Trigger recipe pattern — see all workflows that pair these two integrations.

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 →

Download .json
{
  "meta": {
    "templateCredsSetupCompleted": true
  },
  "nodes": [
    {
      "id": "ae78f14b-8e88-40ca-a5f3-39344aee3ea7",
      "name": "On form submission",
      "type": "n8n-nodes-base.formTrigger",
      "position": [
        -560,
        -60
      ],
      "parameters": {
        "options": {
          "path": "contact-us",
          "ignoreBots": false,
          "buttonLabel": "Submit",
          "appendAttribution": false,
          "useWorkflowTimezone": true
        },
        "formTitle": "Contact Us",
        "formFields": {
          "values": [
            {
              "fieldLabel": "First Name",
              "placeholder": "eg: John",
              "requiredField": true
            },
            {
              "fieldLabel": "Last Name",
              "placeholder": "eg: Doe",
              "requiredField": true
            },
            {
              "fieldType": "email",
              "fieldLabel": "Email",
              "placeholder": "eg: user@example.com",
              "requiredField": true
            },
            {
              "fieldLabel": "Company",
              "placeholder": "eg: Apple Inc"
            },
            {
              "fieldType": "textarea",
              "fieldLabel": "Message",
              "placeholder": "Type your message here ...",
              "requiredField": true
            }
          ]
        },
        "formDescription": "We'll get back to you soon."
      },
      "typeVersion": 2.2
    },
    {
      "id": "ae23881c-6084-4392-8c7c-16058839345c",
      "name": "Redirect Form",
      "type": "n8n-nodes-base.form",
      "position": [
        320,
        -160
      ],
      "parameters": {
        "operation": "completion",
        "redirectUrl": "https://www.linkedin.com/in/akhilv7/",
        "respondWith": "redirect"
      },
      "typeVersion": 1
    },
    {
      "id": "807425c4-f058-4e94-82bd-72e856c4e27c",
      "name": "Confirmation Form",
      "type": "n8n-nodes-base.form",
      "position": [
        100,
        -160
      ],
      "parameters": {
        "options": {
          "formTitle": "\u2705 Thank You!",
          "buttonLabel": "Redirect to Home"
        },
        "formFields": {
          "values": [
            {
              "html": "<html>\n<head>\n  <meta charset=\"UTF-8\">\n</head>\n<body style=\"margin:0;padding:0;background:linear-gradient(135deg,#e0f7ec,#f0fff5);height:100vh;display:flex;justify-content:center;align-items:center;\">\n  <div style=\"background:#fff;border:1px solid #d1e7dd;border-radius:12px;padding:50px 60px;box-shadow:0 6px 20px rgba(0,0,0,0.1);text-align:center;\">\n    <div style=\"font-size:20px;color:#333;\">\n      Your message has been received. We\u2019ll get back to you shortly.\n    </div>\n  </div>\n</body>\n</html>\n",
              "fieldType": "html"
            }
          ]
        }
      },
      "typeVersion": 1
    },
    {
      "id": "b5a85199-8398-4a11-9c4a-82c27385e531",
      "name": "If Email Sent",
      "type": "n8n-nodes-base.if",
      "position": [
        -120,
        -60
      ],
      "parameters": {
        "options": {},
        "conditions": {
          "options": {
            "version": 2,
            "leftValue": "",
            "caseSensitive": true,
            "typeValidation": "strict"
          },
          "combinator": "and",
          "conditions": [
            {
              "id": "910ddd40-a124-4826-987b-5c6aef997a7a",
              "operator": {
                "type": "string",
                "operation": "exists",
                "singleValue": true
              },
              "leftValue": "={{ $json.messageId }}",
              "rightValue": ""
            }
          ]
        }
      },
      "typeVersion": 2.2
    },
    {
      "id": "9d7387fa-b861-45f7-897f-a985d5e07cac",
      "name": "Send Email to Support",
      "type": "n8n-nodes-base.emailSend",
      "position": [
        -340,
        -60
      ],
      "parameters": {
        "html": "=<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <title>New Contact Submission</title>\n  </head>\n  <body\n    style=\"\n      margin: 0;\n      padding: 0;\n      background-color: #f4f6f8;\n      font-family: Arial, sans-serif;\n    \"\n  >\n    <table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" style=\"padding: 20px\">\n      <tr>\n        <td align=\"center\">\n          <table\n            width=\"600\"\n            cellpadding=\"0\"\n            cellspacing=\"0\"\n            style=\"\n              background-color: #ffffff;\n              border: 1px solid #e0e0e0;\n              border-radius: 8px;\n              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n              padding: 30px;\n            \"\n          >\n            <tr>\n              <td\n                style=\"\n                  text-align: center;\n                  font-size: 22px;\n                  font-weight: bold;\n                  color: #333333;\n                  padding-bottom: 20px;\n                \"\n              >\n                \ud83d\udcec New Contact Submission\n              </td>\n            </tr>\n\n            <tr>\n              <td style=\"border-top: 1px solid #eaeaea; padding-top: 20px\"></td>\n            </tr>\n\n            <tr>\n              <td style=\"font-size: 16px; color: #333; padding: 10px 0\">\n                <strong>First Name:</strong> {{ $json['First Name'] }}\n              </td>\n            </tr>\n\n            <tr>\n              <td\n                style=\"\n                  font-size: 16px;\n                  color: #333;\n                  padding: 10px 0;\n                  border-top: 1px solid #f0f0f0;\n                \"\n              >\n                <strong>Last Name:</strong> {{ $json['Last Name'] }}\n              </td>\n            </tr>\n\n            <tr>\n              <td\n                style=\"\n                  font-size: 16px;\n                  color: #333;\n                  padding: 10px 0;\n                  border-top: 1px solid #f0f0f0;\n                \"\n              >\n                <strong>Email:</strong> {{ $json.Company }}\n              </td>\n            </tr>\n\n            <tr>\n              <td\n                style=\"\n                  font-size: 16px;\n                  color: #333;\n                  padding: 10px 0;\n                  border-top: 1px solid #f0f0f0;\n                \"\n              >\n                <strong>Company:</strong> {{ $json.Company }}\n              </td>\n            </tr>\n\n            <tr>\n              <td\n                style=\"\n                  font-size: 16px;\n                  color: #333;\n                  padding: 10px 0;\n                  border-top: 1px solid #f0f0f0;\n                \"\n              >\n                <strong>Message:</strong>\n                <div\n                  style=\"\n                    margin-top: 8px;\n                    padding: 12px;\n                    background: #f9fafb;\n                    border-left: 4px solid #28a745;\n                    border-radius: 4px;\n                    color: #555;\n                  \"\n                >\n                  {{ $json.Message }}\n                </div>\n              </td>\n            </tr>\n\n            <tr>\n              <td\n                style=\"\n                  font-size: 12px;\n                  color: #999;\n                  text-align: center;\n                  padding-top: 30px;\n                  border-top: 1px solid #eaeaea;\n                \"\n              >\n                This message was submitted via the contact form on your website.\n              </td>\n            </tr>\n          </table>\n        </td>\n      </tr>\n    </table>\n  </body>\n</html>\n",
        "options": {
          "appendAttribution": false
        },
        "subject": "=\ud83d\udd14 New Contact Form Submission from {{ $json['First Name'] }} {{ $json['Last Name'] }}",
        "toEmail": "user@example.com",
        "fromEmail": "user@example.com"
      },
      "credentials": {
        "smtp": {
          "name": "<your credential>"
        }
      },
      "typeVersion": 2.1
    },
    {
      "id": "c6feba50-13b0-46db-9349-e57ae8f758db",
      "name": "Form",
      "type": "n8n-nodes-base.form",
      "position": [
        100,
        40
      ],
      "parameters": {
        "options": {},
        "operation": "completion",
        "completionTitle": "Oops! Something Went Wrong",
        "completionMessage": "We couldn\u2019t process your submission. Please try again later."
      },
      "typeVersion": 1
    },
    {
      "id": "6822eb0f-e6d0-4e47-9779-b02e6c6c0b9e",
      "name": "End (Success)",
      "type": "n8n-nodes-base.noOp",
      "position": [
        540,
        -160
      ],
      "parameters": {},
      "typeVersion": 1
    },
    {
      "id": "3b5cdccd-0f8f-474e-9297-a6952f9b403a",
      "name": "End (Error)",
      "type": "n8n-nodes-base.noOp",
      "position": [
        320,
        40
      ],
      "parameters": {},
      "typeVersion": 1
    },
    {
      "id": "33928014-6602-4396-ab65-df189a1787fb",
      "name": "Sticky Note",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -620,
        -180
      ],
      "parameters": {
        "height": 100,
        "content": "### Customize Fields \nChange the form fields, title, or descriptions in the formTrigger node."
      },
      "typeVersion": 1
    },
    {
      "id": "8eb0b887-1fb0-4f76-975a-8b9acb1d296c",
      "name": "Sticky Note1",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -380,
        100
      ],
      "parameters": {
        "color": 4,
        "height": 80,
        "content": "### Customize Email \nUpdate the email body or subject in the emailSend node."
      },
      "typeVersion": 1
    },
    {
      "id": "20b3562d-6ebd-4b68-80ee-ceeaf66887b3",
      "name": "Sticky Note2",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        0,
        -260
      ],
      "parameters": {
        "width": 260,
        "height": 80,
        "content": "### Customize Message Content\nChange custom html content"
      },
      "typeVersion": 1
    },
    {
      "id": "5becd350-ac1b-4f5b-b213-975bccbb1455",
      "name": "Sticky Note3",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        280,
        -260
      ],
      "parameters": {
        "height": 80,
        "content": "### Change Redirect URL \nRedirect to a different URL by editing the Redirect Form node."
      },
      "typeVersion": 1
    },
    {
      "id": "4b570ac9-606c-452c-b640-582f4758bfcc",
      "name": "Sticky Note4",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        20,
        200
      ],
      "parameters": {
        "width": 280,
        "height": 100,
        "content": "### Change Message\nConfigure the Error Message Output to Meet Your Implementation Requirements."
      },
      "typeVersion": 1
    }
  ],
  "connections": {
    "Form": {
      "main": [
        [
          {
            "node": "End (Error)",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "If Email Sent": {
      "main": [
        [
          {
            "node": "Confirmation Form",
            "type": "main",
            "index": 0
          }
        ],
        [
          {
            "node": "Form",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Redirect Form": {
      "main": [
        [
          {
            "node": "End (Success)",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Confirmation Form": {
      "main": [
        [
          {
            "node": "Redirect Form",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "On form submission": {
      "main": [
        [
          {
            "node": "Send Email to Support",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Send Email to Support": {
      "main": [
        [
          {
            "node": "If Email Sent",
            "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.

Pro

For the full experience including quality scoring and batch install features for each workflow upgrade to Pro

About this workflow

This n8n workflow facilitates contact form submissions through a customizable form that sends an email notification to support and redirects users based on the submission outcome. It is ideal for embedding a functional "Contact Us" form on websites with automated email…

Source: https://n8n.io/workflows/4337/ — original creator credit. Request a take-down →

More General workflows → · Browse all categories →

Related workflows

Workflows that share integrations, category, or trigger type with this one. All free to copy and import.

General

Waitlist Form Stored In Googlesheet With Email Verification Step. Uses googleSheets, emailSend, form, stickyNote. Event-driven trigger; 19 nodes.

Google Sheets, Email Send, Form +2
General

xSend and check TTS (Text-to-speech) voice calls end email verification. Uses stickyNote, httpRequest, formTrigger, emailSend. Event-driven trigger; 19 nodes.

HTTP Request, Form Trigger, Email Send +1
General

This interactive tutorial teaches you how to build in n8n from scratch, using a live walkthrough with real-time examples. Rather than static documentation, this guided workflow explains key n8n concep

Form Trigger, Form
General

This workflow contains community nodes that are only compatible with the self-hosted version of n8n.

Form Trigger, n8n, Form +2
General

Credentials Transfer. Uses form, httpRequest, executeCommand, readWriteFile. Event-driven trigger; 22 nodes.

Form, HTTP Request, Execute Command +2