Contact Form 7: отправка данных формы через GraphQL в WordPress

Почему использовать GraphQL для отправки данных из Contact Form 7?

Contact Form 7 традиционно отправляет данные через email, но при интеграции с современными фронтендами или headless-решениями часто нужен API-интерфейс. REST API подходит, но GraphQL позволяет гибко запрашивать и отправлять ровно те данные, которые нужны, экономя трафик и упрощая обработку на клиенте. В WordPress GraphQL поддерживается плагином WPGraphQL, который становится стандартом для API.

Диагностика: как понять, что нужна интеграция с GraphQL?

• Вы используете фронтенд на React/Vue и хотите отправлять формы без перезагрузки.
• Нужно гибко интегрировать формы с внешними системами, основываясь на данных из GraphQL.
• Требуется единый API для сайта, где формы — часть общей схемы данных.

Пошаговое решение: отправка данных Contact Form 7 через GraphQL

1. Установка и настройка WPGraphQL

Установите официальный плагин WPGraphQL и активируйте его. Он автоматически добавляет endpoint /graphql на вашем сайте.

2. Создание кастомного GraphQL мутации для приема данных формы

Чтобы отправить данные Contact Form 7 через GraphQL, нужно создать свою мутацию, которая обработает данные, запустит валидацию и отправит письмо. Вот упрощенный пример добавления мутации через functions.php темы или кастомный плагин:

add_action('graphql_register_types', function() {
    register_graphql_mutation('submitContactForm7', [
        'inputFields' => [
            'yourName' => ['type' => 'String'],
            'yourEmail' => ['type' => 'String'],
            'yourMessage' => ['type' => 'String'],
        ],
        'outputFields' => [
            'success' => ['type' => 'Boolean'],
            'message' => ['type' => 'String'],
        ],
        'mutateAndGetPayload' => function($input, $context, $info) {
            $submission = WPCF7_Submission::get_instance();
            if (!$submission) {
                // Инициализируем отправку формы вручную
                $contact_form = WPCF7_ContactForm::get_instance(123); // ID вашей формы
                $posted_data = [
                    'your-name' => $input['yourName'],
                    'your-email' => $input['yourEmail'],
                    'your-message' => $input['yourMessage'],
                ];
                $result = $contact_form->submit($posted_data);
                if ($result['status'] === 'mail_sent') {
                    return ['success' => true, 'message' => 'Форма успешно отправлена'];
                } else {
                    return ['success' => false, 'message' => 'Ошибка при отправке формы'];
                }
            }
            return ['success' => false, 'message' => 'Невозможно получить данные формы'];
        }
    ]);
});

Замените 123 на ID вашей формы Contact Form 7. Этот код создает GraphQL мутацию submitContactForm7, которая принимает данные и отправляет форму.

3. Отправка данных из фронтенда с помощью GraphQL

Пример запроса на React для отправки формы:

const SUBMIT_FORM = `
mutation SubmitContactForm7($yourName: String, $yourEmail: String, $yourMessage: String) {
  submitContactForm7(input: {yourName: $yourName, yourEmail: $yourEmail, yourMessage: $yourMessage}) {
    success
    message
  }
}`;

const response = await client.mutate({
  mutation: gql(SUBMIT_FORM),
  variables: { yourName: 'Иван', yourEmail: 'ivan@mail.ru', yourMessage: 'Привет!' },
});

console.log(response.data.submitContactForm7.message);

Проверка результата после внедрения

• Отправьте форму через фронтенд с помощью GraphQL и проверьте, что вы получили ответ { success: true }.
• В админке Contact Form 7 проверьте логи отправки (если включены) и подтвердите получение письма.
• Проверьте, что данные из формы корректно обрабатываются и нет ошибок в логах сервера.

Частые ошибки и их исправление

• Ошибка: Мутация не регистрируется или возникает ошибка GraphQL.
  Причина: Плагин WPGraphQL не активирован или код регистрации мутации написан с ошибками.
  Решение: Проверьте активацию плагина и синтаксис PHP кода.
• Ошибка: Невозможно отправить форму, submit возвращает ошибку.
  Причина: Неверный ID формы, отсутствуют обязательные поля.
  Решение: Убедитесь, что ID формы указан правильно, и передаются все обязательные поля.
• Ошибка: Письма не отправляются, хотя мутация успешна.
  Причина: Проблемы с почтовым сервером WordPress.
  Решение: Настройте SMTP через плагин WP Mail SMTP или аналогичный.

Практические советы по безопасности и производительности

• Добавьте проверку nonce или авторизации пользователя в мутацию, чтобы избежать спама и несанкционированного доступа.
• Ограничьте количество запросов к мутации с одной IP через WP_REST_Cache или аналогичные механизмы.
• Логируйте ошибки отправки отдельно для быстрого анализа проблем.
• Кешируйте схему GraphQL, чтобы ускорить работу API на больших сайтах.

Сравнение вариантов интеграции Contact Form 7 с API