База знань Uspacy
Усі матеріалиМаркетингФорми

Налаштування дизайну форм

Налаштування дизайну форм

Тут ми розкажемо, як саме змінити кольори форми, фон сторінки, стиль кнопки й полів, вибрати розмір тексту й розташування форми на сторінці

Перед тим як зберегти форму (або вже в процесі її редагування), ви можете налаштувати дизайн для неї.

AD_4nXeXCjCmDTsBEPPEc_gy251N0dxxO12_nPzyWnatXblVMYvVwnO64saN9T-bzJNpEqFDON1tZ3w85Z88d3tU4yGSvYRKzMyWcE9voDCpL5Iyi4fudGJoQNGVV6_5UwWsAdLSqlbIfA

🔍 Детальніше про те як створити нову форму з нуля, враховуючи всі параметри можна прочитати в окремій статті.

Отже, щоб форма виглядала привабливо та щоб користувачам було легко і приємно з нею взаємодіяти, у Uspacy можна легко налаштувати її зовнішній вигляд. Ви можете змінити кольори, шрифти, спосіб відображення полів і елементів тощо. Тобто налаштувати дизайн так, щоб процес заповнення був інтуїтивним і без зайвих труднощів.

Як налаштувати?

Отже, для того, щоб налаштувати дизайн форми на власний смак,

потрібно перейти в окрему вкладку вікна створення чи редагування. І там задати потрібні параметри вигляду.

🌟Робота з цим налаштуванням доступна лише на комерційних тарифах. Детальніше про можливості та функціонал тарифів можна ознайомитися на сторінці цін.

AD_4nXdmb0RuySbqbIFdM8WrSSUAhv_c-pTgHRmjONawINwBCJ3q49Y6zRxixU09MvGvbqo-z-AIa20n20Va3yRTHgjng3Ne2ip45Ia0LmeUa3ta9Q834P0rNVNE9e6Jv5jXtcMtV47F

А саме:

Вибір теми та основних кольорів

Дозволяє задати колірний стиль як форми так і сторінки, де вона розміщується. Це може бути щось зі спокійними пастельними тонами. Або навпаки — яскраве та контрастне, щоб привернути максимум уваги.

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

Можна вибрати серед запропонованих стандартних.

AD_4nXcDkKHLpzwvBFRfSzxtxfO4FD17s-6zj2-FtlZTWiY1FQ8bDN4-fBu0bmM4lD79ZjdplIZsJLKYurydLa5IjTkUS93Kvu_1chhCQeizdfxK0doLe48mS7F3-Yss_KynC0pqH9jf

Або ж використати вбудовану панель вибору чи прописати код потрібного кольору вручну.

AD_4nXftzoQciwZEvMkzKV91hDgkh06qihOGenhMIO7nmGkM3kc6kUem54Rworf8dVS_1hwv-ph3w8CQqxkRzUu8gRSOOc4w15EhHpnu1Sb15bwych-8MlPI5b2dqMqXwjOddUd78TxJMQ

💡Як буде виглядати фон для сторінки можна буде побачити після публікації форми та відкриття її за посиланням.

🟣 Використовувати фон для форми – параметр, що дозволяє ввімкнути або вимкнути окреме тло для самої форми, щоб вона краще виділялася або навпаки гармонійно зливалася зі сторінкою.

Колір можна вибрати із запропонованих стандартних.

AD_4nXcHRvUEpx3bCuHv7JAyDHczDwL5snBGI4mUlaeEQOQcVDW8PFRJh-XE8K3j59NGPpqqdM8Jzdl_-8ybTFC3VuIfCnPacAPSwsQAtN4KfxCgdcxHr8scE0eu22leeInpp1WjFmypCA

Або ж використати вбудовану панель вибору чи прописати код потрібного кольору вручну.

