How to Connect Your Website Contact Form to WhatsApp Using n8n

A contact form that sits in your inbox for two hours is often the same as no contact form at all. If you run a business in Almería, Murcia, Alicante or Granada, you already know how many enquiries come in while you’re driving, meeting clients, or away from your desk. Email gets missed. WhatsApp gets seen.

The fix is simple: when someone submits your website form, n8n can catch the data instantly, send you a WhatsApp alert, and in some cases send the customer an automatic confirmation message too. We build this kind of business automation for small businesses across southern Spain because it solves a very real problem: the business that replies first usually gets the call back.

What this workflow does

At a basic level, your automation looks like this:

1. A visitor fills in your website contact form
2. The form sends data to an n8n webhook
3. n8n validates the data
4. n8n sends a WhatsApp message to you or your team
5. n8n optionally sends an auto-reply to the customer
6. n8n logs the lead in a spreadsheet, CRM, or email backup if needed

That means no more waiting for someone to check a mailbox, no more missed weekend leads, and no more copy-pasting enquiry details into WhatsApp manually.

If you’re new to n8n, it’s one of our preferred tools because it gives growing businesses far better value than Zapier, especially once you need more than one or two simple actions. Zapier still works for very basic automations, but at scale we typically recommend self-hosted n8n or, in some cases, Make.com for better cost control. We’ve covered the bigger picture in our guide to n8n vs Make.com vs Zapier 2026, but this post is about one specific use case you can put to work quickly.

Next step: before touching n8n, decide exactly who should receive the alert, what data they need, and what should happen if WhatsApp fails.

What you need before you start

Before building anything, make sure you have these pieces ready.

1. A website form you control

You need a contact form on your website that can submit data to a custom endpoint. That could be:

• A custom-coded form on a static site
• A JavaScript form that posts JSON
• A form tool that supports webhooks

This is one reason we build fast static websites at CostaDelClicks rather than bloated plugin-heavy setups. Our sites are pre-rendered HTML, built in Astro and served on Cloudflare’s edge network, which is why they consistently hit 100/100 on Lighthouse and load in under 0.4 seconds FCP. A clean form connected to a webhook is easier to maintain, faster for users, and usually more reliable than stacking plugins on top of plugins.

WordPress can do this, but be honest about the trade-off: more maintenance, more plugin conflicts, more security updates, and more chances for the form to break quietly. If your current site makes webhook-based forms difficult, our web design services are designed around this kind of practical integration from day one.

2. An n8n instance

You need access to n8n, either:

• self-hosted
• on n8n cloud
• hosted by your agency

We usually self-host where possible for cost control and data sovereignty, especially for Spanish SMEs handling customer data. For a holiday rental business or legal practice, that often matters more than people realise once leads start flowing every day.

3. A WhatsApp sending method

This is the part people often oversimplify. You cannot just make WhatsApp do anything you want from a normal personal account. You generally need one of these:

• WhatsApp Business Platform API via Meta or a provider
• Twilio WhatsApp
• Another approved WhatsApp Business API provider

For a proper business setup, use an approved provider. Avoid sketchy unofficial tools. They break, they create compliance risks, and they can get your number restricted.

Also, check how your provider handles message types. Customer confirmations are often sent as template messages, and even internal owner alerts may need to follow provider rules if they’re being delivered through the same API account.

4. Consent wording on your form

If you plan to send a WhatsApp acknowledgement to the customer, your form should make that clear. More on GDPR later, but don’t skip this.

Next step: make sure your form, n8n account, WhatsApp provider and privacy wording are all ready before you build the workflow.

The exact workflow we’ll build

In this tutorial, we’ll create a simple version of the workflow:

• Input: Name, email, phone, message
• Trigger: n8n webhook
• Action 1: Send WhatsApp alert to business owner
• Action 2: Send WhatsApp acknowledgement to customer
• Action 3: Return success response to website form

You can later expand it to:

• route leads by service type
• send to different team members
• create a CRM entry
• trigger email fallback
• add lead scoring
• push to Google Sheets or Airtable

If you want broader follow-up automation after this step, our guide on how to automate lead follow-up is the natural next read.

Next step: keep the first version simple, then add routing and reporting once the core alert is working reliably.

Step 1: Create the webhook in n8n

In n8n, create a new workflow and add a Webhook node.

Recommended webhook settings

• HTTP Method: POST
• Path: website-contact-whatsapp
• Response Mode: Using “Respond to Webhook” node or immediate response
• Authentication: Use a secret path or header validation if possible

Your test URL will look something like:

https://your-n8n-domain.com/webhook-test/website-contact-whatsapp

Your production URL will look something like:

https://your-n8n-domain.com/webhook/website-contact-whatsapp

Screenshot description

Screenshot 1: n8n editor showing a new Webhook node with POST selected, path set to website-contact-whatsapp, and the test URL visible in the right-hand panel.

What the form should send

Your website should POST data like this:

{
  "name": "Jane Smith",
  "email": "jane@example.com",
  "phone": "+34600111222",
  "message": "Hi, I'd like a quote for a new website."
}

If you’re posting form data rather than raw JSON, that’s fine too. n8n can handle both. The important part is consistency.

Next step: copy the production webhook URL somewhere safe and decide whether you’ll protect it with a secret header, hidden token, or both.

Step 2: Connect your website form to the webhook

How you do this depends on the site build, but the idea is the same: when the form is submitted, send the values to the n8n webhook URL.

Here is a simple example using JavaScript fetch:

<form id="contact-form">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <input type="tel" name="phone" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', async function(e) {
  e.preventDefault();

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

  const response = await fetch('https://your-n8n-domain.com/webhook/website-contact-whatsapp', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(payload)
  });

  const result = await response.json();
  alert(result.message || 'Thanks, your message has been sent.');
});
</script>

If you’re using a static site, this approach is straightforward and fast. That’s one reason our sites at CostaDelClicks perform so well — we keep the stack lean, avoid unnecessary client-side bloat, and connect forms directly to the tools the business actually needs. On bilingual builds, we also wire English and Spanish forms natively with proper hreflang, rather than bolting a translation layer on afterwards.

Screenshot description

Screenshot 2: Website contact form in the browser, developer tools network tab open, showing a successful POST request to the n8n webhook endpoint with a 200 response.

Next step: submit the form once with real-looking test data and confirm you can see the request and response clearly in your browser network tab.

Step 3: Test the incoming data in n8n

Once the form is connected:

1. Click Listen for test event in the Webhook node
2. Submit the form on your website
3. Check that n8n receives the payload correctly

You should see the fields appear in the node output.

At this stage, confirm:

• the field names are correct
• the phone number includes country code if needed
• no required value is missing
• spam protection is working on the form side

Add a validation step

After the Webhook node, add a Code node or IF node to check for minimum required data.

For example:

• name exists
• message exists
• phone format is usable
• email is present if you need fallback contact

This stops bad form submissions from triggering pointless messages.

If spam is a problem, add basic protection on the form itself before the data ever reaches n8n. In client builds we usually combine server-side checks with lightweight bot protection rather than relying on a single plugin or captcha box.

Next step: don’t move on until you’ve tested at least one valid submission and one invalid submission.

Step 4: Format the WhatsApp message for the business owner

Now create the message your team will receive.

Add a Set node or Code node to build a formatted string. For example:

New website enquiry

Name: {{$json.name}}
Email: {{$json.email}}
Phone: {{$json.phone}}
Message: {{$json.message}}

You can make it better by including:

• page URL
• service requested
• submission time
• source campaign
• language selected
• province or area

If you’re serving bilingual customers, this matters. We regularly build English and Spanish workflows for businesses in Spain because the same lead process often needs to work for expats, tourists and local clients without confusion. In practice, that might mean an English form sends an English acknowledgement while the owner alert still includes a clear internal summary in Spanish.

Screenshot description

Screenshot 3: n8n workflow showing the Webhook node connected to a Set node, with a field called ownerMessage containing a formatted multi-line WhatsApp message template.

Next step: keep the owner message short enough to scan on a phone screen without opening three extra apps.

Step 5: Send the WhatsApp alert to the owner

This step depends on your WhatsApp provider, but the logic is the same.

Option A: WhatsApp Business API provider node or HTTP request

If your provider has a native n8n node, use that. If not, use an HTTP Request node with the provider’s API documentation.

Typical values you’ll need:

• API endpoint URL
• authentication token
• sender WhatsApp number
• recipient number
• message body

A simplified HTTP request might include:

• Method: POST
• URL: provider endpoint
• Headers: Authorization, Content-Type
• Body: JSON with to, type, and text

Example message target:

{
  "to": "34600111222",
  "type": "text",
  "text": {
    "body": "New website enquiry\n\nName: Jane Smith\nEmail: jane@example.com\nPhone: +34600111222\nMessage: I'd like a quote."
  }
}

