Turn Any Website Form into an n8n Webhook in 5 Minutes

The Quick Answer

You can connect any website form to n8n in under 5 minutes using a simple JavaScript snippet. No backend code required, no server setup, no complicated integrations. Just paste 10 lines of code into your form, create an n8n webhook, and you’re done. Works with WordPress, Webflow, Wix, Squarespace, and any static HTML site.

Why Send Forms to n8n Instead of Email

Most website forms send data to your email inbox. This creates problems:

1. No automation: You manually copy-paste data into your CRM
2. Lost leads: Emails get buried or accidentally deleted
3. No follow-up: You forget to respond within 5 minutes (when conversion rates are highest)
4. No data: You can’t track form submissions or analyze patterns
5. No routing: All forms go to one inbox, regardless of type

When forms send data to n8n webhooks instead:

• Instant automation (add to CRM, send to Slack, trigger email sequence)
• Never lose a lead (data stored in database or Google Sheets)
• Automatic follow-up emails within seconds
• Track every submission with timestamps
• Route different forms to different workflows

Real example: A consulting company switched from email forms to n8n webhooks. Before: 47% response rate within 24 hours. After: 98% response rate within 2 minutes (automated email + Slack notification). Lead-to-customer conversion increased 34%.

What You’ll Need

• A website with a form (HTML, WordPress, Webflow, etc.)
• n8n instance (self-hosted or cloud)
• 5 minutes
• Basic copy-paste skills (no coding knowledge required)

Step 1: Create Your n8n Webhook (2 minutes)

First, create the webhook endpoint that will receive form data.

In n8n:

1. Create a new workflow

2. Add a Webhook node

3. Configure:

   • HTTP Method: POST
   • Path: form-submission (or any name you want)
   • Respond: Immediately
   • Response Code: 200
   • Response Data: JSON
   • Response Body:

   {
     "success": true,
     "message": "Thank you! We'll be in touch soon."
   }

4. Click “Execute Node” to get your webhook URL

Your webhook URL will look like:

• Self-hosted: https://your-n8n-domain.com/webhook/form-submission
• n8n Cloud: https://your-workspace.app.n8n.cloud/webhook/form-submission

Copy this URL—you’ll need it in step 2.

Step 2: Add JavaScript to Your Form (3 minutes)

Now connect your website form to the n8n webhook with this simple JavaScript code.

Basic HTML Form Example

Here’s a standard contact form:

<form id="contactForm">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <input type="tel" name="phone" placeholder="Your Phone">
  <textarea name="message" placeholder="Your Message" required></textarea>
  <button type="submit">Send Message</button>
</form>

<div id="formMessage" style="display:none;"></div>

<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
  e.preventDefault();

  // Get form data
  const formData = new FormData(this);
  const data = Object.fromEntries(formData);

  // Send to n8n webhook
  fetch('https://your-n8n-domain.com/webhook/form-submission', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(result => {
    // Show success message
    document.getElementById('formMessage').style.display = 'block';
    document.getElementById('formMessage').innerHTML = result.message;
    document.getElementById('contactForm').reset();
  })
  .catch(error => {
    // Show error message
    document.getElementById('formMessage').style.display = 'block';
    document.getElementById('formMessage').innerHTML = 'Error. Please try again.';
  });
});
</script>

Replace https://your-n8n-domain.com/webhook/form-submission with your actual webhook URL.

That’s it! Your form now sends data to n8n.

WordPress (Contact Form 7)

Contact Form 7 doesn’t have built-in webhook support, but you can add it with custom JavaScript:

// Add this to Appearance → Customize → Additional CSS → Custom JavaScript
// Or use a plugin like "Insert Headers and Footers"

document.addEventListener('wpcf7submit', function(event) {
  var formData = new FormData(event.target);
  var data = Object.fromEntries(formData);

  fetch('https://your-n8n-domain.com/webhook/form-submission', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  });
}, false);

The form still sends emails normally—this adds n8n automation on top.

WordPress (WPForms or Gravity Forms)

Both have webhook add-ons, but they cost $199-299/year. Free alternative:

// Add to theme's footer.php or use Insert Headers and Footers plugin

jQuery(document).ready(function($) {
  $('.wpforms-form, .gform_wrapper form').on('submit', function(e) {
    var formData = {};
    $(this).serializeArray().forEach(function(field) {
      formData[field.name] = field.value;
    });

    fetch('https://your-n8n-domain.com/webhook/form-submission', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    });
  });
});

Webflow

In Webflow Designer:

1. Select your form
2. Click Settings (gear icon)
3. Go to the Custom Code section
4. Add this to Before closing body tag:

<script>
document.querySelector('form').addEventListener('submit', function(e) {
  const formData = new FormData(this);
  const data = Object.fromEntries(formData);

  fetch('https://your-n8n-domain.com/webhook/form-submission', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  });
});
</script>

Webflow forms will still work normally—this adds n8n automation.

Wix

In Wix Editor:

