DEV Community

Cover image for n8n Webhook to Email Tutorial: Build Instant Form-to-Inbox Automation
Sam Chen
Sam Chen

Posted on Originally published at getaab.com

n8n Webhook to Email Tutorial: Build Instant Form-to-Inbox Automation

You build an n8n webhook-to-email automation by setting up a Webhook node as a trigger, connecting it to a Send Email node, and mapping the incoming POST data to email fields using expressions like {{ $json.body.email }}. This creates an instant pipeline that converts any HTTP POST request into a formatted email notification.

n8n is an open-source workflow automation platform that connects apps and services through visual node-based workflows, letting you build integrations without writing code.

This n8n webhook to email tutorial walks through the exact setup to turn web forms, API calls, or any HTTP request into email notifications. You'll get a working automation that handles contact forms, lead notifications, or system alerts - with proper error handling and response management.

What you need

Tool Plan/Price Role
n8n Community Edition (self-hosted) Free Workflow engine
n8n Cloud 20€/month (Starter) Hosted alternative
Email provider (Gmail/SMTP) Free/varies Email delivery
Domain/hosting Varies Webhook endpoint

Time to build: 15-30 minutes for basic setup, plus email credential configuration.

1. Set up your n8n webhook trigger

Create a new workflow in n8n and add a Webhook node as your starting trigger. In the Webhook node settings:

  • HTTP Method: POST
  • Path: /contact-form (or your preferred endpoint)
  • Authentication: None (for public forms)
  • Respond: "Immediately" (for simple confirmations)

Your webhook URL will be https://your-n8n-instance.com/webhook/contact-form. The webhook automatically generates a unique endpoint - copy this URL for your form's action attribute.

For self-hosted n8n, the default webhook base URL follows the pattern http://localhost:5678/webhook/ during development.

2. Add email credentials

Before connecting the Send Email node, configure your email provider credentials in n8n's credential manager:

For Gmail (recommended for testing):

  • Go to Credentials → Create New
  • Select "Gmail OAuth2 API"
  • Follow the OAuth flow to authorize n8n

For SMTP (production use):

  • Create "SMTP" credential
  • Enter your provider's SMTP settings (host, port, security)
  • Use app passwords for Gmail/Office 365

3. Connect the Send Email node

Add a Send Email node and connect it to your Webhook node. Configure these fields using expressions to pull data from the incoming POST body:

  • To: {{ $json.body.email }} (sender's email for confirmation)
  • CC: your-notifications@company.com (your notification address)
  • Subject: New contact form submission from {{ $json.body.name }}
  • Text: Use the message body expression: {{ $json.body.message }}

Here's the critical part of this n8n webhook to email tutorial: incoming POST data is nested under $json.body, not directly in $json. A form field named 'email' becomes {{ $json.body.email }} in your expressions.

{
 "parameters": {
 "toEmail": "={{ $json.body.email }}",
 "ccEmail": "notifications@yourcompany.com",
 "subject": "=New form submission from {{ $json.body.name }}",
 "text": "=Name: {{ $json.body.name }}\nEmail: {{ $json.body.email }}\nMessage: {{ $json.body.message }}\n\nSubmitted at: {{ $now }}"
 }
}
Enter fullscreen mode Exit fullscreen mode

This Send Email node configuration pulls form data from the webhook body and formats it into a readable notification.

4. Add response handling (optional)

For better user experience, add a "Respond to Webhook" node after your Send Email node. First, change your Webhook node's Respond setting to "Using 'Respond to Webhook' Node".

In the Respond to Webhook node:

  • Response Code: 200
  • Response Body: {"status": "success", "message": "Thank you! We'll be in touch soon."}
  • Response Headers: Content-Type: application/json

This sends a proper JSON response back to your form instead of n8n's default confirmation.

5. Test your webhook automation

Use curl to test your endpoint with sample data:

curl -X POST https://your-n8n-instance.com/webhook/contact-form \
 -H "Content-Type: application/json" \
 -d '{
 "name": "Test User",
 "email": "test@example.com", 
 "message": "This is a test submission"
 }'
