WordPress API Integration: A Practical Guide with Contact Form 7 (JSON Example)

Looking to connect your WordPress site to external services—like CRMs, marketing platforms, or internal tools? This guide explains WordPress API integration in clear terms and walks through a real-world example: sending Contact Form 7 submissions to an external API as a JSON object. We’ll cover how it works, the moving parts involved, and provide a production-minded code sample to get you started.

Caveat: The code below is for demonstration only. Please do not use it on a live site without first implementing and testing it on a staging environment and having a developer review it for your specific use case.

Example: Contact Form 7 API integration (send JSON to an external endpoint)

The following plugin listens for successful Contact Form 7 submissions and posts the data as JSON to your chosen API endpoint. Replace field names, endpoint URL, and authentication to match your requirements.

File path: wp-content/plugins/cf7-to-api-integration/cf7-to-api-integration.php

<?php
/**
 * Plugin Name: CF7 to External API (JSON)
 * Description: Posts Contact Form 7 submissions to an external API in JSON format using the WP HTTP API.
 * Version: 1.0.0
 * Author: Your Name
 */

if ( ! defined( 'ABSPATH' ) ) exit;

/**
 * Configuration: set your endpoint and auth here or load from env/DB.
 * For production, prefer storing secrets in wp-config.php or environment variables.
 */
define( 'CF7_API_ENDPOINT', 'https://api.example.com/v1/leads' ); // <-- Your API endpoint
define( 'CF7_API_TOKEN', 'YOUR_BEARER_TOKEN_HERE' );              // <-- Store securely in practice

/**
 * Hook into CF7 after mail is sent.
 * Alternatives: wpcf7_before_send_mail (fires earlier), wpcf7_submit (fires even if mail fails).
 */
add_action( 'wpcf7_mail_sent', function( $contact_form ) {

    // Get the submission instance
    $submission = WPCF7_Submission::get_instance();
    if ( ! $submission ) {
        return; // Nothing to do
    }

    // Posted form data (keys are CF7 field names)
    $posted_data = $submission->get_posted_data();

    // Optional: limit this integration to a specific form
    $target_form_id = 1234; // <-- Replace with your CF7 form ID or remove this check to run for all
    if ( (int) $contact_form->id() !== (int) $target_form_id ) {
        return;
    }

    /**
     * Map CF7 fields to your API schema.
     * Example CF7 field names: your-name, your-email, your-phone, your-message
     * Adjust to match your form and the external API’s expected payload.
     */
    $payload = [
        'fullName' => isset( $posted_data['your-name'] )    ? sanitize_text_field( $posted_data['your-name'] )         : '',
        'email'    => isset( $posted_data['your-email'] )   ? sanitize_email( $posted_data['your-email'] )             : '',
        'phone'    => isset( $posted_data['your-phone'] )   ? sanitize_text_field( $posted_data['your-phone'] )        : '',
        'message'  => isset( $posted_data['your-message'] ) ? sanitize_textarea_field( $posted_data['your-message'] )  : '',
        'source'   => 'Contact Form 7',
        'pageUrl'  => isset( $_SERVER['HTTP_REFERER'] ) ? esc_url_raw( $_SERVER['HTTP_REFERER'] ) : home_url(),
        'utm'      => [
            'utm_source'   => isset( $_COOKIE['utm_source'] )   ? sanitize_text_field( $_COOKIE['utm_source'] )   : '',
            'utm_medium'   => isset( $_COOKIE['utm_medium'] )   ? sanitize_text_field( $_COOKIE['utm_medium'] )   : '',
            'utm_campaign' => isset( $_COOKIE['utm_campaign'] ) ? sanitize_text_field( $_COOKIE['utm_campaign'] ) : '',
        ],
        // Example consent flag if you have a checkbox named "consent"
        'consent'  => ! empty( $posted_data['consent'] ) ? true : false,
    ];

    // Build the HTTP args
    $args = [
        'timeout'     => 10,
        'redirection' => 3,
        'blocking'    => true,
        'headers'     => [
            'Content-Type'  => 'application/json',
            'Accept'        => 'application/json',
            // Example Bearer auth. Use whatever your API expects.
            'Authorization' => 'Bearer ' . CF7_API_TOKEN,
        ],
        'body'        => wp_json_encode( $payload ),
    ];

    // Send POST request
    $response = wp_remote_post( CF7_API_ENDPOINT, $args );

    // Handle errors
    if ( is_wp_error( $response ) ) {
        error_log( '[CF7->API] HTTP Error: ' . $response->get_error_message() );
        return;
    }

    $code = wp_remote_retrieve_response_code( $response );
    $body = wp_remote_retrieve_body( $response );

    // Basic success check (adjust to your API’s response contract)
    if ( $code >= 200 && $code < 300 ) {
        // Optional: parse/log or trigger follow-up actions
        // $data = json_decode( $body, true );
        // error_log( '[CF7->API] Success: ' . $body );
    } else {
        error_log( sprintf( '[CF7->API] Non-2xx response (%d): %s', $code, $body ) );
    }
} );

Matching Contact Form 7 fields

Example CF7 form with fields matching the code above:

[text* your-name placeholder "Your Name"]
[email* your-email placeholder "Your Email"]
[tel your-phone placeholder "Your Phone"]
[textarea your-message placeholder "Your Message"]
[checkbox consent use_label_element "I agree to the privacy policy."]
[submit "Send"]

Tip: Find a form’s numeric ID under Contact → Contact Forms (hover the form name).

Quick example: Pull data into WordPress via an API (GET)

Fetching data is as common as sending it. Here’s a minimal pattern using the WordPress HTTP API:

$response = wp_remote_get( 'https://api.example.com/v1/products?limit=10', [
    'timeout' => 10,
    'headers' => [
        'Accept'        => 'application/json',
        'Authorization' => 'Bearer ' . YOUR_API_TOKEN,
    ],
] );

if ( ! is_wp_error( $response ) && wp_remote_retrieve_response_code( $response ) === 200 ) {
    $data = json_decode( wp_remote_retrieve_body( $response ), true );
    // Render $data in a shortcode, block, or template.
}

Important note before you go live

Do not deploy these snippets straight to production. Implement and test on a staging site first, ensure data protection requirements are met, and have a developer review performance, security, and error handling for your exact scenario.

Need some help?

Need some help integrating an API to your site? Contact us and our friendly team would be happy to discuss your project API requirements with you.