How to Send Elementor Form Submissions to a Webhook (n8n, Make or Any CRM)

To send Elementor form submissions to a webhook, edit the Form widget in Elementor Pro, open Actions After Submit, add Webhook, and paste the URL of whatever will receive the data: an n8n Webhook node, a Make custom webhook, or your own endpoint. Then submit a real test entry, check which fields arrived, and map them to your CRM. Most of the real work is in that last part: knowing what arrives, keeping the endpoint private, and not losing a lead when the receiver is down.

This guide walks through the full setup with n8n as the receiver, then covers Make, direct CRM delivery, security and failures.

What a webhook is, and how it differs from an API

A webhook is a URL that one system calls automatically when something happens, sending the event data with it. When a visitor submits your Elementor form, WordPress makes an HTTP request to the webhook URL with the submitted fields. Nothing has to ask for the data. It is pushed the moment the event happens.

An API works the other way around. Your automation tool has to call the API and ask for new records, usually on a schedule. In practice:

• Webhook (push): instant, one request per event, no polling. The sender decides what it sends.
• API (pull): you decide what you fetch and when, but you need credentials, and polling adds delay.

For lead forms, push is what you want. A new lead should reach your CRM or your sales team’s WhatsApp in seconds, not on the next polling cycle. It is also one of the simplest ways off a paid connector. If a Zapier form trigger is a big line on your bill, a webhook is often a cheaper route than a paid Zapier trigger.

Before you add the webhook

Four things save you time later:

1. Check your Elementor plan. The Form widget is part of Elementor Pro. As of October 2026, Elementor’s help centre says form integrations are only available on Advanced plugin plans and above (and on certain Elementor Hosting plans). See Elementor’s integration notes before you plan around it.
2. Give every field a clear ID. In the form editor, open each field’s Advanced tab and set an ID such as name, whatsapp or email. Readable IDs make the mapping in n8n obvious and survive label changes.
3. Decide what you are allowed to send. You are moving personal data to another system. Make sure your privacy notice and consent wording cover the destination.
4. Leave tracking alone. The webhook routes data. It does not measure conversions. If the form also feeds GA4 or Google Ads, keep conversion tracking on the same form and test both after any change.

Step by step: Elementor form to n8n

1. Create the Webhook node in n8n

Create a new workflow and add a Webhook trigger node. Set HTTP Method to POST, because a form submission sends data rather than requesting it. Replace the random path with something readable but hard to guess, for example lead-intake-7f3k9q. Leave Respond on Immediately for now. The node shows two URLs at the top: a test URL and a production URL. Copy the test URL.

Per n8n’s Webhook node documentation, the test URL only listens while you click Listen for test event, and the production URL only works once the workflow is published. Mixing them up causes most “nothing arrives” problems.

2. Add the Webhook action in Elementor

1. Edit the page in Elementor and select the Form widget.
2. In Actions After Submit, add Webhook. Keep any actions you already use, such as Email or Collect Submissions.
3. Open the new Webhook section and paste the n8n test URL.
4. Update the page.

Elementor lists Webhook alongside its other actions after submit. The action runs on every submission of that form.

3. Send a test and read what arrives

In n8n, click Listen for test event. Open the live page (not the editor preview), fill in the form with realistic test data, and submit it. The Webhook node should show one item with headers, params, query and body.

Look closely at body. That is your payload, and it is the only reliable reference for field names, because Elementor’s documentation doesn’t spell out the exact shape. Note how each field is keyed, whether empty fields are included, and what extra information comes with the submission. Build the rest of the workflow against what you see here, not what you expect.

4. Map the fields and send them on

Add an Edit Fields (Set) node right after the trigger. Give the fields clean, stable names, for example name, whatsapp, email, source_page. Trim whitespace and normalise the phone number into one format. Every node after this one reads from these clean names, so if the form changes later you fix one node.

From there, send the lead wherever it needs to go:

• CRM: use n8n’s node for your CRM, or the HTTP Request node with the CRM’s API. Search by email or phone first and update the existing contact instead of creating duplicates.
• Team alert: a message to Slack, email or WhatsApp with the lead’s details and a link to the CRM record.
• AI follow-up: you can reuse the same n8n webhook in an AI workflow that qualifies the lead on WhatsApp.

5. Switch to the production URL and publish

When the test run looks right, copy the production URL from the Webhook node, paste it into Elementor in place of the test URL, update the page, and publish the workflow in n8n. Submit one more real test and confirm it appears in the workflow’s Executions tab. Production runs don’t appear on the canvas, only in Executions.

Form-to-CRM handoffs like this are a big part of my integration work. Replacing fragile connector chains with direct integrations is where I’ve seen results such as +15% partner revenue via integrations. The pattern is the same every time: capture once, clean once, route to every system that needs it.

Sending to Make, Zapier or straight to a CRM

The Elementor side doesn’t change. Only the receiving URL does.

• Make: start a scenario with a Webhooks > Custom webhook module, copy its URL into Elementor, and submit a test so Make can learn the data structure.
• Zapier: Elementor’s own guide uses Webhooks by Zapier with the Catch Hook trigger. You paste the hook into the same Webhook field.
• A CRM directly: this rarely works with the built-in action. Most CRM APIs expect a specific JSON structure and an authentication header, and the Webhook action has no setting for custom headers. Put n8n or Make in the middle, or send the request yourself with a small PHP hook.

Elementor Pro has a documented hook, elementor_pro/forms/new_record, that runs after the form actions with the full record (see Elementor’s Forms API hooks). With it you control the format, the headers and the error handling. A minimal version, placed in a small custom plugin or mu-plugin rather than the theme:

add_action( 'elementor_pro/forms/new_record', function ( $record, $handler ) {
    // Only handle the form named "lead_form" in the widget settings.
    if ( 'lead_form' !== $record->get_form_settings( 'form_name' ) ) {
        return;
    }

    $fields = [];
    foreach ( $record->get( 'fields' ) as $id => $field ) {
        $fields[ $id ] = $field['value'];
    }

    $response = wp_remote_post( 'https://n8n.example.com/webhook/lead-intake', [
        'headers' => [
            'Content-Type'    => 'application/json',
            // Define this constant in wp-config.php, never in the code itself.
            'X-Webhook-Token' => LEAD_WEBHOOK_TOKEN,
        ],
        'body'    => wp_json_encode( $fields ),
        'timeout' => 10,
    ] );

    if ( is_wp_error( $response ) || wp_remote_retrieve_response_code( $response ) >= 300 ) {
        error_log( 'lead_form webhook failed' ); // Log the failure, not the personal data.
    }
}, 10, 2 );

On the n8n side, set the Webhook node’s authentication to Header Auth with the same header name and token. Requests without the right header are then rejected.

Keep the webhook endpoint private

Anyone who has your webhook URL can send data to it. Fake leads in your CRM are the mild outcome. A workflow that sends emails or WhatsApp messages can be abused. Because the built-in Webhook action has no setting for authentication headers, use the protections that work with that:

• Unguessable path. Use a long random path and never paste the URL in tickets, screenshots or public repos. Treat it like a password.
• IP allowlist. n8n’s Webhook node has an IP(s) Allowlist option. Add your web server’s outgoing IP and everything else gets a 403. This works well on a VPS with a fixed IP. Check with your host on shared or load-balanced hosting.
• Only Run If. This n8n option evaluates an expression against the request and skips the run if it’s false. It is useful for filtering junk, but anything inside the form, such as a hidden field, is visible in the page source, so it is not a secret.
• Real authentication. For anything sensitive, use the PHP hook above with Header Auth or JWT on the n8n side.

Your normal form spam protection (honeypot, reCAPTCHA or similar) still matters. A webhook forwards whatever the form accepts.

When the webhook fails, don’t lose the lead

Receivers go down, get updated, or hit rate limits. Plan for it:

• Keep a copy in WordPress. Add the Collect Submissions action next to Webhook so every entry is stored in Elementor’s Submissions screen. If n8n misses one, you can still find it and re-send it.
• Log the response. Elementor exposes the elementor_pro/forms/webhooks/response hook with the webhook’s response. A few lines of PHP can log failed status codes so you know something broke before sales does.
• Respond fast. Leave the n8n Webhook node on Respond: Immediately so the form isn’t waiting on your CRM calls. Do the heavy work after the response.
• Catch errors in n8n. Set an error workflow (an Error Trigger workflow) that alerts you when a lead run fails at the CRM step.

If you’re not sure your forms reach every system they should, I can take a look. A free review of how your forms hand off leads is part of my MarTech audit.

Troubleshooting

FAQ

Does the free version of Elementor support webhooks?

No. The Form widget and its Webhook action are part of Elementor Pro, and as of October 2026 Elementor lists form integrations under its Advanced plans and above. On free Elementor you would need a separate form plugin or custom code.

What is the difference between a webhook and an API?

A webhook pushes data to a URL the moment an event happens. An API waits for you to request data. Form submissions suit webhooks because the lead should move instantly, without polling.

Can I send an Elementor form straight to my CRM?

Only if the CRM accepts the request as Elementor sends it, with no authentication header. Most don’t, so use n8n or Make in between, a native Elementor integration if your CRM has one, or the elementor_pro/forms/new_record hook to send a properly formatted, authenticated request.

How do I secure an Elementor webhook?

Use a long, random webhook path, restrict the n8n Webhook node to your server’s IP, keep spam protection on the form, and for sensitive flows send the request from PHP with an authentication header that n8n checks.

Where this fits

A webhook is one link in the chain from visitor to customer. The form also has to be tracked, the CRM has to route the lead, and someone has to follow up fast. If you want to check the whole chain, start with the MarTech audit checklist.