> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Налаштування стилю контактної форми

Кожна нова контактна форма, яку ви додаєте, автоматично підлаштовується під загальний стиль сайту. Проте ви можете відредагувати її, змінивши дизайн кнопки та полів.   

| ${color}[#1aa900](Підказка:)якщо ви тільки починаєте роботу з контактними формами, ось як ви можете додати їх на свій сайт: [Додавання контактної форми](https://help.weblium.com/uk/article/dodavannya-kontaktnoyi-formi-63m9ug/).

Зміст:
[Зміна вигляду контактної форми](#1-zmina-viglyadu-kontaktnoyi-formi)
[Зміна дизайну кнопки в контактній формі](#1-zmina-dizajnu-knopki-v-kontaktnij-formi)
[Зміна дизайну полів у контактній формі](#1-zmina-dizajnu-poliv-u-kontaktnij-formi)

# Зміна вигляду контактної форми

1. Наведіть курсор на контактну форму на вашому сайті й натисніть на «шестерню»:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_1waa6eh.png)
2. Перейдіть на вкладку **Вигляд**, де ви зможете змінити розташування полів з вертикального на горизонтальне і навпаки:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_wgflu.png)
# Зміна дизайну кнопки в контактній формі

1. Аби змінити кнопку в формі, наведіть курсором на саму форму і натисніть на «шестерню»:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_132dnjl.png)
2. У вікні налаштувань форми перейдіть у вкладку **Стиль** і оберіть розділ **Кнопка**: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_1detr63.png)
3. Тут ви можете змінити текст, що відображається в кнопці, а також його типографіку — наприклад, зробити текст жирним, додати курсив чи підкреслення: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_q1orde.png)
| ${color}[#1aa900](Підказка:)шрифт кнопки автоматично підлаштовується під загальний шрифт на сайті. Більше деталей ви знайдете в статті [Зміна шрифту на сайті](https://help.weblium.com/uk/article/zmina-shriftu-na-sajti-5eqxnz/).

4. Ви також можете обрати стиль для кнопки, який визначається загальними налаштуваннями стилю сайту, або обрати альтернативний: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_dzwg7u.png)
|| ${color}[#ffa800](Примітка:)для того, щоб змінити глобальний дизайн кнопок на сайті, зверніться до статті [Зміна дизайну кнопки](https://help.weblium.com/uk/article/zmina-dizajnu-knopki-19e5nfd/).

5. Окрім цього, ви також можете додати іконку в кнопку і вирівняти її відносно тексту: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_1xhuuos.png)
# Зміна дизайну полів у контактній формі

1. У вкладці **Стиль** у налаштуваннях форми перейдіть у розділ **Поля** — там можна буде відредагувати вигляд полів: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_11dinka.png)
2. Тут ви можете обрати тип полів — тобто який вигляд матимуть їхні межі: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_k6l7bh.png)
3. Окрім цього, ви можете налаштувати колір окремо для кожного компонента в формі — для меж, заливки, опису і самого тексту в полі: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_1vd3yxd.png)
[Опублікуйте сайт](https://help.weblium.com/uk/article/publikaciya-sajtu-16hom55/), аби застосувати всі зміни.

| ${color}[#1aa900](Підказка:)персоналізуйте поля в контактній формі згідно інструкцій статті [Налаштування полів контактної форми](https://help.weblium.com/uk/article/nalashtuvannya-poliv-kontaktnoyi-formi-gopctl/).