AD_4nXfDf3T7rHSNDcqq0beXFnJojA9j3AvILHxF6hllZF8kCJpYmPJPvgPXwWjRiS6iE6XYg9Z6K9o-ppxgLoSBoCcoMoQ5CzbHCAnZ39Is_3HxN5EpDKhXtlaawGdhLPEr1VBiZ12Udw

💡Як буде виглядати фон для форми можна побачити в режимі візуалізації як для комп’ютерної, так і для мобільної версії.

AD_4nXc55UUnK26NmrHCXUQrl_YoZ1QOeSDlz8_nQth8PMkKcT65LV9t0fpk6AnDL_h0rEdXpBnfnEuj6mwmqWKJMjg-LmS8OPXiKIfDXm1WJxjJIelbeASv-Y24j-jbhownrL_Rb4T1hQ

Налаштування кнопки

Дозволяє детально пропрацювати вигляд кнопки. Це допомагає зробити її помітною або ж навпаки більш стриманою, залежно від стилю форми.

⚙️Колір, текст та іконка кнопки є стандартними базовими складовими форми. Тому їх можна налаштувати окремо.

AD_4nXce_12ZJvOWs0nyGgzTV8uQX3a5a-diUVWPxK3sn_k7HOk_9lDCL00u1b4AFc_Y85UZVI8nXjZbsix4fTwlwA_ADajrnqYmbwylJLZyk9BRsCP6FClEKdu4Xz0jY2E6Smhn0ZqWhA

🔍 Детально ми це описали у статті ➡️ ТУТ.

🟣 Стиль кнопки – допомагає підібрати кнопку під загальний вигляд форми й ступінь її акценту на сторінці. Як це буде відображено у готовій формі можна одразу побачити в режимі візуалізації.

AD_4nXeDL-tSmE1_miQ_PAU0s7-8bCohmq3-8UAh_N87twyNnPZ2heb-NFG9SFaHgGJf05MK6T9BlTaLJnkKFCXg9AslpQ3Phy4k0YlQLcnOT0iiGXr7Hansjj3xHQb4RIFkUiYSiZ1hDw

🟣 Заокрегленість кнопки – параметр, який визначає, наскільки плавними будуть кути кнопки. Як це буде відображено у готовій формі можна одразу побачити в режимі візуалізації.

AD_4nXcx57RZhLyiFLznWBbdFYP_CNKljSwyer4CPS9mnecGIiii2s7e4OuMBm4-ehI6bv8a6AcyF6FfNRgrpnvq2VDIJ_Hz2bECD4Jy4iX6_HNX6Z7CpXX_6BDLcJI7rU6NWqDnbaXf

🟣 Розмір – визначає, наскільки великою або компактною буде кнопка, щоб відповідати загальному стилю. Як це буде відображено у готовій формі можна одразу побачити в режимі візуалізації.

AD_4nXfZ2P69FDLmwMpvf8TSvUXlKA7QqGDX-5GelDfiFps-YmPytCAhaOcMrdg431TEgL1gIg_GjUr0K3u8CrYouNs4IVq168ejJOcuDPCF904u0866WTBepz-QY9Ec8s7aaA4dTtJzEQ

🟣 Розмір шрифту – визначає, наскільки великим буде текст на кнопці, щоб забезпечити зручність читання та візуальний акцент на дії. Як це буде відображено у готовій формі можна одразу побачити в режимі візуалізації.

AD_4nXc_38rYhWozAKD_73yxyJ_6DeTdFFfI5rDQtL6xppD3JWCM4e_m4mPUT1YPCkBy_-S0G64qfTLxMzcvj-Nv2F1DgaHisGwmlji0XtbzxteCCDpffncpn72iSqrJWBn__eH8AFi9

🟣 Інтервал між літерами — відстань між символами тексту на кнопці. Можливість регулювати цей параметр допомагає покращити читабельність і загальний вигляд напису. Як це буде відображено у готовій формі можна одразу побачити в режимі візуалізації.

