How to sync Elementor form submissions to a third-party API using elementor_pro/forms/new_record?

[Community]

To sync Elementor form submissions to a third-party API using the elementor_pro/

add_action('elementor_pro/forms/new_record', 'sync_elementor_form_to_api', 10, 3);
function sync_elementor_form_to_api($record, $handler, $ajax_handler){// Replace 'your_form_name' with your form's name or ID
    $form_name = $record->get_form_settings('form_name');
    if ('your_form_name' !== $form_name){return;
    }
    $raw_fields = $record->get_formatted_data();
    // Map form fields to API data structure (customize as needed)
    $api_data = [
        'email' => $raw_fields['email'], // Replace 'email' with your form field ID
        'name' => $raw_fields['name'],   // Replace 'name' with your form field ID
    ];
    // API endpoint (replace with your third-party API URL)
    $api_url = 'https://api.example.com/submit';
    $response = wp_remote_post($api_url, [
        'headers' => [
            'Content-Type' => 'application/json',
            'Authorization' => 'Bearer YOUR_API_KEY'
        ],
        'body' => json_encode($api_data),'timeout' => 15
    ]);
    // Handle errors (optional)
    if (is_wp_error($response)){$error_message = $response->get_error_message();
        error_log("API Error: $error_message");
        // $ajax_handler->add_error_message('API Error: ' . $error_message);
        // $ajax_handler->is_success = false;
    } elseif (wp_remote_retrieve_response_code($response) !== 200){$body = wp_remote_retrieve_body($response);
        error_log("API Error: HTTP " . wp_remote_retrieve_response_code($response) . " - $body");
        // $ajax_handler->add_error_message('API Error: ' . $body);
        // $ajax_handler->is_success = false;
    }
}

2. Customize the Code​

• Form Identification: Replace 'your_form_name' with the name or ID of your Elementor form (found in the form widget settings).
• Data Mapping: Adjust $api_data to match the field IDs from your form and the structure expected by your API.
• API Endpoint: Replace $api_url with your third-party API endpoint.
• Authentication: Add headers (e.g., Authorization) if your API requires authentication.
• Error Handling: Uncomment the $ajax_handler lines to display errors to users if the API call fails.

---

3. Key Considerations​

• Form Field IDs: Use the correct field IDs from your Elementor form (e.g., email, name). These are set in the form widget settings.
• API Requirements: Ensure the data format (e.g., JSON/form-data) and headers match your API’s specifications.
• Security: Store API keys securely using WordPress options or a secrets manager (avoid hardcoding).
• Testing: Test submissions and monitor logs (wp-content/debug.log) for errors.

---

4. Troubleshooting​

• Check Logs: Enable WordPress debugging to catch errors.
• Test API Calls: Use tools like Postman to validate your API endpoint.
• Validate Data: Confirm the submitted data structure matches the API’s expectations.

By following these steps, Elementor form submissions will sync with your third-party API seamlessly.
forms/new_record hook, follow these steps:

1. Add the Custom Code​

Insert the following code into your theme's functions.php file or a custom plugin: