Formsend
Кабинет

Документация Formsend

Formsend принимает заявки с форм на вашем сайте и отправляет их вам в Telegram или ВКонтакте. Вставьте код на сайт — и всё работает. Программист не нужен.

Быстрый старт

Начните получать заявки за 3 шага:

  1. Добавьте сайт в личном кабинете. Вы получите код для вставки.
  2. Скопируйте код со страницы настроек сайта.
  3. Вставьте код на ваш сайт перед </body>.
Совет
Один код работает со всеми формами на странице. Чтобы различать их, добавьте скрытое поле form_name.

Самый простой способ

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

Рекомендуем
Это самый быстрый способ. Код сам найдёт все формы и будет отправлять данные в Formsend.
HTML (вставьте перед </body>) 
<script
    src="https://formsend.ru/formsend.min.js"
    data-formsend-key="YOUR_PUBLIC_KEY"
    defer>
</script>

Готово! Теперь все формы на странице будут отправлять заявки вам.

Другой способ: через HTML

Если вы хотите, чтобы форма отправлялась напрямую, укажите адрес Formsend в action. После отправки пользователь будет перенаправлен на страницу успеха.

HTML 
<form action="https://formsend.ru/webhooks/YOUR_PUBLIC_KEY" method="POST">
  <input type="text" name="name" required placeholder="Имя">
  <input type="email" name="email" required placeholder="Email">
  <textarea name="message" placeholder="Сообщение"></textarea>
  
  <!-- Опционально: перенаправление после отправки -->
  <input type="hidden" name="_next" value="https://mysite.com/thanks.html">
  
  <button type="submit">Отправить</button>
</form>

Для разработчиков: через JavaScript

Если вам нужна отправка без перезагрузки страницы, используйте fetch.

JavaScript 
const form = document.querySelector('#contact-form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  
  const formData = new FormData(form);
  
  try {
    const response = await fetch('https://formsend.ru/webhooks/YOUR_PUBLIC_KEY', {
      method: 'POST',
      body: formData // Или JSON: JSON.stringify(Object.fromEntries(formData))
    });
    
    if (response.ok) {
      alert('Спасибо! Заявка отправлена.');
      form.reset();
    }
  } catch (error) {
    console.error('Ошибка:', error);
  }
});

Интеграция через HTML

Совет: Это самый надежный способ. Он работает, даже если у пользователя установлен строгий AdBlock или отключен JavaScript.

Самый простой способ — прямая отправка формы на наш сервер. Браузер отправит данные, и пользователь будет перенаправлен на страницу успеха (или обратно, если настроен редирект).

HTML 
<form action="https://formsend.ru/webhooks/YOUR_PUBLIC_KEY" method="POST">
  <input type="text" name="name" required placeholder="Имя">
  <input type="email" name="email" required placeholder="Email">
  <textarea name="message" placeholder="Сообщение"></textarea>
  
  <!-- Опционально: перенаправление после отправки -->
  <input type="hidden" name="_next" value="https://mysite.com/thanks.html">
  
  <button type="submit">Отправить</button>
</form>

Интеграция через JavaScript

Для SPA приложений или отправки без перезагрузки страницы используйте fetch.

JavaScript 
const form = document.querySelector('#contact-form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  
  const formData = new FormData(form);
  
  try {
    const response = await fetch('https://formsend.io/webhooks/YOUR_PUBLIC_KEY', {
      method: 'POST',
      body: formData // Или JSON: JSON.stringify(Object.fromEntries(formData))
    });
    
    if (response.ok) {
      alert('Спасибо! Заявка отправлена.');
      form.reset();
    }
  } catch (error) {
    console.error('Ошибка:', error);
  }
});

JS Snippet

Самый простой способ для большинства сайтов. Скрипт сам найдет все формы и обработает отправку.

⚠️ В редких случаях внешние скрипты могут блокироваться "параноидальными" настройками браузеров. Для 100% гарантии используйте HTML интеграцию выше.

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

HTML (перед </body>) 
<script
    src="https://formsend.io/formsend.min.js"
    data-formsend-key="YOUR_PUBLIC_KEY"
    defer>
</script>

Примеры для фреймворков

Готовые примеры интеграции для популярных JavaScript фреймворков.

React

React Component 
import { useState } from 'react';

