Персонализирайте вашата форма с помощта на персонализирани CSS кодове

9 януари 2023 г.

АКТУАЛИЗАЦИЯ: Нека създадем фантастични форми с видео курса за “Дизайнера на форми“, който ви позволява да генерирате красиви дизайни на форми, без да знаете CSS!

Първо, трябва да научите как да инжектирате персонализиран CSS във вашата форма, преди да започнете да персонализирате формата си, използвайки CSS кодовете, които са предоставени по-долу.

Youtube Embed Poster: v2apY6221Ro

Задайте фоново изображение на страницата

.supernova {

background-image:url(‘http://www.site.com/image.jpg’);

background-repeat: no-repeat;

background-position: center top;

background-attachment: fixed;

background-size: cover;}

Заменете URL адреса с вашето фоново изображение.

Демо тук

Направете фона на страницата прозрачен

.supernova {

background:transparent;

}

Премахнете интервала около формата

.jotform-form {

padding:0;

}

Направете прозрачен фона на формата

.form-all {

background:transparent;

}

Променете цвета на фона на заглавието

[data-type=”control_head”]{background-color:#FFCC66;}

Персонализирайте вашата форма с помощта на персонализирани CSS кодове Image-1

Променете цвета на текста на подзаглавието

.form-subHeader {color:#2408FC !important;}

Персонализирайте вашата форма с помощта на персонализирани CSS кодове Image-2

Променете целия цвят на подзаглавието

.form-sub-label {color:#FFCC66;}

Персонализирайте вашата форма с помощта на персонализирани CSS кодове Image-3

Променете цвета на ефекта на жълтото маркиране

.form-line-active {background:#baffb9;}

Персонализирайте вашата форма с помощта на персонализирани CSS кодове Image-4

Променете цвета на звездата, който за изискване

.form-required {color: blue !important;}

Персонализирайте вашата форма с помощта на персонализирани CSS кодове Image-5

Премахнете червения фон на съобщенията за грешки

.form-line-error {background:transparent;}

Персонализирайте вашата форма с помощта на персонализирани CSS кодове Image-6

Подравнете формата вляво

.form-all {margin:0;}

Визуализация тук

Незабавно създайте оформление с две колони върху свити полета

.form-line-column {width: 50%;}.form-line-column:nth-child(even) {clear: left;}

Демо тук

Направете полетата за кредитни карти във всички платежни интеграции мобилно адаптивни

Копирайте CSS кодовете тук: http://pastebin.com/raw/UJV3nGf5

Демо тук

Ако не можете да намерите CSS кода, който ви е необходим за вашата форма или ако се нуждаете от помощ за персонализиране на формата, не се колебайте да оставите коментари по-долу.

Свържете се с екипа за поддръжка:

Нашият екип за поддръжка на клиенти е на разположение денонощно и средното ни време за реакция е между един и два часа.
С нашия екип можете да се свържете чрез:

Форум за поддръжка: https://www.jotform.com/answers/

Свържете се с поддръжката на Jotform: https://www.jotform.com/contact/

Изпратете коментар:

Jotform Avatar
Този сайт е защитен от реКАПЧА и Декларацията за поверителност и Общи условия.

Podo Comment Бъдете първите, които коментират.