Изменение внешнего вида формы с помощью CSS

Команда Ёлва

Подпишитесь, чтобы получать новые статьи

Подписаться
В этом посте мы познакомим вас с различными способами изменения внешнего вида форм, создаваемых через интерфейс ClickDimensions, с помощью CSS.
 
Формы ClickDimensions могут быть либо встроены на страницу сайта непосредственно в качестве виджета или iframe или могут быть доступны по ссылке, например, из письма.
По умолчанию, когда доступ осуществляется по ссылке, то на отдельной странице открывается только сама форма. При этом в простом виде у нее стандартное форматирование и не очерчены внешне границы. К счастью, мы можем изменить внешний вид, добавив CSS в редакторе кода формы.
 
Чтобы добавить форму, перейдите в раздел Параметры => Web Content и создайте новую запись с типом «Form».
 
Прежде всего посмотрим на стандартный внешний вид до внесения изменений:
 
Внешний вид формы по умолчанию
 
Открываем окно редактора кода:
 
Меню (редактор кода)
 
Теперь начнем потихоньку украшать ее. Во-первых, мы установим цвет фона для формы. Это позволит нам внешне разграничить само тело формы и остальную часть страницы. Цвет фона устанавливается с помощью соответствующего атрибута, и нами был выбран #FFDAB9, который представляет собой шестнадцатеричное значение для персикового цвета.

 

 
В окне CSS сверху-справа в тексте кода находим раздел «/*— FORM CONTAINER STYLE —*/» и внутрь открытых фигурных скобок вводим следующий текст:

 

 
{
background-color: #FFDAB9;
}
 
Форма после добавления фона
 
Теперь у нас есть фон, но и много дополнительного пространства справа такого же цвета, поэтому необходимо ограничить ширину формы. Ширина регулируется с помощью соответствующего атрибута width, и » !important» в конце является модификатором, означающим, что заданный параметр должен иметь приоритет над ранее существовавшей шириной в HTML формы. При этом в нашем случае форма сама по себе в конструкторе шириной в одну колонку, поэтому задается значение в 250рх (для двух колонок это может быть 500рх).

 

 
Добавляем туда же следующий текст:

 

 
{
width: 250px !important;
background-color: #FFDAB9;
}
 
Форма после ограничения ширины
 
После ограничения ширины формы можно подумать об отступах сверху и снизу.

 

 
Внесем в код следующие изменения:

 

 
{
background-color: #FFDAB9;
width: 250px !important;
padding-top: 20px;
padding-left: 10px;
}
 
Теперь, когда форма выглядит уже более аккуратно, привнесем еще немного красоты. Во-первых, добавим границу к форме и закругления углов. Граница определяется с помощью соответствующего атрибута border, которая включает в себя три параметра. Первый параметр определяет насколько толстой будет граница, второй параметр отвечает за цвет границы, а третий параметр — за визуальный стиль границы. В нашем примере граница в 2 пикселя толщиной, оранжевая и выполнена сплошной линией.

 

 
Закругленные углы определяются атрибутом border-radius, где значение в пикселях указывает на интенсивность закругления углов (чем больше значение, тем круглее углы).

 

 
И, наконец, добавим тень к форме. Тень задается с помощью атрибута box-shadow, имеющего четыре параметра. Первый параметр сообщает на сколько пикселей тень смещается вправо от формы, а второй — на сколько пикселов смещение происходит по нижней границе формы, третий параметр регулирует интенсивность размытия тени и последний определяет цвет тени.

 

 
{
background-color: #FFDAB9;
width: 250px !important;
padding-top: 20px;
padding-left: 10px;
border-radius: 20px;
border: 2px #FF7F50 solid;
box-shadow: 8px 8px 15px #b0b0b0;
}
 

 

В нашем финальном варианте форма выглядит следующим образом:

 

 
Форма в итоговом варианте после настроек
 
Мы рассказали только про часть возможностей по стилизации форм, пробуйте различные настройки самостоятельно, экспериментируйте и создавайте свою красоту!

 

 
Этот материал подготовлен на основе поста из блога компании ClickDimensions.

#ClickDimensions

Подпишитесь на наши статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *