Отправить переменную формы Contact form 7 на фронт после отправки

Содержание

Вопрос или проблема
Ответ или решение
1. Использование хука для отображения сообщения
2. Использование JavaScript для более обширного интерфейса
Заключение

Вопрос или проблема

У меня есть форма contact form 7, которая отправляет информацию в API. Я хочу отобразить ответ API на фронтенде.

Я записываю информацию пользователя, затем отправляю ее с помощью wp_remote_post, используя мой пример URL. Я хочу иметь возможность показать ответ API / $body на фронтенде. Я настроил его для захвата в журнал отладки, но хочу знать, есть ли способ отправить его на фронтенд, где находится моя форма.

Обычные VAR Dump и print_r не работают, так как contact form 7 является функцией Ajax.

add_action('wpcf7_mail_sent','Kiri_cf7_api_sender');

 function Kiri_cf7_api_sender ( $contact_form) {
     
     if ( $contact_form->title === 'Quote_form')
     {
        $submission = WPCF7_Submission::get_instance();

        if ($submission) 
        {
            $posted_data = $submission->get_posted_data();
            
            $name = $posted_data["your-name"];
            $surname = $posted_data["your-name2"];
            $phone = $posted_data["tel-922"];
            
            //пример URL//
            $url = www.mytestapi.com?$name&$surname&$phone;
            
            $response = wp_remote_post ($url);
            $body = wp_remote_retrieve_body( $response );

            ob_start();                     // начало захвата буфера

    var_dump($name);
    var_dump($surname);
    var_dump($phone);
    
    $contents = ob_get_contents();  // помещаем буфер в переменную
    ob_end_clean();                 // заканчиваем захват
    error_log($contents); 
        }
     }
 }

У меня есть форма contact form 7, которая отправляет информацию в API. Я хочу отобразить ответ API на фронтенде.

Есть 2 способа решения этой проблемы,

1- Используйте хук ответа сообщения плагина CF7,

add_filter('wpcf7_display_message', 'my_response_msg',10,2);
function my_response_msg($message, $status){
    if('mail_sent_ok'==$status){
      $form = wpcf7_get_current_contact_form(); //в случае, если вам нужен объект формы cf7 для валидации....
      $message="Ответ API: ". $api;
    }
  return $message;
}

Однако имейте в виду, что вы можете использовать только текст в этом сообщении, HTML-разметка не будет работать из-за ограничений плагина CF7, о которых сообщалось здесь и здесь, и, как вы можете понять, эта функциональность действительно существовала, но автор плагина, как правило, игнорирует такого рода проблемы.

2- Если вам нужен более богатый интерфейс, вы можете либо перенаправить процесс отправки формы на другую страницу, на которой вы отображаете свой ответ API, сохранив его во временном хранилище, используя аналогичную логику этого ответа…

Либо вы можете загрузить пользовательский JavaScript на страницу формы, который вы запускаете при успешной отправке CF7 wpcf7mailsent события, а затем получить запрос API, хранящийся как временное хранилище на сервере, с помощью AJAX-запроса.

Ответ или решение

Когда вы работаете с плагином Contact Form 7 (CF7) для отправки данных в API и хотите отображать ответ этого API на фронтенде, вам следует учитывать несколько аспектов. Ваш запрос включает в себя отправку данных через API, получение ответа и его отображение, что может быть реализовано различными способами. Давайте рассмотрим оба подхода для реализации этой функциональности.

1. Использование хука для отображения сообщения

Одним из простых способов получения ответа API и его отображения в форме после успешной отправки является использование фильтра wpcf7_display_message. Вы можете расширить сообщением, которое отображается пользователю после отправки формы. Однако вам потребуется предусмотреть, что в этом сообщении не будет поддерживаться HTML-код, что может ограничить ваши возможности по его стилизации.

add_action('wpcf7_mail_sent', 'Kiri_cf7_api_sender');

function Kiri_cf7_api_sender($contact_form) {
    if ($contact_form->title === 'Quote_form') {
        $submission = WPCF7_Submission::get_instance();

        if ($submission) {
            $posted_data = $submission->get_posted_data();
            $name = $posted_data["your-name"];
            $surname = $posted_data["your-name2"];
            $phone = $posted_data["tel-922"];

            // Пример URL
            $url = "https://www.mytestapi.com?name=" . urlencode($name) . "&surname=" . urlencode($surname) . "&phone=" . urlencode($phone);
            $response = wp_remote_post($url);
            $body = wp_remote_retrieve_body($response);

            // Сохраняем ответ в Transient
            set_transient('cf7_api_response', $body, 60); // хранить 60 секунд
        }
    }
}

add_filter('wpcf7_display_message', 'my_response_msg', 10, 2);
function my_response_msg($message, $status) {
    if ('mail_sent_ok' === $status) {
        $api_response = get_transient('cf7_api_response');
        if ($api_response) {
            $message .= "<br>Ответ от API: " . esc_html($api_response); // добавление ответа к сообщению
            delete_transient('cf7_api_response'); // очищаем transient
        }
    }
    return $message;
}

2. Использование JavaScript для более обширного интерфейса

Если вам требуется более интерактивный подход, чем простой текст сообщения, вы можете использовать JavaScript для обработки события успешной отправки и отображения ответа. Для этого можете подписаться на событие wpcf7mailsent, которое срабатывает после успешной отправки формы:

document.addEventListener('wpcf7mailsent', function(event) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/wp-json/myplugin/v1/get-api-response', true);

    xhr.onload = function () {
        if (xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            alert('Ответ от API: ' + response.data); // вы можете заменить alert чем-то более подходящим
        }
    };

    xhr.send();
}, false);

На серверной стороне создайте маршрут для обработки запроса:

add_action('rest_api_init', function () {
    register_rest_route('myplugin/v1', '/get-api-response/', array(
        'methods' => 'GET',
        'callback' => 'get_api_response',
    ));
});

function get_api_response() {
    // Предполагая, что ответ был сохранен в transient
    $api_response = get_transient('cf7_api_response');
    delete_transient('cf7_api_response'); // очищаем transient
    return new WP_REST_Response(['data' => $api_response], 200);
}

Заключение

Таким образом, есть два основных подхода для отображения ответа API после отправки формы CF7. Первый вариант позволяет легко добавлять ответ в текстовое сообщение, в то время как второй требует больше усилий, но предоставляет возможность создавать более интерактивный интерфейс. Выбор между ними зависит от ваших бизнес-требований и предпочтений в пользовательском интерфейсе.

Рекомендую протестировать оба подхода и выбрать тот, который лучше соответствует вашим нуждам. Обязательно учитывайте безопасность данных и очистку выходных данных перед их отображением на сайте, чтобы избежать угроз XSS.