Your provider’s exact JSON structure will differ, so follow their docs.

What number should receive the alert?

This can be:

• your own mobile
• a shared office number
• a sales manager
• different people depending on service type

For example, a real estate office in Alicante might route valuations to one agent and buyer enquiries to another. A holiday rental business in Almería might send booking leads to reception and maintenance issues elsewhere.

One practical note: don’t assume every provider supports internal staff alerts in exactly the same way. In some setups, we keep WhatsApp for the main notification channel and add email or CRM logging in parallel so the lead is never dependent on one delivery method.

Next step: send one live test message to the real recipient phone before you build anything more complicated.

Step 6: Send an automatic WhatsApp reply to the client

This is optional, but very useful when it’s done properly.

The customer receives a message such as:

Hi Jane, thanks for contacting CostaDelClicks. We’ve received your enquiry and will reply shortly. If your request is urgent, call us directly on [number].

That single message reassures the lead that:

• their form worked
• you received it
• a response is coming
• they can use another route if urgent

Important rules before sending this

Do not send promotional spam. Keep it transactional and relevant to the enquiry they just made.

A safe acknowledgement message is:

• short
• expected
• specific to the form submission
• not a marketing campaign

If you want marketing follow-up later, that is a separate consent issue.

Just as important: on the official WhatsApp Business Platform, this customer message often needs to be sent as an approved template, and the user must have clearly opted in to receive WhatsApp communication. This is where many DIY setups fall apart. The form submission alone is not magic permission for unlimited messaging.

Screenshot description

Screenshot 4: n8n editor showing a second WhatsApp send step after the owner notification, mapped to the customer’s phone number and using a short acknowledgement template.

Next step: check your provider’s template approval and opt-in requirements before you promise customer auto-replies on the live site.

Step 7: Return a clean success response to the website

The form shouldn’t just hang after submission. Add a Respond to Webhook node or set the Webhook node to return JSON.

Example response:

{
  "success": true,
  "message": "Thanks, your message has been sent."
}

Then show that message on the site.

This gives the user a proper confirmation on-screen even if the WhatsApp message is happening in the background.

If you run an English and Spanish site, return the confirmation message in the page language rather than using the same text everywhere. That’s how we build bilingual journeys for clients: the form, confirmation, metadata and language targeting are all aligned instead of being patched together later.

Next step: test the success message on mobile, not just desktop, because that’s where most local form submissions happen.

Step 8: Add error handling so leads don’t disappear

This is the step most tutorials leave out. Don’t build a workflow that works only when everything is perfect.

At minimum, add fallback logic for:

• WhatsApp API failure
• invalid phone numbers
• missing country codes
• temporary provider outage
• duplicate submissions

Good fallback options include:

• send an email backup to the business
• log the lead to Google Sheets or Airtable
• notify an admin channel
• store failed attempts for retry

We build these safeguards into client workflows because missed leads cost more than the time saved by cutting corners. A simple rental or legal enquiry can easily be worth far more than the hour it takes to add proper logging and retry logic.

Next step: add at least one backup channel before you call the workflow finished.

Step 9: Handle phone numbers properly

WhatsApp messaging fails surprisingly often because of poor number formatting.

Use international format wherever possible:

• Spain: +34
• UK: +44
• Germany: +49

If your audience includes expats, tourists, or second-home owners, don’t assume every number is Spanish. We see this constantly on bilingual sites across Murcia and Alicante.

Best practice

• Ask for phone number in international format
• Use a dropdown country code if needed
• Clean spaces and dashes before sending
• Validate number length before API call

If you only do one technical improvement in this workflow, do this one. It prevents a lot of silent failures.

Next step: run tests with a Spanish number and a non-Spanish number before launch.

Step 10: Add GDPR safeguards before going live

This matters if you’re operating in Spain. WhatsApp is convenient, but convenience does not remove your GDPR responsibilities.

What personal data is involved?

Your form may send:

• name
• phone number
• email
• message content
• potentially booking, legal or financial details

That is personal data. In some sectors, it may be sensitive in practice even if not technically special category data.

Key GDPR points to consider

1. Be transparent

Your privacy policy should explain:

• what data you collect
• why you collect it
• where it goes
• whether you use third-party messaging providers
• how long you keep it

2. Only send what you need

Don’t push unnecessary information into WhatsApp. If the owner only needs name, phone and summary, don’t include extra data.

