Встройте Форму на свой сайт с помощью сгенерированного компонента

Форме не нужна страница FormFlow. Если у вас уже есть сайт, вы можете вставить в него сгенерированный компонент Формы и оставить посетителей на своих страницах. В этом руководстве — копирование, вставка и две вещи, которые чаще всего удивляют потом: куда попадает посетитель после нажатия «Отправить» и что происходит, когда вы позже меняете поля Формы. Встраивание есть в FormFlow начиная с v1.0.0.

Что вам понадобится

Форма хотя бы с одним полем и ваша собственная страница, куда можно вставить HTML, либо файл Blade, Vue или React. Размещённая страница не нужна, она доступна только на платном тарифе. «Получить код» не проверяет ваш тариф, поэтому Команда на тарифе Free тоже может встроить Форму. Лимит Отправок по тарифу по-прежнему действует для того, что получает Форма.

Скопируйте сгенерированный компонент

1. Откройте Форму в панели. В заголовке редактора нажмите «Получить код». У Формы, которая ещё не получала ни одной Отправки, это выделенная кнопка. У всех остальных Форм она находится в «Инструментах». В списке Форм действие «Получить код» есть и в каждой строке.

2. Окно называется «Готовый компонент для вставки». Его первая строка — «Направьте вашу форму на», а затем адрес Формы, который заканчивается токеном Формы. Этот адрес — единственное, что нужно вашей странице.

3. Выберите Стиль. Один Стиль управляет всеми вкладками и «Предпросмотром»; по умолчанию выбран Minimal. Стиль записывается в копию, поэтому чтобы сменить Стиль позже, копировать придётся заново.

4. Выберите вкладку для вашего стека: HTML, Blade, Vue или React. Вкладка «Предпросмотр» показывает HTML-версию прямо в панели, так что вы можете всё проверить, прежде чем что-либо вставлять.

5. Нажмите значок «Скопировать в буфер обмена» в верхней части вкладки и вставьте результат на свою страницу туда, где должна появиться Форма.

Что содержит HTML-копия

Вкладка HTML — это обычная форма, которая отправляет данные на адрес вашей Формы. Ниже сокращённый пример для Формы с полем «Электронная почта». YOUR_FORM_TOKEN заменяет токен, а в настоящей копии первым идёт элемент style с CSS выбранного Стиля.

<form action="https://formflow.digital/api/v1/f/YOUR_FORM_TOKEN" class="ff-form" lang="en" dir="ltr" method="post">
    <div class="ff-group">
        <label class="ff-label" for="ff-email" dir="auto">Email<span aria-hidden="true"> *</span></label>
        <input class="ff-input" id="ff-email" name="email" type="email" dir="auto" autocomplete="email" required>
    </div>
    <!-- ...one group per field... -->

    <div aria-hidden="true" class="ff-honeypot">
        <label for="ff-ff_xxxxxxxx">Leave this field empty</label>
        <input autocomplete="off" id="ff-ff_xxxxxxxx" name="ff_xxxxxxxx" tabindex="-1" type="text">
    </div>

    <button class="ff-button" type="submit">Send</button>
</form>

Две части заслуживают пояснения. Имена полей, например name="email", — это то, что отображается как ответы в ваших Отправках, поэтому меняйте их в Форме, а не на своей странице. Поле вне экрана — ловушка для спама: люди его не видят, а боты, как правило, заполняют. Его имя генерируется для каждой Формы, здесь оно показано как ff_xxxxxxxx. Оставьте его на месте.

Решите, куда попадут посетители

Копии HTML и Blade — нативные формы. Когда кто-то нажимает «Отправить», браузер отправляет данные в FormFlow и показывает всё, что FormFlow ответит. Без перенаправления этот ответ — короткое сообщение JSON. Оно точное, но читать его посетителю не нужно. Панель говорит об этом рядом с настройкой: «Отправители простой HTML-формы будут перенаправлены на необработанный ответ JSON.»

1. В редакторе Формы откройте вкладку «Доставка».

2. В разделе «Куда попадает отправитель» заполните поле «Перенаправлять пользователей на» адресом страницы с благодарностью на вашем сайте. Это должен быть адрес http или https.

3. Сохраните Форму.

Копии React и Vue работают иначе. Они отправляют данные в фоне и показывают собственное сообщение с подтверждением прямо на месте, поэтому перенаправление важно только для HTML и Blade.

Ограничьте источники отправок

По умолчанию Форма принимает отправку из любого источника. На вкладке «Безопасность» в разделе «Откуда могут приходить отправки» поле «Разрешённые источники» принимает только имена хостов, без схемы и пути. В подсказке к нему сказано, что пустой список разрешает любой источник. Добавьте имя хоста вашего сайта, например example.com, и отправки из других источников будут отклоняться. Переключатель под ним, «Отклонять отправки без заголовка Origin», отклоняет и те отправки, в которых источник вообще не указан.

Если тестовая отправка с вашей страницы отклонена, обычная причина — опечатка в имени хоста. FormFlow сохраняет отклонённые Отправки, с которыми можно что-то сделать, поэтому исправьте список, а затем найдите их в разделе «Отклонено» в панели, чтобы восстановить.

Turnstile и ваша Content Security Policy

Ещё две вещи относятся к вам, только если вы ими пользуетесь. Во-первых, переключатель «Требовать проверку Turnstile» на вкладке «Безопасность». Встроенный ключ Turnstile от FormFlow покрывает только страницы, которые размещает FormFlow, поэтому на вашем собственном сайте нужен собственный ключ Cloudflare Turnstile, введённый в «Настройках команды». Без него в копии остаётся заглушка YOUR_TURNSTILE_SITE_KEY, а каждая отправка с вашей страницы оценивается как спам.

Во-вторых, если ваш сайт отправляет Content Security Policy, «Получить код» выводит директивы, которые нужно добавить, в строке, начинающейся с «Если на вашем сайте используется Content Security Policy (CSP)». Для обычной копии это script-src, разрешающий 'self' и challenges.cloudflare.com, frame-src для challenges.cloudflare.com и connect-src для источника адреса вашей Формы. Копируйте строку из окна, а не отсюда, потому что она составлена для вашей Формы.

Проверьте, что всё работает

1. Откройте свою страницу и отправьте тестовую запись через вставленную форму.

2. Убедитесь, что вы попали туда, куда ожидаете: на страницу с благодарностью или к сообщению с подтверждением в копии React или Vue.

3. Откройте «Отправки» в панели и найдите запись. Если её нет, проверьте «Отклонено», прежде чем что-либо менять.

Ограничения, о которых стоит знать

• Вставленная копия не следует за последующими изменениями полей Формы, если вы не используете «Динамический рендеринг» или не копируете заново.

• Стиль фиксируется при копировании. Позже изменить его из Формы нельзя.

• Перенаправление применяется только к нативным формам.

• «Разрешённые источники» сужают браузерный трафик. Они никого не аутентифицируют.