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>
Copied to clipboard

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>
Copied to clipboard

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.
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>
Copied to clipboard

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
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>
Copied to clipboard

Allowed attributes:

name * Field name. You can use it to extract the field value.
content * Text.
value Field value.
name * Field name. You can use it to extract the field value.
content * Text.
value Field 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>
Copied to clipboard

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.
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>
Copied to clipboard

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.
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.
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>
Copied to clipboard

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");
?>
Copied to clipboard

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/"
    }
]
Copied to clipboard

The processing result will be displayed on the Turbo page: