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


Тематизация веб-формы в 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 преимуществ компонентно-управляемой тематики | видео

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' ]); ?

Новости

Рыбалка в Териберке
На марте туда пожалуй под закрытие дороги, становилось снять номер в мотельчике на Очередном шоссе. Галопом вылетели из строя, успели как раз к слову движения колонны. С уловкой в общем било, один-единственный

Футболка рыбалка
Главная   /  Мой блог ← Футболки логотипом armin van buuren   |  В начало  |  Футболка the pirate bay → Качественные футболка рыбалка |

Клевое место рыбалка
Мы предлагаем рыбалку и отдых в уникальном месте Москвы, национальном парке "Лосиный остров"! Нижний пруд Очищенная береговая территория идеально подходит для ловли на удочку, штекер и удобного

Светлые горы рыбалка
«Светлые горы» в Подмосковье - одно из мест, где москвичи, да и гости, могут провести время в свое удовольствие и одновременно с пользой. База расположена неподалеку от столицы. Не нужно далеко

Рыбалка на пахре
По моим наблюдениям, как двадцать лет назад, так и сейчас Пахра вполне способна одарить рыболова хорошим уловом плотвы и подлещика, а если особо повезет, то и знаменитым пахринским карасем, который тянет

Рыбалка в савельево
Ленинградское шоссе проходит по живописным местам. К ним относятся водные просторы в Карелии, живописные заводи в Завидово. Однако поехать туда, чтобы порыбачить, может не каждый. Это связано со значительной

Рыбалка на селигере
На озере Селигер рыбачить будет интересно всем, кто не любит халявы. То есть любящих платные пруды просим пройти мимо. Так как здесь ловля рыбы зависит от времени года, погоды, времени суток, умения ловить

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

Русская рыбалка 3
Игра русская рыбалка 3 - это последняя официальная версия игры, в которой есть одиночный режим. За эту игру не надо платить никаких денег – она абсолютно бесплатна, просто скачиваете ее себе на компьютер

Триал русская рыбалка
триал русская рыбалка Уважаемые рыбаки и гости, фото отчёт за 31.08.2017 года, было произведено зарыбление водоема карпом, общим весом 700 кг, навеска 0.7-1 кг. Всем успехов.

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

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