Динамическая форма

Чтобы разместить динамическую форму, используйте элемент form с атрибутами data-type="dynamic-form" и end_point:

<form data-type="dynamic-form" end_point="http://exmaple.com/post-form.php">
    <div type="input-block">
        <span type="input" name="fio" label="Имя" input-type="text" placeholder="Иван Иванов" required="true"></span>
        <span type="input" name="phone" label="Телефон" input-type="text" placeholder="8-ХХХ-ХХХ-ХХ-ХХ" required="true"></span>
        <span type="radio" name="delivery" label="Выбор способа доставки">
            <span
                type="option"
                value="pickup"
                checked="true"
                label="Самовывоз, Бесплатно"
                meta="Сегодня">
            </span>
            <span
                type="option"
                value="courier1"
                checked="false"
                label="Курьером, 500₽"
                meta="1 день, Внутри МКАД">
            </span>
            <span
                type="option"
                value="courier2"
                checked="false"
                label="Курьером, 1500₽"
                meta="Сегодня, Снаружи МКАД">
            </span>
        </span>
        <span type="checkbox" name="sms" value="on" content="СМС оповещение о заказе"></span>
        <span type="textarea" name="comment" label="Комментарий" placeholder="Комментарий к заказу" required="false"></span>
        <button type="submit" text="Оформить заказ"></button>
    </div>
    <div type="result-block">
        <span type="text" field="description"></span>
        <span type="link" field="link"></span>
    </div>
</form>
Скопировано

end_point — URL ресурса, в котором происходит обработка данных формы. Параметры формы отправляются с помощью HTTP‑метода POST. Подробнее в разделе Особенности ресурса.

Элементы формы

<div type="input‑block">

Блок с полями ввода.

<span type="...">

Поле ввода, в котором можно реализовать:

Радиопереключатель

Чтобы разместить радиопереключатель, используйте элемент span с атрибутом type="radio". Он должен содержать минимум один вложенный элемент span с атрибутом type="option":

<span type="radio" name="delivery" label="Выбор способа доставки">
    <span
        type="option"
        value="pickup"
        checked="true"
        label="Самовывоз, Бесплатно"
        meta="Сегодня">
    </span>
    <span
        type="option"
        value="courier1"
        checked="false"
        label="Курьером, 500₽"
        meta="1 день, Внутри МКАД">
    </span>
    <span
        type="option"
        value="courier2"
        checked="false"
        label="Курьером, 1500₽"
        meta="Сегодня, Снаружи МКАД">
    </span>
</span>
Скопировано

Допустимые атрибуты:


`name` *	Название поля. По нему можно извлечь значение поля.
`value` *	Значение опции.
`label` *	Заголовок поля. Оно отображается на Турбо-странице.
`meta` *	Подпись к названию.
`checked`	Определяет элемент выбранным по умолчанию. Допустимые значения: `true` \| `false`.


`name` *	Название поля. По нему можно извлечь значение поля.
`value` *	Значение опции.
`label` *	Заголовок поля. Оно отображается на Турбо-странице.
`meta` *	Подпись к названию.
`checked`	Определяет элемент выбранным по умолчанию. Допустимые значения: `true` \| `false`.

* Обязательный атрибут.

Раскрывающийся список с меню

Чтобы разместить раскрывающийся список с меню, используйте элемент span с атрибутом type="select". Он должен содержать минимум один вложенный элементspan с атрибутом type="option":

<span type="select" name="city" label="Выберите город" value="moscow">
    <span
        type="option"
        value="moscow"
        text="Москва">
    </span>
    <span
        type="option"
        value="saint-petersburg"
        text="Санкт-Петербург">
    </span>
    <span
        type="option"
        value="yekaterinburg"
        text="Екатеринбург">
    </span>
</span>
Скопировано

Допустимые атрибуты:


`name` *	Название поля. По нему можно извлечь значение поля.
`label` *	Заголовок поля. Оно отображается на Турбо-странице.
`value` *	Значение пункта меню.
`text` *	Название пункта меню


`name` *	Название поля. По нему можно извлечь значение поля.
`label` *	Заголовок поля. Оно отображается на Турбо-странице.
`value` *	Значение пункта меню.
`text` *	Название пункта меню

* Обязательный атрибут.

Чекбокс

Чтобы разместить чекбокс, используйте элемент span с атрибутом type="checkbox":

<span
    type="checkbox"
    name="sms"
    value="on"
    content="СМС оповещение о заказе">
