Як у Contact Form 7 дані форми передати у зовнішній API
Привіт:) У цьому пості покажу покажу як передати дані форми Contact Form 7 у зовнішній API.
Для прикладу використовуватиму безкоштовний сервіс dummyjson.com для тестування роботи із зовнішніми API. Під'єднавшись до нього, створю пост із заголовком та поверну результат. Ресурс лише імітує роботу, але код нижче ви зможете використовувати для під'єднання до будь-якого іншого зовнішнього API, передаючи йому дані своєї форми та отримуючи результат.
Щоб передати дані форми, потрібен HTTP-метод POST, який використовується для відправлення даних на сервер. Сервіс dummyjson.com наводить приклад використання цього методу:
fetch('https://dummyjson.com/posts/add', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
title: 'I am in love with someone.',
userId: 5,
/* other post data */
})
})
.then(res => res.json())
.then(console.log);
Для початку потрібна URL-адреса, на яку потрібно відправити дані та отримати результат. У моєму прикладі це https://dummyjson.com/posts/add. Далі HTTP-метод — POST. У заголовках необхідно вказати формат тіла повідомлення — JSON. Тіло повідомлення складається із назви поста та ID користувача — 5.
Якщо запит успішний, сервер повинен видати результат:
{
"id": 252,
"title": "I am in love with someone.",
"userId": 5
/* other post data */
}
Також для прикладу я створив форму.
Дані поля [your-subject]
передаватиму як назву поста.
З'єднання із зовнішнім API відбуватиметься після успішного відправлення форми. Для цього використаю хук wpcf7_mail_sent
.
Розмістіть код нижче у файлі functions.php.
/**
* Connect CF7 with a external API
*/
if ( ! function_exists( 'mp_external_api_cf7_connection' ) ) {
add_action( 'wpcf7_mail_sent', 'mp_external_api_cf7_connection' );
function mp_external_api_cf7_connection( $contact_form ) {
// Отримання ID форми
$form_id = $contact_form->id();
// Перевірка, чи відповідає ID форми конкретному значенню
if ( $form_id == 484 ) {
// Отримання значень форми
$submission = WPCF7_Submission::get_instance();
if ( $submission ) {
$submitted_data = $submission->get_posted_data();
$endpoint = 'https://dummyjson.com/posts/add';
$articleTitle = '';
$articleTitle = sanitize_text_field( $submitted_data['your-subject'] );
$userId = '';
$userId = 5;
// Тіло запиту із назвою поста та ID користувача
$body = json_encode(
array(
'title' => $articleTitle,
'userId' => $userId
)
);
// Формування запиту
$options = array(
'method' => 'POST',
'body' => $body,
'headers' => array(
'Content-Type' => 'application/json; charset=UTF-8',
),
'timeout' => 50,
);
// Надсилання запиту та отримання відповіді від сервера
$response = wp_remote_post( $endpoint, $options );
// Отримання коду відповіді від сервера
$response_code = wp_remote_retrieve_response_code( $response );
if ( ! is_wp_error( $response ) && $response_code === 200 ) {
// Якщо відповідь успішна
$response_body = wp_remote_retrieve_body( $response );
$response_body_obj = json_decode( wp_remote_retrieve_body( $response ) );
error_log( print_r( $response_body, true ) );
} else {
// Якщо виникла помилка
$error_message = $response->get_error_message();
error_log( print_r( 'Error:' . $error_message, true ) );
}
}
}
}
}
У коді рядок if ( $form_id == 484 ) {}
перевіряє ID конкретної форми. Його можна знайти в адресному рядку браузера. Для цього в URL-адресі знайдіть параметр post
. Числове значення, яке слідує справа після знаку "=
", і є цим унікальним ID форми. Наприклад, post=99
. Тут 99
— унікальний ідентифікатор.
Далі відправляю форму.
Після успішного її відправлення у файл логів /wp-content/debug.log буде записаний результат відповіді сервера.
[28-May-2024 12:25:51 UTC] {"id":252,"title":"Як створити машину часу","userId":5}
Приклад вище з'єднання із зовнішнім API базується на функціях та методах мови PHP. Також є можливість передати дані форми за допомогою JavaScript. У найпростішому варіанті це виглядатиме так:
document.addEventListener( 'wpcf7submit', function( event ) {
if ( '484' == event.detail.contactFormId ) {
var inputs = event.detail.inputs;
for ( var i = 0; i < inputs.length; i++ ) {
if ( 'your-subject' == inputs[i].name ) {
var yourSubject = inputs[i].value;
}
}
fetch('https://dummyjson.com/posts/add', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
title: yourSubject,
userId: 5,
})
})
.then(res => res.json())
.then(console.log);
}
}, false );
У коді береться значення текстового поля форми із назвою your-subject
та присвоюється змінній yourSubject
. Далі це значення підставляється у методі fetch()
. Також перевіряється ID форми. Весь функціонал реагує на DOM-подію wpcf7submit
(https://contactform7.com/dom-events/). Вона спрацьовує у випадку, коли надсилання форми AJAX успішно завершено, незалежно від інших інцидентів.