AD_4nXfkIQUoUpwN78vdmnlX5uFq5eqfIXLjPBfmvRlJh8ncl-iWcvGNptJI0oBX7nBSR7Iqrfy6bePyUp0kgdJCzezg1g59pjE8f1kTdCTpZkTAHFkfQ74LsOg3TfTrVkGyaQx1PC3p

Налаштування полів

Дозволяє детально пропрацювати вигляд полів. Це допомагає зробити форму зручною для заповнення і привабливою для користувачів.

🟣 Стиль полів – візуальне оформлення полів у формі, яке включає цілісні рамки або тільки нижнє підкреслення. Правильний вибір стилю допомагає зробити поля гармонійними для загального дизайну форми.

Як це буде відображено у готовій формі можна одразу побачити в режимі візуалізації.

AD_4nXezSdfEvQxPELON6OPR-wbC36Dn_Mj1nmglqXs9wO2nXi1HwIXcwfEXoJhQrXCsJ33UpWnBTz09TV39PEXkR6a8x9C9ooQBI5roXNjqWPc0mdYwkJl9nmQ-IodnnHC-7kE_zhbcew

💡Зверніть увагу, що при виборі варіанту З підкресленням та з вимкненою опцією Приховати назву поля параметр Тест плейсхолдеру кожного з полів форми НЕ буде відображений у ній.

AD_4nXff33-L_0YsEcPAW3M9YLFbWZaFJt4zu5N8mCkxjmvQgFgjomsjX_8JJo6xBw3V0gO-h8q8b0r-Ah9a-1Fur9FPCQb0eeTWVJkcPSTc4R4eHCKswgDOql9dJgSJUno1E3vaNItZpQ

🟣 Заокругленість полів — параметр, який визначає ступінь скруглення кутів полів, що робить вигляд більш м’яким чи навпаки більш чітким. Як це буде відображено у готовій формі можна одразу побачити в режимі візуалізації.

AD_4nXfSa-22eLN-R708wvPRoiYALpzvqYvfcsbVzZGIQjZbEgW6cnsNbvq4JXQHv42TD3QPMgehMPKORTagJUfDfJUJy_wUmAV-_qhU5rJDOqIxEDDzapW5_bRvz_5cCxDKQ7wyZvhy

Звісно більш помітно, якщо для форми в попередньому пункті вибрано обведені (рамкові) поля.

AD_4nXe3njsLFNZ55mdHzV3aFYmmY20--FfK7h1SWUopUCvbR-6G7es5bPbDEre2okNpURHSawmzW1slJRfE0RUUS3w3HR4nlxHZxmCM__z-2FIyCHPnbik3VWz_fGqM8Cssj20Ip_SJ1g

🟣 Розмір – визначає висоту і ширину полів форми, впливаючи на зручність заповнення і загальний вигляд. Як це буде відображено у готовій формі можна одразу побачити в режимі візуалізації.

AD_4nXfyR05IfyC5dbi03tbXmRooWymZMDIH21TZX2bWbKsLiL63uL81WeCmADSVpPM6Je43dcLTBzctK5Fr-vfI2W9X4dUM2ecxVHUKJAXtiONFLdNt_bxkaXl3hwc5cPlxSg

🟣 Розмір тексту в полі – визначає, наскільки великим буде шрифт введеного користувачем тексту. Це допомагає покращити читабельність та адаптувати форму під різні стилі оформлення. Як це буде відображено у готовій формі можна одразу побачити в режимі візуалізації.

AD_4nXdiu1r3bFgAzIoe012goCfhxIE2WHH3FXUAsCEHBeZxfsUicgBT50BBs9H0VzNCUa6CBzf4XTwiWBC4s4PqfJFWa-eRpf7musWn-6asT9QhBLqf5cIHiB-DEDbNHMR8YYJ_z2txXQ

🟣 Опція Приховати назву поля – дозволяє вимкнути відображення наданої вами назви для поля у формі. Це може бути корисно для створення більш мінімалістичного дизайну або якщо сенс і так зрозумілий з контексту чи плейсхолдера.

Як це буде відображено у готовій формі можна одразу побачити в режимі візуалізації.

AD_4nXdqcyizAE4Ek6FO94SorI8atARsusm4KM7zmD4Ay7ckYGY5HwQKzWqlE-VP-f6UtUoo-MSFz1UwbwY1xVD4Edndp0P4wQo6t_Gz3fCEhQBzcRE-UlUJ8khzNOZ-kalmfsPLcitO2wAD_4nXcR_IQ4if8e39ugRJySzjfT51LLkqfSqOE3T8oZIP6K3WrPjclQKJjDSoCvW55YZBpu4h1SjpDey_VPMo4jYv46fhVgp_CK1CvUfKKboULFxR0Zpxw9QDrsWGdP04GHF2Bx5fcu

💡 А якщо у якості стилю для полів ви вибрали З обведенням, то при активації Приховати назву поля БУДЕ відображатися плейсхолдер.

AD_4nXc2JFRJNJZ5-Fy2TeiIME8m4v7XRMoHTD3daxhhr0aPdUQjS7zta8awszNeYxNIMA4JBn0KjQYHRhcp8G7c4cTw88ibXNkRtbyuMdeAo5br96yoxfwClzhTh0McZYJwmUkNvECq2w

Додаткові налаштування

Дають змогу точніше контролювати зовнішній вигляд форми на сторінці.

🟣 Розташування форми на сторінці – параметр відповідає за можливість вибрати як саме помістити форму. Наприклад, одразу зверху з невеликим відступом від рядка браузера. Або по центру сторінки.

AD_4nXf1NiU-t88YOhwBSx1TYys2x3pzCGWodTdDf8nQj8xJIBszxK3y0mPe7oj7qBrdaeIIJtI5Ia8K4MUJ25D5vkw-EqMVykc7P08P7lkj4bxtTa_yW4atn-Kle0PUkdtJV2EYy49nqA

💡Як це буде виглядати можна побачити після публікації форми та відкриття її за посиланням.

🟣 Опція Брендинг Uspacy – дозволяє увімкнути або вимкнути відображення логотипа нашого сервісу під формою. Як це буде відображено у готовій формі можна одразу побачити в режимі візуалізації.

🌟Керування цією опцію доступне лише на тарифі Професійний. Детальніше про можливості та функціонал тарифів можна ознайомитися на сторінці цін.

AD_4nXcHi4ixTNrc-PcBVXCfTbM0Ym7d-LLePb89valYK4BcZfvx1gnBROGZDl26d6ETopfINB2ozRjueE6bGVb_YSLomm-B9YZS5BpNyvWZ_Dow3UUYBra_Q0XxP4Dd252yfGQ3Z43eSAAD_4nXdmB5mf2oCp5xpd-Y1dAq9m-qBc3EkEEcPrL3kjXCMc6PNlW4S7ldVulQmjAisTXS_7OYcgWC6y132heBrk9LdQZrF9hxubfZVC4iaTIEEfoOFl2i_vutKwQvqHIpLU59wKHXzD

Як це працює?

Потрібно створити форму чи зберегти її, після внесення змін.

AD_4nXducyyZAHo18gnWIwK4MQWPH5b4S6dNjaBfTbyXeovoauqiAlEyD_dvaSIg-xJCEZMowEaWMZvSGjbeWVmIRQ3ynDV8rrwTujpuJzrntNUfuTToAoKIGRrJXFycsFoMhHTpH4O8

Тепер коли ви відкриєте форму за її посиланням, то всі внесені вами налаштування дизайну будуть враховані.

AD_4nXfGNZ5f1v8X_xhkSJjfcymnwtBx-Bi0vkEVrkCTWFJvEQQcAi9PVRlRgHAo6otyVAWnWHkovOTKVnZlFho0iu9DRYHEbahhX9rztGnve2bYaoZw_JgBJpIKRsEz1f9cWM43kfb3Ig

Створено: 23 липня 2025 р. / Оновлено: 20 серпня 2025 р.