Варианты интеграции с Яндекс.Формами: от iframe до REST API

Раздел: API и интеграции -> Формы

Интеграция с Яндекс.Формами: способы и примеры

Яндекс.Формы предоставляют несколько вариантов взаимодействия с внешними сайтами и приложениями. Выбор метода зависит от требуемой гибкости и уровня контроля над данными. Ниже рассмотрены основные подходы с примерами кода и типичными проблемами.

Как встроить форму Яндекс с возможностью отслеживания событий и кастомизации через JavaScript?

Наиболее эффективное решение – использование официальной библиотеки @yandex/forms-js. Она позволяет встраивать форму как полноценный компонент, подписываться на события (сабмит, ошибка) и изменять внешний вид.

Установка и подключение

Библиотека устанавливается через npm:

npm install @yandex/forms-js

Forms yandex js (интеграция с яндекс.формами)

Импорт в JavaScript:

import { YandexForm } from '@yandex/forms-js';

Js input (ввод данных в javascript)

Пример использования

Создайте контейнер в HTML:

<div id="form-container" style="width: 600px; height: 800px;"></div>

поле js (поле в javascript)

Затем инициализируйте форму:

const form = new YandexForm({
  id: 'ваш_id_формы',
  target: document.querySelector('#form-container'),
  locale: 'ru'
});

form.on('submit', (data) => {
  console.log('Форма отправлена', data);
});

form.on('error', (error) => {
  console.error('Ошибка при отправке', error);
});

form.render();

Js form name (свойство name формы в javascript)

Возможные проблемы и их решение

Форма не отображается: убедитесь, что контейнер имеет размеры (ширина/высота) и что скрипты загружены с правильным доменом. Проверьте консоль браузера на наличие ошибок CORS.
Ошибка 401 при инициализации: библиотека может требовать API-ключ, если форма защищена. Добавьте параметр token в конструктор.
Конфликты с другими библиотеками: используйте модульную систему (ES modules) и избегайте глобальных скриптов.

Как встроить форму Яндекс на сайт без программирования?

Самый простой способ – вставка iframe с готовой ссылкой из конструктора Яндекс.Форм.

<iframe src="https://forms.yandex.ru/u/ваш_идентификатор_формы/" width="100%" height="800" frameborder="0"></iframe>

форма js (форма js)

При необходимости можно настроить параметры (тему, язык) через query-параметры:

<iframe src="https://forms.yandex.ru/u/.../?theme=dark&lang=en"></iframe>

Типичные ошибки

Iframe не отображается: проверьте, что сайт работает по HTTPS, и заголовки CORS на стороне Яндекс не блокируют загрузку. Иногда требуется добавить атрибут allow="fullscreen".
Некорректные размеры: задавайте высоту через CSS или JavaScript, чтобы избежать скролла.

Как отправлять данные в Яндекс.Форму программно через REST API?

Для полного контроля над процессом используется REST API Яндекс.Форм. Требуется OAuth-токен с правом отправки ответов.

Пример на Node.js с использованием axios

const axios = require('axios');

const token = 'ваш_токен';
const formId = 'ваш_id_формы';
const url = `https://forms.yandex.ru/api/forms/${formId}/responses`;

const data = {
  field1: 'значение1',
  field2: 'значение2'
};

axios.post(url, data, {
  headers: {
    'Authorization': `OAuth ${token}`,
    'Content-Type': 'application/json'
  }
})
.then(response => {
  console.log('Ответ отправлен:', response.data);
})
.catch(error => {
  console.error('Ошибка:', error.response ? error.response.data : error.message);
});

Проблемы и решения

Ошибка 401 Unauthorized: токен устарел или не имеет прав. Обновите токен, используя рефреш токена.
CORS при запросе с клиента: API не поддерживает кросс-доменные запросы из браузера. Всегда делайте запросы с сервера.
Ошибка 429 Too Many Requests: превышен лимит (5 запросов в секунду). Добавьте задержку между запросами.

Как получать уведомления о новых ответах в реальном времени?

Для автоматической обработки ответов настройте вебхук в панели управления формой. Яндекс будет отправлять POST-запрос на указанный URL при каждом новом ответе.

Пример обработчика на Express.js

