Собственные CSS стили: придайте форме уникальность

Назад к статьям

Сервис QForm - гибкая система, в которой пользователь может не только выбирать настройки для оформления полей, но и стилизовать их самому, если есть знания HTML/CSS.


Первоначальные настройки по дизайну формы и оформлению полей можно сделать в конструкторе форм во вкладке “Дизайн”. 

 

Как настроить собственные стили?

Если хочется сделать что-то уникальное, можно настроить свои стили для полей с помощью CSS. Для этого при создании полей нужно заполнить панель настройки Для разработчиков в конструкторе форм или использовать готовые классы QForm, которые присваиваются полям при генерации формы. 

 

ВАЖНО!!! Имя поля должно быть уникальным. Имена и классы нужно задавать латинскими буквами. 

Задавая класс в панели Для разработчиков, система автоматически генерирует код и добавляет его к элементам поля. Имя поля будет добавлено в качестве атрибута.

Чтобы изменять стили элементов, необходимо правильно обратиться к ним. Найти DOM элементов можно во вкладке HTML, где структура вашей формы полностью представлена и в развернутом виде.

 

Зная, как обратиться к элементам, можно оформлять их как угодно, используя все возможности CSS.

Рассмотрим процесс стилизации подробнее на примере

Создадим форму и добавим в нее одно поле “Имя”.

 

В панели Для разработчиков зададим имя поля и класс поля.

 

Перейдем во вкладку “Дизайн” и переключим свитч “Не использовать оформление QForm” в активное состояние.

 

В результате встроенные стили QForm будут отключены и форма примет следующий вид.

 

 

Используя заданные ранее имя и класс поля, можно оформить внешний вид, задавая стили в CSS файле.

Пример стилей для обертки поля:

.wrap-field_class {
	box-shadow: 33px 9px 3px 6px rgb(9 71 138 / 46%);
}

Пример стилей для input поля:

.qform-field__block_box__field-box_input  {
	display: block;
	width: 100%;
	height: calc(2.25rem + 2px);
	padding: 0.375rem 0.75rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	border: 1px solid #bdbdbd;
	border-radius: 0.25rem;    
	box-shadow: 0 0 0 0.2rem rgb(44 193 208 / 49%);
}

.qform-field__block_box__field-box_input  {
	display: block;
	width: 100%;
	height: calc(2.25rem + 2px);
	padding: 0.375rem 0.75rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	border: 1px solid #bdbdbd;
	border-radius: 0.25rem;
	box-shadow: 0 0 0 0.2rem rgb(44 193 208 / 49%);
}

Пример стилей для заголовка поля:

.qform-field-outside-label-box {
	position: relative;
}

.qform-field-outside-label-box_label {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol", "Noto Color Emoji";
	font-size: 16px;
	font-weight: 600;
	position: absolute;
	top: -3px;
	left: 1.3125rem;
	display: flex;
	transform: translateY(-50%);
	pointer-events: none;
	border: none;
	background-color: #fff;
	color: #000000ad;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	transition: top 0.1s ease-in-out, scale 0.1s ease-in-out;
}

Пример стилей для кнопки Отправить:

.submit-button {
	text-decoration: none;
	outline: none;
	display: inline-block;
	background-image: linear-gradient(45deg, #6ab1d7 0%, #33d9de 50%, #002878 100%);
	background-position: 100% 0;
	background-size: 200% 200%;
	color: white;
	border-radius: 30px;
	padding: 12px 40px;
	margin: 10px 20px;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 300;
	box-shadow: 0 16px 32px 0 rgb(0 40 120 / 35%);
	transition: .5s;
}

В результате форма примет следующий вид:

 

 

Форма обратной связи - одна из важных элементов сайта.  Используйте возможности QForm - привлекайте внимание пользователей и сохраняйте корпоративный стиль даже в мелочах!
 

Назад к новостям