How to Route Elementor Pro Form Leads Directly to WhatsApp API Using Custom PHP (No Heavy Plugins)

When building high-converting client websites on WordPress, one of the most common requests is instant lead routing to WhatsApp. However, installing bulky third-party bridge plugins adds unnecessary DOM bloat, increases database queries, and hurts Core Web Vitals.

At Grapweb, we prefer keeping client architectures lean by handling form webhooks directly inside a child theme's functions.php file or a lightweight custom mu-plugin.

Here is the exact, lightweight PHP snippet to capture Elementor Pro Form submissions and trigger an automated WhatsApp API payload (or generate a direct click-to-chat redirect) without slowing down your site.

---

Method 1: Instant WhatsApp Redirect on Form Submit (Zero API Cost)

If your client wants the user to be redirected straight to WhatsApp with their pre-filled inquiry right after clicking "Submit" (while Elementor still saves the lead in the WordPress backend), use the elementor_pro/forms/new_record hook:

<?php
/**
 * Redirect Elementor Pro Form to WhatsApp with Dynamic Field Data
 */
add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) {

    // 1. Target a specific Elementor Form by name
    $form_name = $record->get_form_settings( 'form_name' );
    if ( 'WhatsApp Lead Form' !== $form_name ) {
        return;
    }

    // 2. Get submitted field values
    $raw_fields = $record->get( 'fields' );
    $fields = [];
    foreach ( $raw_fields as $id => $field ) {
        $fields[ $id ] = sanitize_text_field( $field['value'] );
    }

    // Make sure these match your Elementor Field IDs (e.g., 'name', 'phone', 'service')
    $name    = isset( $fields['name'] ) ? $fields['name'] : 'Website Visitor';
    $phone   = isset( $fields['phone'] ) ? $fields['phone'] : 'Not provided';
    $service = isset( $fields['service'] ) ? $fields['service'] : 'General Inquiry';

    // 3. Build the formatted WhatsApp message
    $whatsapp_number = '919876543210'; // Replace with country code + phone number (no + sign)
    $message = sprintf(
        "Hello! New inquiry from the website:\n*Name:* %s\n*Phone:* %s\n*Service:* %s",
        $name,
        $phone,
        $service
    );

    // 4. Encode URL and pass redirect back to Elementor handler
    $redirect_url = '[https://wa.me/](https://wa.me/)' . $whatsapp_number . '?text=' . rawurlencode( $message );
    $handler->add_response_data( 'redirect_url', $redirect_url );

}, 10, 2 );

How to Set Up the Elementor Form Fields:

1. Open your Elementor Form widget and go to Additional Options.
2. Set the Form Name to WhatsApp Lead Form.
3. Click each form field, go to the Advanced tab, and ensure the ID matches name, phone, and service.

---

Method 2: Silent Background Webhook to WhatsApp Cloud API / CRM

If you don't want to redirect the user away from your landing page and instead want to fire a silent server-side webhook to the official WhatsApp Cloud API or a CRM pipeline (like GoHighLevel), use wp_remote_post():

<?php
add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) {

    $form_name = $record->get_form_settings( 'form_name' );
    if ( 'CRM Webhook Form' !== $form_name ) {
        return;
    }

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

    // Send non-blocking POST request so the user doesn't wait for the API response
    wp_remote_post( '[https://your-webhook-endpoint.com/api/lead](https://your-webhook-endpoint.com/api/lead)', [
        'method'      => 'POST',
        'timeout'     => 15,
        'blocking'    => false, // Keeps front-end submission blazing fast
        'headers'     => [ 'Content-Type' => 'application/json' ],
        'body'        => wp_json_encode( $payload ),
    ] );

}, 10, 2 );

Setting 'blocking' => false is a small detail that makes a huge difference in UX—the visitor sees the "Thank You" message immediately while WordPress handles the API handshake in the background.

---

Why This Approach Wins on Performance

• Zero Frontend JS Overhead: No additional scripts loaded on the client browser.
• Clean Database: Doesn't create extra custom tables just to log webhook entries.
• Full Control: You can sanitize inputs, validate phone formats, or route leads conditionally based on the service selected.

If you're looking for custom full-stack architecture, high-speed Next.js builds, or conversion-focused WordPress solutions, check out our work at Grapweb.

How are you currently handling lead routing on your client builds? Drop your favorite stack in the comments!