Содержание
Шаблон и таблица стилей FormBuilder : : CMS Made Simple — учебные пособия, советы и рекомендации
Предыдущая статья Следующая статья
там. В этом посте я попытаюсь дать более расширенный стилизованный шаблон формы.
Я надеюсь, что это даст вам преимущество при стилизации форм на вашем веб-сайте CMSMS.
Вы можете увидеть рабочий пример на этой демонстрационной странице.
Как использовать
Шаблон формы
Сначала необходимо загрузить XML-файл, содержащий шаблон формы, и сохранить его на своем компьютере.
Загрузите образец шаблона здесь (13,53 КБ)
Откройте страницу администрирования FormBuilder в бэкенде CMSMS и перейдите к Импорт формы XML — Загрузить форму из файла XML . Просмотрите свой компьютер и выберите загруженный XML-файл. Если вы хотите, вы можете изменить имя/псевдоним формы и нажать «Отправить».
Таблица стилей
Создайте новую таблицу стилей в CMSMS Admin и прикрепите ее к HTML-шаблону, используемому для страницы формы. Я использовал теги Smarty для нескольких используемых значений, вам нужно изменить их только в одном месте…
Содержимое таблицы стилей
[[strip]]
[[* +++++ Несколько используемых значений +++++ * ]]
[[$label_width = ‘150’]]
[[$field_width = ‘300’]]
[[$field_border = ‘граница: #ccc solid 2px;’]]
[[$field_border_hover = ‘граница: #666 однотонный 2px;’]]
[[capture assign=’rounded_corners’]]граница-радиус: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;[[/capture]]
[[* +++++ Таблица стилей +++++ *]]
.formbuilder div { margin: 0 0 5px 0 }
. построитель форм div div {
margin: 0 0 0 [[$label_width]]px;
padding: 0 0 5px 0;
}
.formbuilder input[type=»email»],
.formbuilder input[type=»file»],
.
formbuilder input[type=»option»],
.formbuilder input[type=»text»] ,
.formbuilder textarea,
.formbuilder выберите {
ширина: 100%;
максимальная ширина: [[$field_width]]px;
поле: 0 5px 0 0;
семейство шрифтов: Verdana, Geneva, Arial, Helvetica, без засечек;
размер шрифта: 13 пикселей;
[[$field_border]]
[[$rounded_corners]]
}
.formbuilder select { width: [[$field_width+4]]px }
.formbuilder input[type=»email»]:hover,
.formbuilder input[type=»file»]:hover,
.formbuilder input[type=»option»]:hover,
.formbuilder input[type=»text»]:hover,
.formbuilder textarea:hover,
.formbuilder select:hover {
[[$field_border_hover]]
курсор: по умолчанию;
}
.formbuilder input[type=»submit»] {
ширина: 100%;
максимальная ширина: [[$field_width+4]]px;
поле: 10 пикселей 0 0 0;
[[$field_border]]
[[$rounded_corners]]
курсор: указатель;
}
.
formbuilder input[type=»submit»]:hover { [[$field_border_hover]] }
.formbuilder label {
/*width: 100%;*/
width: [[$label_width]]px;
нижнее поле: 5 пикселей;
с плавающей запятой: слева;
}
.formbuilder input[type=»checkbox»] + label,
.formbuilder input[type=»radio»] + label {
width: 60px;
с плавающей запятой: слева;
}
.formbuilder input[type=»checkbox»] + label.label {
ширина: 190 пикселей;
с плавающей запятой: вправо;
}
.formbuilder_text_error {
color: #f00;
вес шрифта: полужирный;
}
.captchapict {
ширина: [[$field_width]]px;
[[$field_border]]
[[$rounded_corners]]
}
.formbuilder_field_error input[type=»email»],
.formbuilder_field_error input[type=»file»],
.formbuilder_field_error input[type=»option «],
.formbuilder_field_error input[type=»text»],
.formbuilder_field_error select,
.
formbuilder_field_error textarea,
.formbuilder_field_error .captchapict { border: #f00 solid 2px }
/**
* Ниже еще немного доступного CSS коды…
* Примечание: когда они вам нужны, важна последовательность всех строк!
.formbuilder input { }
.formbuilder input[type=»button»] { }
.formbuilder input[type=»radio»] { }
.formbuilder input[type=»checkbox»] { }
.formbuilder legend { }
.formbuilder optgroup { }
.formbuilder fieldset { }
.formbuilder form { }
*
**/
[[/strip]]
Связанная запись в блоге: Стилизация форм
Вы можете использовать демонстрационную форму и таблицу стилей для создания новой формы на вашем сайте. Или используйте его, чтобы изучить основы создания и оформления форм Formbuilder.
Рабочий пример
- См. этот пример формы в действии на этой локальной демонстрационной странице
Примечание: Мне нравится получать отзывы, но я не могу (и не буду) помочь вам создать собственную форму здесь .
Вместо этого используйте Google или форум сообщества CMSMS.
Форма комментариев
Нажмите здесь, чтобы открыть форму
6 Комментарии
17-01-2016
Dave
, где я могу указать текст «Это форма выставки». в верхней части формы?
03-11-2015
Ричард
Всем привет,
Вы случайно не знаете, как создавать встроенные метки форм?
Мы сэкономили бы столько места на смартфонах и планшетах, если бы просто поместили метки внутри полей формы, например:
http://zurb.com/playground/inline-form-labels
Но я не могу понять, как преобразовать шаблон и CSS с помощью конструктора форм. Кто-нибудь хочет попробовать?
Ура!
Ричард
19-10-2014
Rolf
@Augustas
Исправлено в следующем выпуске модуля, читайте:
http://dev.cmsmadesimple.org/bug/view/10255
05-10-2014
Augustas
Когда я отправлю неполный формы с выбранным для загрузки файлом, форма перезагружается, подсвечивая поля с ошибками.
Между тем, «Загрузка файла» также отображает имя файла, который я только что загрузил.
Однако, когда я еще раз отправляю ту же форму — файл, отправленный во время первой попытки, исчез — он не сохраняется в локальной папке. Если снова были ошибки формы — в полях «Загрузки файлов» больше не отображается имя файла.
То же самое происходит с формой CMSMS, которую я настроил для своего клиента.
Вы случайно не знаете, как это исправить?
02.07.2014
Rolf
Я обновил демо-форму и таблицу стилей для лучшего использования в телефонах и т. д.
23-01-2014
Si
Привет, спасибо за урок. Как сделать так, чтобы разметка отображалась для элементов без атрибута «обязательный»? У меня проблемы с «проверкой ограничений» HTML5, которая является родной для браузера, желающего принять участие.
спасибо большое за любую помощь
cmsmadesimple — CMSMS Как переместить элемент меню из раздела «Расширения» в раздел «Содержимое» в административной области?
спросил
Изменено
8 лет, 3 месяца назад
Просмотрено
222 раза
Я установил модуль Form Builder в CMSMS.
Подменю «Конструктор форм» было автоматически добавлено на вкладку «Расширения». Но я хотел бы добавить это подменю на вкладку «Содержимое» вместо «Расширения». Кто-нибудь знает, как это сделать?
Заранее спасибо.
С уважением,
Игорь
- cmsmadesimple
Ну вопрос довольно старый, нашел случайно, но раз нет ответа отвечу, может кому потом пригодится. Я не знаю, можете ли вы сделать это напрямую через панель cms. Однако это выполнимо, вам нужно изменить файл основного модуля. Найдите файл FormBuilder.module.php в папке /modules/FormBuilder в вашей CMS. Есть функция, отвечающая за размещение модулей в нужных разделах. Разделы расширения по умолчанию для всех модулей, если вы не укажете другой раздел, используя функцию ниже:
/**
* ПолучитьАдминСекцию()
* Если в вашем модуле есть панель администратора, вы можете указать
* какой раздел администратора (или меню администратора верхнего уровня) он показывает
* up in. Этот метод возвращает строку, указывающую, что
* раздел.
