Настройка стиля контактной формы
Когда вы добавляете контактную форму, она автоматически подстраивается под общий стиль сайта. Однако вы можете настроить её по своему усмотрению, изменив дизайн кнопки и полей.
Подсказка: если вы хотите установить контактную форму на своём сайте, обратитесь к статье Добавление контактной формы.
Откройте редактор своего сайта, наведите на нужную контактную форму и нажмите на «бегунок»:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-75-1_bd8t4m.png)
В окне настроек формы перейдите во вкладку Стиль и выберите раздел Кнопка:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1058_t3vmln.png)
Здесь вы сможете изменить текст, отображаемый в кнопке, а также его начертание — сделать текст жирным, добавить курсив или подчеркивание:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1059_12r5net.png)
Подсказка: шрифт в кнопке автоматически подстраивается под общий шрифт сайта. Детальнее об этом вы можете почитать в статье Изменение шрифта на сайте.
Вы также можете выбрать стиль для кнопки, который вы настроили в глобальных настройках, или выбрать альтернативный:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1061_1yct498.png)
Примечание: для того, чтобы изменить дизайн кнопок на сайте, обратитесь к статье Изменение дизайна кнопки.
Помимо этого вы можете добавить иконку в кнопку, а также изменить её выравнивание относительно текста:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1062_zamz1z.png)
Во вкладке Стиль в настройках формы перейдите в раздел Поля, чтобы отредактировать вид полей:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1063_8n6yfr.png)
Здесь вы можете выбрать тип полей — как именно будут отображаться границы для полей:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1064_14w1gi4.png)
Помимо этого, вы можете настроить цвет отдельно для каждого компонента в форме — границ, заливки, описания и самого текста в поле:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1065_vaiuv9.png)
Не забудьте опубликовать свой сайт, чтобы изменения вступили в силу.
Подсказка: не забудьте персонализировать поля в контактной форме, следуя инструкциям в статье Настройка полей в контактной форме.
Подсказка: если вы хотите установить контактную форму на своём сайте, обратитесь к статье Добавление контактной формы.
Настройка дизайна кнопки контактной формы
Откройте редактор своего сайта, наведите на нужную контактную форму и нажмите на «бегунок»:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-75-1_bd8t4m.png)
В окне настроек формы перейдите во вкладку Стиль и выберите раздел Кнопка:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1058_t3vmln.png)
Здесь вы сможете изменить текст, отображаемый в кнопке, а также его начертание — сделать текст жирным, добавить курсив или подчеркивание:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1059_12r5net.png)
Подсказка: шрифт в кнопке автоматически подстраивается под общий шрифт сайта. Детальнее об этом вы можете почитать в статье Изменение шрифта на сайте.
Вы также можете выбрать стиль для кнопки, который вы настроили в глобальных настройках, или выбрать альтернативный:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1061_1yct498.png)
Примечание: для того, чтобы изменить дизайн кнопок на сайте, обратитесь к статье Изменение дизайна кнопки.
Помимо этого вы можете добавить иконку в кнопку, а также изменить её выравнивание относительно текста:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1062_zamz1z.png)
Настройка дизайна полей контактной формы
Во вкладке Стиль в настройках формы перейдите в раздел Поля, чтобы отредактировать вид полей:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1063_8n6yfr.png)
Здесь вы можете выбрать тип полей — как именно будут отображаться границы для полей:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1064_14w1gi4.png)
Помимо этого, вы можете настроить цвет отдельно для каждого компонента в форме — границ, заливки, описания и самого текста в поле:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1065_vaiuv9.png)
Не забудьте опубликовать свой сайт, чтобы изменения вступили в силу.
Подсказка: не забудьте персонализировать поля в контактной форме, следуя инструкциям в статье Настройка полей в контактной форме.
Обновлено на: 26/04/2024
Спасибо!