Изменение внешнего вида формы с помощью 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#Web-контент#Настройки#Форма

комментарии (0)

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

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

Назад в блог