const express = require('express');
const app = express();
app.use(express.json());

app.post('/webhook', (req, res) => {
  const responseData = req.body;
  console.log('Новый ответ:', responseData);
  // Обработка данных (сохранение в БД, отправка уведомлений)
  res.status(200).send('OK');
});

app.listen(3000, () => {
  console.log('Сервер вебхука запущен на порту 3000');
});

Возможные сложности

Вебхук не приходит: убедитесь, что сервер доступен из интернета (используйте ngrok для тестирования) и URL указан верно. Проверьте настройки безопасности (HTTPS).
Повторная отправка: Яндекс может дублировать запросы. Реализуйте идемпотентность по идентификатору ответа.

Расширенные примеры интеграции

1. Использование @yandex/forms-js с React

Пример

import React, { useEffect, useRef } from 'react';
import { YandexForm } from '@yandex/forms-js';

const FormComponent = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    const form = new YandexForm({
      id: 'ваш_id_формы',
      target: containerRef.current,
      locale: 'ru'
    });

    form.on('submit', (data) => {
      console.log('Отправлено:', data);
    });

    form.render();

    return () => form.destroy(); // очистка при размонтировании
  }, []);

  return <div ref={containerRef} style={{ width: '100%', height: '700px' }} />;
};

export default FormComponent;

// В консоль будет выведено: Отправлено: { field1: 'value1', field2: 'value2' }

2. Отправка ответов с файлами через REST API

Пример

const fs = require('fs');
const axios = require('axios');
const FormData = require('form-data');

const token = 'ваш_токен';
const formId = 'ваш_id_формы';
const url = `https://forms.yandex.ru/api/forms/${formId}/responses`;

const formData = new FormData();
formData.append('field1', 'текстовое значение');
formData.append('file_field', fs.createReadStream('path/to/file.pdf'), 'document.pdf');

axios.post(url, formData, {
  headers: {
    'Authorization': `OAuth ${token}`,
    ...formData.getHeaders()
  }
})
.then(response => {
  console.log('Ответ с файлом отправлен:', response.data);
})
.catch(error => {
  console.error('Ошибка:', error.response ? error.response.data : error.message);
});

// Ответ сервера: { id: 'response_123', status: 'success' }

3. Получение списка ответов с пагинацией

Пример

const axios = require('axios');

const token = 'ваш_токен';
const formId = 'ваш_id_формы';

async function getAllResponses() {
  let page = 1;
  let allResponses = [];
  let hasMore = true;

  while (hasMore) {
    const url = `https://forms.yandex.ru/api/forms/${formId}/responses?page=${page}&page_size=100`;
    const response = await axios.get(url, {
      headers: { 'Authorization': `OAuth ${token}` }
    });

    const responses = response.data.results;
    allResponses = allResponses.concat(responses);
    hasMore = response.data.next !== null;
    page++;
  }

  console.log('Всего ответов:', allResponses.length);
  return allResponses;
}

getAllResponses().then(data => console.log(data)).catch(err => console.error(err));

// В консоль: Всего ответов: 123
// Массив объектов с данными ответов

4. Обработка ошибок с повторными попытками (retry)

Пример

const axios = require('axios');

async function sendWithRetry(url, data, token, retries = 3) {
  for (let attempt = 1; attempt <= retries; attempt++) {
    try {
      const response = await axios.post(url, data, {
        headers: { 'Authorization': `OAuth ${token}`, 'Content-Type': 'application/json' }
      });
      return response.data;
    } catch (error) {
      if (error.response && error.response.status === 429 && attempt < retries) {
        console.log(`Лимит запросов. Пауза перед повтором (попытка ${attempt})`);
        await new Promise(resolve => setTimeout(resolve, 1000 * attempt)); // экспоненциальная задержка
      } else {
        throw error;
      }
    }
  }
}

// Использование
const token = 'ваш_токен';
const formId = 'ваш_id_формы';
const url = `https://forms.yandex.ru/api/forms/${formId}/responses`;
sendWithRetry(url, { field1: 'test' }, token).then(console.log).catch(console.error);

// После успешной отправки: { id: 'response_456', status: 'success' }

Интеграция с Яндекс.Формами - comments

Forms yandex js (javascript)