Форма обратной связи

Вы можете добавить на Турбо‑страницу форму обратной связи. Поля формы предопределены:

  • телефон;

  • имя;

  • вопрос.

Форму можно разместить несколькими способами:

  • в специальном блоке обратной связи;

  • в тексте страницы;

  • в виде кнопки.

<form
    data-type="callback"
    data-send-to="mail@example.com"
    data-agreement-company="ООО Ромашка"
    data-agreement-link="http://example.com"
>
</form>

Атрибуты элемента form:

Атрибут

Описание

data-type*

Принимает значение callback.

data-send-to*

Позволяет указать адрес электронной почты, на который будет отправлено обращение пользователя.

data-agreement-company**

Позволяет указать юридическое название вашей организации. Например, ООО «Ромашка».

data-agreement-link***

Позволяет указать ссылку на пользовательское соглашение о предоставлении обратной связи.

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

** Атрибут становится обязательным, если указан атрибут data-agreement-link.

*** Атрибут становится обязательным, если указан атрибут data-agreement-company.

<button
    formaction="mailto:mail@example.com"
    data-background-color="white"
    data-color="black"
    data-primary="true"
    data-send-to="mail@example.com"
    data-agreement-company="ООО Ромашка"
    data-agreement-link="http://example.com"
>
    Оставить заявку
</button>

В этом случае при нажатии кнопки форма откроется поверх содержимого страницы. Чтобы добавить форму, придумайте название кнопки и оберните текст в элемент button. Элемент может включать в себя следующие атрибуты и их значения:

Атрибут

Описание

formaction

Email-адрес. В формате mailto:<email>.

data-background-color

Цвет кнопки. Возможные значения:

  • текстовое, например, white;

  • HEX, например, #FFFFFF.

Если атрибут не указан, используется серый цвет.

Таблица «безопасных» цветов, рекомендуемых для экранного дизайна.

data-color

Цвет текста. Возможные значения:

  • текстовое, например, white;

  • HEX, например, #FFFFFF.

Если атрибут не указан, используется серый цвет.

Таблица «безопасных» цветов, рекомендуемых для экранного дизайна.

data-primary

Выделение текста жирным. Возможные значения:

  • true;

  • false.

disabled

Позволяет отобразить кнопку неактивной.

data-send-to*

Позволяет указать адрес электронной почты, на который будет отправлено обращение пользователя.

data-agreement-company**

Позволяет указать юридическое название вашей организации. Например, ООО «Ромашка».

data-agreement-link***

Позволяет указать ссылку на пользовательское соглашение о предоставлении обратной связи.

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

** Атрибут становится обязательным, если указан атрибут data-agreement-link.

*** Атрибут становится обязательным, если указан атрибут data-agreement-company.

Написать в службу поддержки
Предыдущая
Комментарии
Следующая
Динамическая форма