3. Get appropriate consent or rely on a proper lawful basis

If someone submits a contact form asking you to reply, you may have a lawful basis to process the enquiry. But if you want to send a WhatsApp confirmation, mention that clearly near the form.

Example wording:

By submitting this form, you agree that we may contact you regarding your enquiry by email or WhatsApp if you provide a mobile number.

Have a legal professional review your exact wording if your sector is regulated.

4. Be careful with sensitive sectors

If you are a solicitor, clinic, gestoría, or another business handling confidential information, think carefully before sending full enquiry details into WhatsApp.

5. Secure your n8n setup

Protect:

• webhook URLs
• API credentials
• server access
• workflow logs
• retention settings

For more on the website side of compliance, our GDPR for Spanish business websites guide is worth reading alongside this tutorial.

Key insight: if your workflow touches WhatsApp, customer data and form submissions, reliability and compliance matter just as much as speed.

Common mistakes that break this automation

Using the test webhook URL in production

n8n gives you a test URL and a production URL. Many people connect the wrong one and wonder why nothing works after publishing.

Forgetting to activate the workflow

A correct workflow in draft mode is still a non-working workflow.

Sending to badly formatted mobile numbers

As above, number formatting causes more failures than most people expect.

No backup if WhatsApp fails

If a lead only exists inside one failed API request, you don’t have a reliable process.

Treating WhatsApp like a CRM

WhatsApp is a communication channel, not a proper lead system.

Ignoring page speed on the form itself

A form on a slow site still loses leads before they submit. If your website drags on mobile, fix that first. Our guides on why your website speed matters in Spain and how to pass Core Web Vitals explain why performance is part of conversion, not just a technical nicety.

Next step: review your current setup against this list and fix the weak point before adding more features.

A simple real-world use case

Say you run a property management business in Mojácar.

A guest owner lands on your website at 21:30 and submits a form asking for a rental management quote.

This workflow can:

• notify you instantly on WhatsApp
• send the owner a confirmation message
• log the enquiry in a sheet
• create a task for follow-up next morning

That beats hoping someone notices an email buried under supplier invoices and booking notifications.

The same pattern works for:

• restaurants taking event enquiries
• estate agents handling valuation requests
• legal firms screening new enquiries
• trade businesses booking callouts
• holiday rental companies handling direct booking questions

For higher-volume businesses, we sometimes add a simple AI classification step to tag the enquiry by service type before it reaches the team. That does not replace staff. It just removes the repetitive sorting work.

Next step: map this workflow to one enquiry type in your business first, then expand once you’ve proved it saves time.

Should you build this yourself or have it set up for you?

If you’re comfortable with:

• webhook testing
• API authentication
• form JavaScript
• error handling
• GDPR review

then yes, you can build the basic version yourself.

But most business owners shouldn’t spend half a day debugging webhook payloads when the real goal is faster lead response. That’s why we offer practical implementation, not just advice. We design the site, connect the workflow, keep it fast, and make sure it works in the real world on real devices for real businesses in Spain.

If your current site is slow, messy, WordPress-heavy, or difficult to connect cleanly, it may be better to fix the foundation first. Our web design in Almería projects and wider regional work often start exactly there: improve the website, then add automation properly.

FAQ

Can I use a normal personal WhatsApp account for this?

No, not reliably and not for a proper business setup. Use the WhatsApp Business Platform through an approved provider or a supported integration route. Unofficial tools create reliability and compliance problems.

Do I need n8n Cloud, or can I self-host?

Both work. We often prefer self-hosted n8n for Spanish SMEs because it gives better cost control and more flexibility. If you want a deeper comparison, read our post on how to save €500/month switching to n8n.

Can I send both email and WhatsApp from the same form?

Yes. In fact, that's often the best setup. Send the WhatsApp alert for speed and an email or CRM log for record-keeping. Redundancy is useful when a lead matters.

Is it okay to send full customer messages into WhatsApp?

Sometimes, but not always. It depends on what the customer submitted and what sector you're in. Keep WhatsApp messages minimal where possible, especially for legal, health, finance or other sensitive enquiries.

Can this work on a bilingual English and Spanish website?

Absolutely. We build bilingual websites natively, not as an afterthought, with proper hreflang implementation, and the same applies to automation. You can route messages and acknowledgements in English or Spanish depending on the form language or user selection. If that's relevant for your business, our guide on whether your website should be bilingual is a useful next step.