1. Add your form using Wix Forms
2. Click Settings → Actions after submit → Custom code
3. Add this code:

$w.onReady(function() {
  $w("#myForm").onWixFormSubmitted((event) => {
    let formData = event.fields;

    fetch('https://your-n8n-domain.com/webhook/form-submission', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    });
  });
});

Replace #myForm with your form’s ID (found in the properties panel).

Squarespace

In Squarespace:

1. Go to Settings → Advanced → Code Injection
2. Add this to Footer:

<script>
document.addEventListener('DOMContentLoaded', function() {
  var forms = document.querySelectorAll('.sqs-block-form form');
  forms.forEach(function(form) {
    form.addEventListener('submit', function(e) {
      var formData = new FormData(this);
      var data = Object.fromEntries(formData);

      fetch('https://your-n8n-domain.com/webhook/form-submission', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });
    });
  });
});
</script>

Step 3: Test Your Form

1. Fill out your form with test data
2. Submit the form
3. Check n8n workflow execution history
4. You should see the submitted data in the webhook node

Debug tip: If it’s not working, open browser console (F12) and check for errors. Most common issues:

• Typo in webhook URL
• CORS errors (add CORS headers in webhook node)
• Wrong form ID or selector

Step 4: Build Your Automation Workflow

Now that form data flows into n8n, add automation steps.

Example 1: Save to Google Sheets

[Webhook] → [Google Sheets]
           - Operation: Append
           - Spreadsheet: Leads
           - Sheet: Form Submissions
           - Data:
             Name: \{\{$json.name\}\}
             Email: \{\{$json.email\}\}
             Phone: \{\{$json.phone\}\}
             Message: \{\{$json.message\}\}
             Timestamp: \{\{$now\}\}

Example 2: Send to Slack + Email

[Webhook] → [Slack]
         |  - Channel: #leads
         |  - Message: New form submission from \{\{$json.name\}\}
         |
         └→ [SendGrid]
            - To: \{\{$json.email\}\}
            - Template: Welcome Email
            - From: [email protected]

Example 3: Add to CRM + Trigger Email Sequence

[Webhook] → [HTTP Request: Add to HubSpot]
         |
         └→ [Airtable: Add to Email Sequence Table]
         |
         └→ [Slack: Notify Sales Team]

Example 4: Smart Routing Based on Form Data

[Webhook] → [IF Node: Check Message Type]
         |
         ├→ [Sales inquiry] → [Email to sales@]
         ├→ [Support request] → [Email to support@]
         └→ [Partnership] → [Email to partnerships@]

Advanced: Add Extra Data to Form Submissions

You can enhance form submissions with extra data JavaScript can capture:

Add Page URL and Timestamp

document.getElementById('contactForm').addEventListener('submit', function(e) {
  e.preventDefault();

  const formData = new FormData(this);
  const data = Object.fromEntries(formData);

  // Add extra data
  data.pageUrl = window.location.href;
  data.timestamp = new Date().toISOString();
  data.userAgent = navigator.userAgent;
  data.referrer = document.referrer;

  fetch('https://your-n8n-domain.com/webhook/form-submission', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(result => {
    document.getElementById('formMessage').innerHTML = result.message;
    document.getElementById('formMessage').style.display = 'block';
    this.reset();
  });
});

Now your n8n workflow receives:

• All form fields (name, email, message)
• Page URL where form was submitted
• Exact timestamp
• User’s browser info
• Referrer (where they came from)

This data helps with:

• Lead tracking: Which pages generate most leads?
• Attribution: Which marketing channel drove this submission?
• Analytics: What time of day do most people submit?

Add UTM Parameters

If you use UTM tracking in your marketing:

// Capture UTM parameters from URL
const urlParams = new URLSearchParams(window.location.search);
data.utm_source = urlParams.get('utm_source') || 'direct';
data.utm_medium = urlParams.get('utm_medium') || 'none';
data.utm_campaign = urlParams.get('utm_campaign') || 'none';

Now you know which ads or campaigns generated each lead.

Security: Protecting Your Webhook

Anyone with your webhook URL can send data to it. Here’s how to add security:

Method 1: Secret Token (Recommended)

In your JavaScript:

fetch('https://your-n8n-domain.com/webhook/form-submission', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Secret-Token': 'your-secret-key-here-change-this'
  },
  body: JSON.stringify(data)
});

In your n8n workflow:

Add an IF node after the webhook:

[Webhook] → [IF Node]
         |  - Condition: \{\{$headers["x-secret-token"]\}\} equals "your-secret-key-here-change-this"
         |
         ├→ [TRUE] → Continue with workflow
         └→ [FALSE] → Stop execution (invalid token)

Method 2: Domain Whitelist

Only accept submissions from your domain:

In n8n, add IF node:

[Webhook] → [IF Node]
         |  - Condition: \{\{$headers.origin\}\} contains "yourdomain.com"
         |
         ├→ [TRUE] → Continue
         └→ [FALSE] → Stop

Method 3: Rate Limiting

Prevent spam by limiting submissions:

Use n8n’s built-in Rate Limit node:

• Max: 10 requests
• Duration: 1 hour
• Per: IP address

Handling CORS Errors

If you see CORS errors in browser console, add CORS headers to your webhook response:

In Webhook node:

1. Click Add Option
2. Select Response Headers
3. Add:
   • Name: Access-Control-Allow-Origin
   • Value: * (or https://yourdomain.com for better security)
4. Add another:
   • Name: Access-Control-Allow-Methods
   • Value: POST, OPTIONS

Real-World Examples

Example 1: Lead Magnet Download

User fills form to download PDF:

[Webhook: Form Data]
    ↓
[SendGrid: Email PDF]
    ↓
[Google Sheets: Log Download]
    ↓
[Webhook Response: "Check your email!"]

Result: User gets PDF in email instantly, you capture lead in spreadsheet.

Example 2: Demo Request Workflow

Sales demo request form:

[Webhook: Demo Request]
    ↓
[Calendly API: Check Availability]
    ↓
[SendGrid: Email with Booking Link]
    ↓
[Slack: Notify Sales Rep]
    ↓
[HubSpot: Create Deal]

Result: Instant demo booking email, sales team notified, CRM updated automatically.

Example 3: Support Ticket System

Support request form:

[Webhook: Support Request]
    ↓
[IF: Check Priority]
    ├→ [Urgent] → [SMS to On-Call Team]
    └→ [Normal] → [Email to Support Queue]
    ↓
[Airtable: Create Ticket]
    ↓
[SendGrid: Confirmation Email]

Result: Urgent issues get immediate attention, all tickets tracked in Airtable.

Troubleshooting Common Issues

Issue: Webhook Returns 404

Cause: Wrong webhook URL or workflow not activated.

Fix:

1. Check webhook URL is copied exactly
2. In n8n, click “Execute Node” on webhook to get correct URL
3. Ensure workflow is activated (toggle in top right)

Issue: Form Submits But No Data in n8n

Cause: JavaScript errors or wrong selectors.

Fix:

1. Open browser console (F12)
2. Look for JavaScript errors
3. Check form ID matches your code
4. Console.log the data before sending:

   console.log('Sending data:', data);
   fetch(...)

Issue: CORS Error

Cause: Browser blocking cross-origin request.

Fix: Add CORS headers to webhook (see section above).

Issue: Data Arrives But Fields Are Empty

Cause: Form field names don’t match.

Fix:

1. In browser console, log formData:

   console.log('Form data:', Object.fromEntries(formData));

2. Check field names match your form’s name attributes
3. In n8n, check the webhook node output to see what data actually arrived

Monitoring Form Submissions

Set up monitoring so you know if your form stops working:

Daily Summary Email

[Schedule: Daily at 9am]
    ↓
[HTTP Request: Query Google Sheets]
    ↓
[Function: Count Yesterday's Submissions]
    ↓
[IF: Less than Expected]
    ↓
[SendGrid: Alert Email to You]

Real-Time Failure Alerts

[Webhook]
    ↓
[IF: Webhook Failed]
    ↓
[Slack: Send Alert]

In webhook node settings:

• Set Continue On Fail: true
• Add error handling in next node

Cost Breakdown

Traditional form tools:

• Typeform: $25-50/month (100-1,000 submissions)
• JotForm: $34/month (1,000 submissions)
• Google Forms: Free but no automation

n8n webhook approach:

• n8n Cloud: $20/month (unlimited submissions)
• Self-hosted n8n: $5-10/month server (unlimited)
• Cost per submission: $0

Savings: $180-600/year vs form tools.

Frequently Asked Questions

Q: Will this work with my existing form plugin? A: Yes, this works alongside existing plugins. Your form will submit normally AND send to n8n.

Q: What if someone submits spam? A: Add reCAPTCHA to your form, or use n8n’s rate limiting and filtering nodes to block suspicious submissions.

Q: Can I use this for file uploads? A: Yes, but you need to convert files to base64 or upload to cloud storage first, then send the URL to n8n. This requires more advanced JavaScript.

Q: Does this work on mobile? A: Yes, works on all devices and browsers (Chrome, Firefox, Safari, Edge).

Q: What happens if n8n is down? A: The form submission will fail. Add error handling in your JavaScript to show a fallback message or store submissions in local storage and retry.

Next Steps

1. Today: Create webhook node in n8n
2. This week: Add JavaScript to one form and test
3. This month: Build automation workflows for form data
4. Next month: Add advanced features (UTM tracking, smart routing)

Related Posts

• How to Create a Customer Onboarding Sequence with n8n
• Best Email Service for n8n Automation
• Schedule n8n Workflows Like a Pro

---

About the Author

Mike Holownych is an n8n automation expert who has built webhook-based form systems for 200+ websites. He specializes in no-code automation solutions for small businesses and has processed over 500,000 form submissions through n8n workflows.