Городской портал города Оленегорск


Тематизация веб-формы в Drupal 7

  1. Тематические элементы через пользовательский интерфейс Webform
  2. Тематические элементы с помощью пользовательских шаблонов
  3. Изменение веб-формы с помощью hook_form_alter ()
  4. Создание тематической веб-формы с использованием CSS и JS для этой формы
  5. Файл JS
  6. Файл CSS
  7. И вот результат!
  8. Резюме

Онлайн-формы являются одним из наиболее распространенных методов сбора значимой информации и связи с клиентами и потенциальными клиентами на вашем веб-сайте. В Drupal 7 всегда есть необходимость добавить пользовательские темы или функциональность к вашим веб-формам, и мы рассмотрим несколько различных вариантов, которые позволят вам настраивать веб-форму по своему желанию.

Варианты тематики, описанные в этом блоге:

  • Тематические элементы через пользовательский интерфейс Webform
  • Тематические элементы с помощью пользовательских шаблонов
  • Изменение веб-формы с помощью hook_form_alter ()
  • Создание тематической веб-формы с использованием CSS и JS для этой формы

Тематические элементы через пользовательский интерфейс Webform

Пользовательский интерфейс Webform обеспечивает большую гибкость, когда вы хотите добавить пользовательские классы в форму.

Классы оболочки и поля, добавленные в пользовательский интерфейс, отображаются в выводе html.

Тематические элементы с помощью пользовательских шаблонов

Если ваши тематические потребности немного сложнее, тематическое оформление вашей веб-формы с помощью пользовательских файлов tpl может быть именно тем, что вам нужно.

В качестве первого шага включите theme_debug в settings.php. Сделайте это, раскомментировав строку для отладки темы.

$ conf ['theme_debug'] = TRUE;

Отладка темы позволяет вам увидеть информацию о том, какие шаблоны отвечают за отображение разметки на странице, а также показать предложения шаблонов, если вы хотите переопределить шаблон.

Отладка темы позволяет вам увидеть информацию о том, какие шаблоны отвечают за отображение разметки на странице, а также показать предложения шаблонов, если вы хотите переопределить шаблон

Вы увидите, что отладка темы показывает, что выходные данные веб-формы генерируются path-to-contrib-modules / templates / webform-form.tpl.php в модуле веб-формы.

Скопируйте этот файл и поместите его в текущую тему и переименуйте в соответствии с предложениями шаблона для веб-формы.

  • Webform-form- [NID] .tpl.php
  • Поэтому, если ваш идентификатор узла веб-формы равен 1, вы назовете файл webform-form-1.tpl.php

В файле webform-form-1.tpl.php поля формы отображаются через эту строку:

print drupal_render ($ form ['submit']);

Если вы используете devel, вы можете легко просмотреть поля в форме, добавив следующее в ваш файл tpl:

