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">
*<span type="...">
*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 . |
*Required attribute.
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 |
*Required attribute.
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:
*Required attribute.
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. |
*Required attribute.
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. |
*Required attribute.
<div type="result‑block">
*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
*.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: