Dynamic form

To place a dynamic form, use the form element with the data-type="dynamic-form" and end_point attributes:

<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="Ivan Ivanov" required="true"></span>
        <span type="input" name="phone" label="Phone" input-type="text" placeholder="8-ХХХ-ХХХ-ХХ-ХХ" required="true"></span>
        <span type="radio" name="delivery" label="Delivery options">
            <span
                type="option"
                value="pickup"
                checked="true"
                label="Pickup, Free"
                meta="Today">
            </span>
            <span
                type="option"
                value="courier1"
                checked="false"
                label="Courier, ₽500"
                meta="1 day, Inside Moscow Ring">
            </span>
            <span
                type="option"
                value="courier2"
                checked="false"
                label="Courier, ₽1500"
                meta="Courier, Outside Moscow Ring">
            </span>
        </span>
        <span type="checkbox" name="sms" value="on" content="SMS notification about the order"></span>
        <span type="textarea" name="comment" label="Comment" placeholder="Order comment" required="false"></span>
        <button type="submit" text="Place the order"></button>
    </div>
    <div type="result-block">
        <span type="text" field="description"></span>
        <span type="link" field="link"></span>
    </div>
</form>

end_point: The URL of the resource where form data is processed. Form parameters are sent using the HTTP POST method. For more information, see Resource features.

Form elements

<div type="input‑block">*

Block with input fields.

<span type="...">*

An input field where you can implement:

Radio buttons

To place radio buttons, use the span element with the type="radio" attribute. It must contain at least one nested span element with the type="option" attribute:

<span type="radio" name="delivery" label="Delivery options">
    <span
        type="option"
        value="pickup"
        checked="true"
        label="Pickup, Free"
        meta="Today">
    </span>
    <span
        type="option"
        value="courier1"
        checked="false"
        label="Courier, ₽500"
        meta="1 day, inside Moscow ring">
    </span>
    <span
        type="option"
        value="courier2"
        checked="false"
        label="Courier, ₽1500"
        meta="Today, outside Moscow ring">
    </span>
</span>

Allowed attributes:

name*

Field name. You can use it to extract the field value.

value*

Option value.

label*

The field title. It's displayed on the Turbo page.

meta*

The name caption.

checked

Defines the item to be selected by default. Allowed values: true | false.

* Required attribute.

Drop-down list with menu

To place a drop-down list with a menu, use the span element with the type="select" attribute. It must contain at least one nested span element with the type="option" attribute:

<span type="select" name="city" label="Choose a city" value="moscow">
    <span
        type="option"
        value="moscow"
        text="Moscow">
    </span>
    <span
        type="option"
        value="saint-petersburg"
        text="Saint Petersburg">
    </span>
    <span
        type="option"
        value="yekaterinburg"
        text="Yekaterinburg">
    </span>
</span>

Allowed attributes:

name*

Field name. You can use it to extract the field value.

label*

The field title. It's displayed on the Turbo page.

value*

The value of the menu item.

text*

The menu item label

* Required attribute.

Checkbox

To place a checkbox, use the span element with the type="checkbox" attribute:

<span
    type="checkbox"
    name="sms"
    value="on"
    content="SMS notification about the order">
</span>

Allowed attributes:

name*

Field name. You can use it to extract the field value.

content*

Text.

value

value.

* Required attribute.

Multi-line text field

To place a multi-line text field, use the span element with the type="textarea" attribute:

<span
    type="textarea"
    name="text"
    label="Comment"
    placeholder="Order comment"
    required="true">
</span>

Allowed attributes:

name*

Field name. You can use it to extract the field value.

label*

The field title. It's displayed on the Turbo page.

required*

Specifies that the field is required.

placeholder

The default text in the field.

value

The default value.

* Required attribute.

Single-line text field

To add a single-line text field, use the span element with the type="input" attribute:

<span
    type="input"
    name="fio"
    label="Name"
    input-type="text"
    placeholder="Ivan Ivanov"
    required="true">
</span>

Allowed attributes:

name*

Field name. You can use it to extract the field value.

label*

The field title. It's displayed on the Turbo page.

input-type*

Allowed types: text | date | number.

required*

Specifies that the field is required.

placeholder

The default text in the field.

* Required attribute.

<button type="submit">*

Button for submitting data. Allowed attributes:

text*

The text on the button.

*Required attribute.

<div type="result‑block">*

Block with the result. Must contain the span element with the type="text" and type="link" attributes. Examples:

<div type="result-block">
    <span type="text" field="description"></span>
    <span type="link" field="link"></span>
</div>

The block displays the response that returns the resource. For more information about data processing, see Resource features.

* Required

Resource features and requirements

For Turbo pages to interact with a resource, allow Cross-Origin requests for *.yandex.*, *.turbopages.org. Verification implementation example:

<?php 
/**
 * Determine whether the API can be accessed.
 */
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)) {
    // If there's no access, the 403 response code is returned.
    http_response_code(403);
    exit('Access denied');
}
// Sending CORS headers.
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");
// Sending the header that indicates that the data is returned in JSON format.
header("Content-Type: application/json;charset=utf-8");
?>

The resource must return a response in JSON format. Examples:

[
    {
       "field": "description",
       "value": "Your order was processed. Your order number:"
    },
    {
       "field": "link",
       "value": "123456",
       "href": "https://example.com/cabinet/order/123456/"
    }
]

The processing result will be displayed on the Turbo page:

Contact support
Previous
Feedback form
Next
Histogram