пм ($ форма [ 'представляется'];

пм ($ форма [ 'представляется'];

Вы можете отобразить любое из полей веб-формы в любом порядке и сгруппировать их с разметкой, как вам нужно. Здесь я добавил div с классом jumbotron и обернул поля «Имя» и «Фамилия». Я также добавил несколько элементов div, чтобы добавить сетку для некоторых других элементов формы.

<div class = "jumbotron"> <h2> <i class = "glyphicon glyphicon-user"> </ i> Личная информация </ h2> <div class = "row"> <div class = "col-xs-12 col-md-6 "> <? php print drupal_render ($ form ['submit'] ['first_name']); ?&gt; </ div> <div class = "col-xs-12 col-md-6"> <? php print drupal_render ($ form ['submit'] ['last_name']); ?&gt; </ div> </ div> </ div> <div class = "row form-group"> <div class = "col-xs-12 col-md-6"> <? php print drupal_render ($ form ['отправлено'] ['электронная почта']); ?&gt; </ div> <div class = "col-xs-12 col-md-6"> <? php print drupal_render ($ form ['submit'] ['telephone']); ?&gt; </ div> </ div> <div class = "row form-group"> <div class = "col-xs-12"> <? php print drupal_render ($ form ['submit'] ['reason_for_contact' ]); ?&gt; </ div> </ div> <div class = "row form-group"> <div class = "col-xs-12"> <? php print drupal_render ($ form ['submit'] ['message' ]); ?> </ div> </ div> <? php // Распечатать основную часть формы. // Не стесняйтесь разбить это и переместить части в массиве. print drupal_render ($ form ['submit']); // Всегда распечатывать всю форму $. Это рендерит оставшиеся части формы //, которые еще не были отображены выше (кнопки, скрытые элементы и т. Д.). print drupal_render_children ($ form);

Заметка
Когда вы визуализируете элемент формы по отдельности, он больше не будет визуализироваться в массиве рендеринга $ form ['submit'].

Вот результат визуализации только что сделанных изменений в tpl.

Вот результат визуализации только что сделанных изменений в tpl

Изменение веб-формы с помощью hook_form_alter ()

Вы также можете оформить свою форму с помощью hook_form_alter ().
Увидеть Программная модификация веб-формы с помощью hook_form_alter () | Drupal.org

Добавьте хук к вашей теме или пользовательскому модулю.

/ ** * Реализует HOOK_form_webform_client_form_NID_alter (). * / function YOURTHEME_form_webform_client_form_1_alter (& $ form, & $ form_state, $ form_id) {// Форма изменяется здесь. }

Мы собираемся изменить разметку для некоторых полей в нашей форме.

/ ** * Реализует HOOK_form_webform_client_form_NID_alter (). * / function YOURTHEME_form_webform_client_form_1_alter (& $ form, & $ form_state, $ form_id) {// Изменить заголовок поля Имя. $ form ['submit'] ['first_name'] ['# title'] = t ('Скажите мне свое имя'); // Добавить иконку в поле формы электронной почты. $ form ['submit'] ['email'] ['# field_prefix'] = '<i class = "glyphicon glyphicon-envelope"> </ i>'; }

Все, что вы можете сделать, используя FAPI Drupal (API формы) можно сделать здесь.

Создание тематической веб-формы с использованием CSS и JS для этой формы

Вы также можете оформить свою форму с помощью хорошего старого CSS и Javascript. Вы можете добавить CSS и JS к вашей форме через изменение формы ловушки. CSS и JS будут добавлены в эту форму только тогда, когда эта конкретная форма загружена.

В качестве упражнения мы собираемся отобразить значок, когда выбранный параметр изменится для причины контакта.

// Добавьте следующее в функцию YOURTHEME_form_webform_client_form_1_alter (). // Добавить css и js в форму. $ form ['#attached'] ['css'] [] = drupal_get_path ('theme', 'YOURTHEME'). '/css/webform_1.css'; $ form ['#attached'] ['js'] [] = drupal_get_path ('theme', 'YOURTHEME'). '/js/webform_1.js';

Файл JS

// mymodule / js / webform_1.js! (function ($) {'использовать строгий'; Drupal.behaviors.WebformConfig = {attach: function (context) {var $ contact = $ ('input [name = "submit [reason_for_contact]"]'); $ contact.parents ('# edit-submit-reason-for-contact') .append ('<div class = "reason-icon"> </ div>'); var $ icon = $ ('.reason-icon'); $ contact.on ('change', function (event) {var value = $ (this) .val (); if (value == 'стратегии') {$ icon.html ('<i class = "глификон glyphicon-knight "> </ i> ');} иначе if (value ==' theme_form ') {$ icon.html (' <i class =" glyphicon glyphicon -cil "> </ i> '); console.log (' Форма темы ');} else {$ icon.html (' <i class = "glyphicon glyphicon-info-sign"> </ i> ');}});}};}) (jQuery);

Файл CSS

// mymodule / css / webform_1 .css .reason-icon {position: absolute; справа: 1em; верх: 0; } .reason-icon i {font-size: 50px; отступы: 30 пикселей; }

И вот результат!

И вот результат

Резюме

С помощью этих инструментов вы можете создавать темы для любой веб-формы по своему усмотрению. Счастливой темы.

Дополнительные ресурсы
Создание расширенных настроек темы в Drupal и D8 | Блог
Тематика на основе компонентов в Drupal 8 | Блог
5 преимуществ компонентно-управляемой тематики | видео

Похожие

Как проверить / изменить пользовательский ввод с помощью скрипта
... скриптов. Чтобы получить информацию о пользователе, вы можете использовать ссылки на значения (например,% username%). Значения ссылок будут заменены соответствующими значениями свойств учетной записи пользователя. $ htable = @ {FirstName = "% firstname%"; LastName = "% lastname%"; Department = "% отдела%";} После замены ссылок на значения
CSS: шрифты
смотрите также указатель всех приемов. На этой странице: Cимейства шрифтов После цвета шрифт, возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких "трюков", но покажу ряд вариаций шрифтов, допустимых в CSS. Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную
Как управлять мышью с помощью планшета от Xbox 360
... используете компьютер, например, для просмотра фильмов? Вы подключаете его к телевизору и хотите удобно управлять им с дивана? Узнайте, как легко управлять мышью и клавиатурой с помощью контроллера Xbox 360. Многие люди подключают компьютер
Написание приложений дополненной реальности с использованием JSARToolKit
... jsartoolkit-1.png"> В этой статье рассматриваются API, которые еще не полностью стандартизированы и все еще находятся в процессе разработки. Будьте осторожны при использовании экспериментальных API в ваших собственных проектах. Вступление Эта статья об использовании JSARToolKit библиотека с WebRTC API getUserMedia для создания приложений дополненной реальности в Интернете.
Насколько разметка безопасна в Drupal 8
Никто не хочет сайт, который можно взломать. Друпал имеет отличная репутация в сфере безопасности и усердно работает над тем, чтобы основные и добавленные модули были безопасны для всех. Одним из наиболее распространенных типов проблем безопасности является межсайтовая скриптовая атака (XSS) , В Drupal 8 мы внесли значительные изменения в систему
Интернет от ОГО. Или как организовать интернет соседям.
... ся то делал дипломную работу на тему "провайдерство и с чем его едят))". Провайдер - это человек или компания, которая дает нескольким и более людям интернет. В те далекие времена я успел попользоваться и ознакомиться наверное со всеми послугмы провайдеров в городе и с технологиями с помощью которых тот интернет предоставлялся. Особенно трепетно ​​упоминается интернет на технологии dial-up))). Чтобы скачать одну песню на три мегабайта приходилось ждать
Редактирование документов Word на iPad
... помощью страниц Apple Одним из простых вариантов редактирования документов Word является приложение iWork от Apple за 10 долларов США. страницы (). Он может импортировать и экспортировать документы в формате Microsoft Word и предлагает мощную и удобную среду для создания и редактирования файлов. Пока вы используете OS X 10.8 Mountain Lion, используете последнюю версию Pages для Mac
Как добавить карты в проекты Django Web App с помощью Mapbox
... ие интерактивных карт в Джанго веб-приложение может показаться пугающим, если вы не знаете, с чего начать, но это проще, чем вы думаете, если вы используете инструмент разработчика, такой как MapBox , В этой статье мы создадим простой проект Django с одним приложением и добавим интерактивную карту, подобную той, которую вы видите ниже, на веб-страницу, которую Django отображает с помощью
Этот документ является частью руководства Лучшие практики непрерывной интеграции (CI) с SAP , Чтобы все п...
Этот документ является частью руководства Лучшие практики непрерывной интеграции (CI) с SAP , Чтобы все примеры работали должным образом, убедитесь, что вы выполнили инструкции по установке для всех компонентов, перечисленных в поле «Предварительные условия». Для разработки классической модели (XSC) SAP HANA Extended Application Services (XS) вы можете использовать либо SAP HANA Studio, либо инструментальные
HTML5 формы: типы ввода (часть 2)
Ниже приводится выдержка из нашей книги, HTML5 и CSS3 для реального мира, 2-е издание Авторы: Алексис Гольдштейн, Луи Лазарис и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в виде электронной книги Вот ,
Справка
... сте, чтобы перейти к соответствующему экрана настроек. Устройство можно подключать к телевизору через беспроводную связь без применения беспроводного маршрутизатора. При этом вы сможете осуществлять потоковую передачу видео, фотографий и музыки с устройства непосредственно на телевизор.

Комментарии

Как только вы извлек содержимое Лучшие 3 программного обеспечения для сжатия и извлечения файлов Лучшие 3 программного обеспечения для сжатия и извлечения файлов Нужно сжать большой файл?
Но какой файл молнии лучше для вас? Вот наши три лучших выбора. Подробнее Просто запустите OS X Минимализм iPack.exe . Если вы потратили какое-то время, используя операционную систему на базе Linux или Android, вы, возможно, уже знакомы с Numix Project. Он делает все, от тем и значков до приложений и обоев.
HubSpot мастерски справляется с этим с помощью видео под названием «Что такое Hubspot?
HubSpot мастерски справляется с этим с помощью видео под названием «Что такое Hubspot?». Для многих их инстинктом было бы поместить этот логотип в самый первый кадр по центру. Но это не то, что сделал HubSpot. Они привлекли ваше внимание и не представили свой логотип до 49 секунд в видео. Уф. Приятно снять это с моей груди. Есть определенно несколько случаев, когда ведение с вашим логотипом в порядке. Вот некоторые: Видео с выставки Хммм. Вот и все.

Gt; </ div> <div class = "col-xs-12 col-md-6"> <?
Php print drupal_render ($ form ['submit'] ['last_name']); ?
Gt; </ div> </ div> </ div> <div class = "row form-group"> <div class = "col-xs-12 col-md-6"> <?
Php print drupal_render ($ form ['отправлено'] ['электронная почта']); ?
Gt; </ div> <div class = "col-xs-12 col-md-6"> <?
Php print drupal_render ($ form ['submit'] ['telephone']); ?
Gt; </ div> </ div> <div class = "row form-group"> <div class = "col-xs-12"> <?
Php print drupal_render ($ form ['submit'] ['reason_for_contact' ]); ?
Gt; </ div> </ div> <div class = "row form-group"> <div class = "col-xs-12"> <?
Php print drupal_render ($ form ['submit'] ['message' ]); ?

Новости

Видео рыбалка на карпа и карася
Начал строить дом и задумался, ведь надо ещё качественную проводку, чтоб не менять её через несколько лет. Искал много интернет-магазинов, которые бы предложили мне хорошие услуги, нашел этот рынок. Не

Рыбалка краснодарском крае видео
Невозможно представить себе строительные работы без разного рода погрузочно-разгрузочных работ. Для этого лучше всего подойдут стропы. Цепные, канатные, текстильные стропы рекомендовано применять при

                                                                                                                                               ОЛЕНЕГОРСК 2010 - 2014                                                                                                 

создание сайта - Старт Икс