Enter fullscreen mode Exit fullscreen mode

This curl command simulates a form submission to verify your webhook processes data correctly and sends the email.

Check your email inbox for the formatted notification. The automation should send emails within 2-3 seconds of receiving the webhook request.

Where this breaks

Rate limiting: n8n Cloud's Starter plan caps at 2,500 workflow executions monthly (roughly 83 per day). High-traffic forms will hit this limit fast. Self-hosted n8n has no execution limits but your email provider does - Gmail allows 500 emails daily, most SMTP providers limit to 100-300 per hour.

Authentication failures: OAuth tokens expire. Gmail OAuth tokens last 1 hour but n8n auto-refreshes them. If emails stop sending, check Credentials → Gmail OAuth2 → Test Connection. SMTP credentials fail when providers require app passwords instead of regular passwords.

Malformed webhook data: If your form sends fields n8n doesn't expect, expressions like {{ $json.body.nonexistent_field }} resolve to empty strings. Always validate required fields exist using an IF node before the Send Email node. Check for {{ $json.body.email !== undefined && $json.body.email !== "" }}.

Memory overflow: Large file uploads in webhook POST bodies can crash n8n workflows. The Community Edition has no built-in file size limits - a 50MB upload will consume workflow memory. Add client-side validation or use dedicated file upload services instead of processing files through n8n webhooks.

CORS issues: Browser-based forms hitting your webhook may fail due to CORS restrictions. n8n doesn't automatically set CORS headers on webhook responses. Add them manually in the Respond to Webhook node headers: Access-Control-Allow-Origin: * for public forms.

For a deeper technical reference, see n8n's documentation.

FAQ

How do I secure my n8n webhook from spam?

Add authentication to your Webhook node or use an IF node to validate required fields before processing. For basic protection, check that {{ $json.body.name && $json.body.email && $json.body.message }} all exist. More robust solutions include API key validation or integrating with services like Turnstile for CAPTCHA verification.

Can I send HTML emails instead of plain text?

Yes. In the Send Email node, enable HTML mode and use the HTML field instead of Text. You can template HTML with webhook data: <h2>New message from {{ $json.body.name }}</h2><p>{{ $json.body.message }}</p>. Remember to escape user input to prevent HTML injection.

What's the difference between n8n Cloud and self-hosted for webhooks?

n8n Cloud provides HTTPS webhook URLs automatically and handles SSL certificates. Self-hosted requires you to configure reverse proxy (nginx) and SSL certificates for production webhook endpoints. Execution limits apply only to n8n Cloud - self-hosted has unlimited workflow executions but you manage the infrastructure.

How do I handle webhook failures when email sending fails?

Add an Error Trigger node to catch failed email sends. Connect it to a second workflow that logs errors or sends notifications to a backup channel like Slack. You can also use the Wait node with retry logic - add a 30-second wait and retry the Send Email node up to 3 times before marking it as failed.

Can I use this for multiple forms on different pages?

Use different webhook paths for each form (/contact, /newsletter, /support) or add a form identifier to your POST data and use IF nodes to route to different email templates. Each path becomes a separate Webhook node trigger in your workflow.

How do I add file attachments from webhook uploads?

n8n webhooks receive files as base64-encoded strings in the POST body. Use the Binary Data Manager or Convert to File node to process uploads, but file handling significantly increases workflow complexity and memory usage. For production forms with file uploads, consider dedicated services like Uploadcare or Cloudinary with webhook notifications instead of processing files directly through this n8n webhook to email tutorial setup.

Ready to build more sophisticated automations? Check out our done-for-you templates for advanced n8n workflows, or build your first automation this weekend with our step-by-step starter guide.

Start building with our free automation resources - including n8n workflow templates and setup guides.

Related reading

Top comments (0)