function ContactForm() {
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    
    const formData = new FormData(e.target);
    
    try {
      const response = await fetch(
        'https://formsend.ru/webhooks/YOUR_PUBLIC_KEY',
        { method: 'POST', body: formData }
      );
      
      if (response.ok) {
        setMessage('Спасибо! Заявка отправлена.');
        e.target.reset();
      }
    } catch (error) {
      setMessage('Ошибка отправки');
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" required />
      <input type="email" name="email" required />
      <button disabled={loading}>
        {loading ? 'Отправка...' : 'Отправить'}
      </button>
      {message && <p>{message}</p>}
    </form>
  );
}

Vue 3

Vue Component 
<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.name" type="text" required />
    <input v-model="form.email" type="email" required />
    <button :disabled="loading">
      {{ loading ? 'Отправка...' : 'Отправить' }}
    </button>
    <p v-if="message">{{ message }}</p>
  </form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({ name: '', email: '' });
const loading = ref(false);
const message = ref('');

const handleSubmit = async () => {
  loading.value = true;
  const formData = new FormData();
  Object.entries(form.value).forEach(([k, v]) => 
    formData.append(k, v)
  );
  
  try {
    const res = await fetch(
      'https://formsend.ru/webhooks/YOUR_PUBLIC_KEY',
      { method: 'POST', body: formData }
    );
    if (res.ok) message.value = 'Отправлено!';
  } finally {
    loading.value = false;
  }
};
</script>

Next.js Server Action

Next.js 14+ 
// app/actions.ts
'use server';
export async function submitForm(formData: FormData) {
  const res = await fetch(
    'https://formsend.ru/webhooks/YOUR_PUBLIC_KEY',
    { method: 'POST', body: formData }
  );
  return { success: res.ok };
}

// app/contact/page.tsx
'use client';
import { submitForm } from './actions';
import { useFormState } from 'react-dom';

export default function ContactPage() {
  const [state, formAction] = useFormState(submitForm, null);
  
  return (
    <form action={formAction}>
      <input type="text" name="name" required />
      <input type="email" name="email" required />
      <button type="submit">Отправить</button>
      {state?.success && <p>Отправлено!</p>}
    </form>
  );
}

Какие поля получать

Можно настроить, чтобы получать только нужные поля, а остальное игнорировать.

В настройках укажите список полей через запятую: name, phone, email.

Безопасность

Проверка подлинности

Для разработчиков: можно проверять, что заявка пришла именно с вашего сайта.

  1. Создайте секретный ключ в настройках.
  2. Formsend добавит специальный заголовок X-Formsend-Signature к каждой заявке.

Защита от спама

Ограничивает количество отправок с одного IP. По умолчанию 60 в минуту.

Ограничение размера

Ограничивает максимальный размер сообщения. Полезно, чтобы не принимать слишком большие тексты.

Telegram Интеграция

Получайте уведомления о новых заявках прямо в Telegram!

1. Получите Chat ID

  1. Откройте бота: @formsendru_bot
  2. Нажмите Start или отправьте команду /start
  3. Бот пришлет вам ваш Chat ID
  4. Скопируйте этот Chat ID

2. Настройте в личном кабинете

  1. Перейдите в настройки проекта
  2. Включите Telegram
  3. Вставьте полученный Chat ID
  4. Сохраните настройки
Совет
Вы можете добавить бота в группу и получать уведомления там. Для этого добавьте бота в группу и отправьте /start — бот пришлет Chat ID группы.

3. Готово!

Теперь все новые заявки будут приходить в Telegram с полной информацией о клиенте.

VK Интеграция

Для получения уведомлений в ВКонтакте необходимо настроить токен сообщества.

1. Получите токен

  1. Создайте сообщество ВКонтакте (или используйте существующее).
  2. Зайдите в Управление → Работа с API → Ключи доступа.
  3. Создайте ключ с правами: Сообщения сообщества.

2. Узнайте Peer ID

  • Для личных сообщений: ваш ID страницы (число, например 123456789).
  • Для беседы: 2000000000 + ID беседы.

3. Разрешите сообщения

Обязательно напишите любое сообщение в сообщения вашего сообщества, чтобы разрешить боту отвечать вам.

Частые вопросы

Почему сервер всегда возвращает 200 OK?

Мы принимаем данные асинхронно. Если формат верный (JSON или FormData), мы ставим задачу в очередь. Ошибки доставки (например, в VK) видны в логах, но не блокируют ответ клиенту.

Данные не приходят в VK

Проверьте: 1) Включена ли интеграция в настройках. 2) Валиден ли токен. 3) Разрешили ли вы сообщения сообществу (написав ему первым).