</span>
Скопировано

Допустимые атрибуты:


`name` *	Название поля. По нему можно извлечь значение поля.
`content` *	Текст.
`value`	Значение поля.

* Обязательный атрибут.

Многострочное текстовое поле

Чтобы разместить многострочное текстовое поле, используйте элемент span с атрибутом type="textarea":

<span
    type="textarea"
    name="text"
    label="Комментарий"
    placeholder="Комментарий к заказу"
    required="true">
</span>
Скопировано

Допустимые атрибуты:


`name` *	Название поля. По нему можно извлечь значение поля.
`label` *	Заголовок поля. Оно отображается на Турбо-странице.
`required` *	Указывает, что поле обязательное для заполнения.
`placeholder`	Текст, который отображается в поле по умолчанию.
`value`	Значение по умолчанию.


`name` *	Название поля. По нему можно извлечь значение поля.
`label` *	Заголовок поля. Оно отображается на Турбо-странице.
`required` *	Указывает, что поле обязательное для заполнения.
`placeholder`	Текст, который отображается в поле по умолчанию.
`value`	Значение по умолчанию.

* Обязательный атрибут.

Однострочное текстовое поле

Чтобы разместить однострочное текстовое поле, используйте элемент span с атрибутом type="input":

<span
    type="input"
    name="fio"
    label="Имя"
    input-type="text"
    placeholder="Иван Иванов"
    required="true">
</span>
Скопировано

Допустимые атрибуты:


`name` *	Название поля. По нему можно извлечь значение поля.
`label` *	Заголовок поля. Оно отображается на Турбо-странице.
`input-type` *	Допустимые типы: `text` \| `date` \| `number`.
`required` *	Указывает, что поле обязательное для заполнения.
`placeholder`	Текст, который отображается в поле по умолчанию.


`name` *	Название поля. По нему можно извлечь значение поля.
`label` *	Заголовок поля. Оно отображается на Турбо-странице.
`input-type` *	Допустимые типы: `text` \| `date` \| `number`.
`required` *	Указывает, что поле обязательное для заполнения.
`placeholder`	Текст, который отображается в поле по умолчанию.

* Обязательный атрибут.

<button type="submit">

Кнопка для отправки данных. Допустимые атрибуты:


`text` *	Текст на кнопке.

* Обязательный атрибут.

<div type="result‑block">

Блок с результатом. Должен содержать элементы span с атрибутами type="text" и type="link". Например:

<div type="result-block">
    <span type="text" field="description"></span>
    <span type="link" field="link"></span>
</div>
Скопировано

В блоке отображается ответ, который возвращает ресурс. Подробнее об обработке данных в разделе Особенности ресурса.

^*Обязательный параметр

Особенности и требования к ресурсу

Чтобы Турбо‑страницы могли взаимодействовать с ресурсом, разрешите Cross-Origin запросы для *.yandex.*, *.turbopages.org. Пример реализации проверки:

<?php 
/**
 * Определение возможности доступа к API.
 */
function turbo_get_allow_origin() {
    $http_origin = $_SERVER['HTTP_ORIGIN'];
    if (preg_match('/^(https:\/\/(?:.*\.)?yandex\.(?:ru|by|uz|com|com\.tr))$/', $http_origin, $matches)) {
        return $matches[0];
    } else if (preg_match('/^(https:\/\/(?:.*\.)?turbopages.org)$/', $http_origin, $matches)) {
        return $matches[0];
    }
    return null;
}

$http_allow_origin = turbo_get_allow_origin();
if (is_null($http_allow_origin)) {
    // Если доступа нет, должен вернуться код ответа 403.
    http_response_code(403);
    exit('Access denied');
}
// Отправка CORS-заголовков.
header("Access-Control-Allow-Origin: " . $http_allow_origin);
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Headers: Origin, Content-Type, Content-Length, Accept-Encoding");
// Отправка заголовка о том, что данные возвращаются в формате JSON.
header("Content-Type: application/json;charset=utf-8");
?>
Скопировано

Ресурс должен возвращать ответ в формате JSON. Например:

[
    {
       "field": "description",
       "value": "Заказ успешно оформлен. Ваш номер заказа:"
    },
    {
       "field": "link",
       "value": "123456",
       "href": "https://example.com/cabinet/order/123456/"
    }
]
Скопировано

Результат обработки будет представлен на Турбо-странице:

Написать в службу поддержки