Инструкция RSForm Pro (часть 5). Календарь, регистрация, обратная связь

RSForm Pro – русскоязычный конструктор форм Joomla с множеством настроек, плагинами и модулями. В предыдущей статье «Инструкция RSForm Pro (часть 4). reCaptcha v2» мы продолжали рассмотрение часто задаваемых вопросов касательно настройки компонента, в этой части поговорим про календарь, форму регистрации, форму обратной связи и о том, как выводить любую форму во всплывающем окне.

В данной статье Вы сможете ознакомиться с полным перечнем ответов на вопросы касательно работы с компонентом форм Joomla RSForm Pro.

В данной инструкции рассмотрена последняя, на момент её написания (26.07.2017), русскоязычная версия RSForm Pro 1.52.14 (с модулем «RSForm! Pro Module» 1.51.1), Joomla 3.7.3. Шаблон фронтальной части сайта – RSBaraka 1.0.3, шаблон административной части сайта – Isis 1.0.0.

Внизу данной статьи, над комментариями, Вы найдёте архив с примерами из этой инструкции, которые можно импортировать на свой сайт при помощи раздела Архивация / Восстановление в компоненте RSForm Pro. Нужно извлечь скачанный Вами ZIP-архив и загружать себе в RSForm архив в формате «.tar».

Отключение суббот и воскресений в календаре

В предыдущих статьях (этой и этой) мы уже рассматривали некоторые примеры по работе с полем календаря.

Чтобы запретить выбор в поле Календарь всех суббот и воскресений, вставьте в свойствах формы в разделе CSS и Javascript (в поле Javascript) следующий код:

По аналогии можно запрещать любые дни недели:

Понедельник – 1.
Вторник – 2.
Среда – 3.
Четверг – 4.
Пятница – 5.
Суббота – 6.
Воскресенье – 0.

О том, как сменить отображение первого дня недели на понедельник, можно прочесть в этой статье.

Запрет выбора конкретных дат в календаре

Рассмотрим ситуацию, когда нужно запретить пользователям выбирать определённые даты в календаре. Например, 1 и 13 августа 2017.

Чтобы запретить выбор в поле Календарь каких-то конкретных дат, вставьте в свойствах формы в разделе CSS и Javascript (в поле Javascript) следующий код:

Где «01/08/2017» и «13/08/2017» – число/месяц/год тех дат, которые нужно запретить для выбора. «К сожалению, в этот день мы не работает» – это текст сообщения, которое появится при нажатии пользователем на запрещённую дату. Формат даты зависит от формата поля Календарь (настройки поля вкладка Атрибуты). Если нужно добавить ещё одну запрещённую дату, например, 15.08.2017, то код будет выглядеть так:

Изменение формата даты календаря

По умолчанию, в RSForm Pro дата в поле Календарь отображается в таком формате: «13/08/2017», что соответствует 13 августа 2017 года. При необходимости можно сменить формат. Немного подробнее о синтаксисе (вариантах) формата можно прочесть тут. Для смены формата даты перейдите в настройки поля Календарь на вкладку Атрибуты и в поле Формат даты введите предпочитаемый Вами формат даты (рисунок ниже).

RSForm Pro календарь

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

Вычисление разницы в днях между двумя полями календаря

Рассмотрим пример, когда нужно посчитать разницу в днях между двумя календарями. Это может пригодиться, например, чтобы показать пользователю количество дней проживания на базе отдыха с учётом даты заезда и выезда, которые он указал.

Есть форма с двумя полями тип Календарь и полем тип Текстовое поле. В свойствах формы в разделе CSS и Javascript в область Javascript вставьте следующий код.

В данном коде Вам нужно заменить:

В четырёх местах цифру «29» в «RSFormPro.YUICalendar.calendars[29]» на ID своей формы. ID формы можно посмотреть в Компоненты – RSForm! Pro – Управление формами (правый столбец ID формы).
Два раза заменить «kalendar_1» и «kalendar_2» на свои названия полей календарей. Обратите внимание, что сперва Вы указываете название календаря, из даты которого нужно вычитать, а потом название календаря, дату которого нужно вычитать. То есть, в моём примере из поля «Календарь 2» нужно вычитать поле «Календарь 1». На рисунке ниже, в верхней части показана форма в админке, а в нижней – на сайте.
Один раз заменить «raznica» на название Вашего текстового поля, куда Вы хотите выводить результат вычисления.
Один раз заменить только цифру «29» в «cal29_0» и «cal29_1» на ID своей формы. То есть, если ID Вашей формы «7», то у Вас это будет так: «cal7_0» и «cal7_1».

Работа с полем Выбор даты и времени

В RSForm Pro есть специальное поле Выбор даты и времени. Оно немного напоминает поле тип Календарь, но есть возможность указать не только дату, но и время. Рассмотрим несколько примеров по работе с этим типом поля.

Обратите внимание! Все нижеуказанные примеры кода нужно вводить в свойства формы раздел CSS и Javascript в область Javascript. Заменяйте название моего поля Выбор даты и времени с «vybor_daty_i_vremeni» на своё. Заменяйте ID моей формы с «32» на ID своей формы. Эти скрипты можно использовать совместно для одного и того же поля.

Пример №1. Запрет выбора субботы и воскресенья. Это аналогично описанному выше способу касательно поля Календарь.

Пример №2. Смена первого дня недели.

Пример №3. Отображение только выбора времени (без даты).

В настройках поля на вкладке Атрибуты в поле Формат даты укажите значение «H:i» (без кавычек). А в CSS и Javascript добавьте следующий код:

Выбор даты и времени

Операции с датами

Пример №1. Добавление нескольких дней к текущей дате. Нижеописанный пример показывает, как вывести дату в зависимости от текущей даты и количества дней, введённых пользователем.

Создайте поле тип Текстовое поле. Это поле отвечает за отображение текущей даты (или любой, которую в последствии введёт пользователь). В его настройках на вкладке Основное в поле Значение по умолчанию введите следующий код:

Где «d.m.o» – формат даты в виде «день.месяц.год» (формат можно менять). Пользователь сможет сменить эту дату.

Создайте ещё одно поле тип Текстовое поле. Это поле предназначено для ввода пользователем числа дней, которое будет прибавлено к текущей дате. В его настройках на вкладке Проверка в спадающем списке Правил проверки выберите Цифры.

Создайте поле тип Скрытое поле. Оно необходимо для сохранения значения вычисления.

Перейдите в свойства формы в раздел PHP скрипты и в область Скрипт, вызываемый при обработке формы вставьте следующий код:

Где «skrytoe» – название Вашего скрытого поля, «ukazhite_kol_vo_dnej» – название текстового поля с правилом проверки, «d.m.o» – формат даты точно такой, как указано в первом текстовом поле (название в моём примере «tekushchaya_data»).

Чтобы вывести результат вычисления нужно вставить заполнитель «» в письма или сообщения о благодарности (в свойствах формы). В заполнителе «skrytoe» – название моего скрытого поля.

На рисунке ниже, в верхней части, показан пример формы в админке RSForm Pro, в средней части – на сайте, а в нижней - результат вычисления в сообщении о благодарности.

Добавление нескольких дней к текущей дате

Пример №2. Вычисление количества дней между двух дат. Ниже показано, как рассчитывать количество дней между двумя датами.

Создайте поле тип Текстовое поле. Это поле отвечает за отображение текущей даты (или любой, которую введёт пользователь). В его настройках на вкладке Основное в поле Значение по умолчанию введите следующий код:

Где «d.m.o» – формат даты в виде «день.месяц.год» (формат можно менять). Пользователь сможет сменить эту дату.

Создайте ещё одно поле тип Текстовое поле. Это поле предназначено для ввода второй даты. В его настройках на вкладке Основное в поле Значение по умолчанию введите следующий код (дата может быть любой):

Создайте поле тип Скрытое поле. Оно необходимо для сохранения значения вычисления.

Перейдите в свойства формы в раздел PHP скрипты и в область Скрипт, вызываемый при обработке формы, вставьте следующий код:

Где «tekushchaya_data» – название первого поля, «predstoyashchaya_data» – название второго поля, «skrytoe» – название Вашего скрытого поля.

Чтобы вывести результат вычисления, нужно вставить заполнитель «» в письма или сообщения о благодарности (в свойствах формы). В заполнителе «skrytoe» – название моего скрытого поля.

Вычисление количества дней между двух дат

Форма в модальном\всплывающем окне (lightbox)

Рассмотрим добавление кнопки\ссылки, по нажатию на которую будет происходить открытие формы во всплывающем окне. То есть, создадим всплывающую форму Joomla 3. По большому счёту, это можно легко и быстро реализовать при помощи модуля «RSForm! Pro Feedback Module» или при помощи плагина Modals, но мы рассмотрим альтернативный вариант.

Предполагается, что форма у Вас уже создана.

Шаг №1. В зависимости от шаблона сайта может понадобиться добавить ниже указанный код в файл «index.php» в корне папки Вашего шаблона сайта (не админки) в секцию «<head>».

Шаг №2. Перейдите туда, где Вы хотите вставить ссылку на открытие формы. Это может быть материал, модуль и т.д. Вам нужно вставить вот такую HTML-конструкцию. Обратите внимание, что может понадобиться отключить редактор материалов Joomla и воспользоваться редактором типа «Редактор - Без редактора» (это можно сделать в менеджере плагинов). Иначе, например, TinyMCE урежет код.

В ссылке «index.php?option=com_rsform&formId=33&tmpl=component» число «33» – это ID Вашей формы, которую нужно открывать. Значения «x: 400, y: 180» – ширина и высота всплывающего окна в пикселях. «Открыть форму» – текст ссылки.

Чтобы сделать ссылку кнопкой, нужно добавить соответствующий класс. В моём случае это «rspbld-button btn btn-info». Данный класс зависит от того, какой у Вас шаблон и как в нём называется CSS-класс для описания кнопок. Код будет выглядеть так:

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

Всплывающая форма Joomla 3

Чтобы автоматически закрыть всплывающее окно после того, как пользователь отправит данные и появится сообщение с благодарностью, в свойствах формы в разделе Информация о форме нажмите на Редактировать сообщение благодарности и вставьте следующий код:

Где «3500» – время задержки перед закрытием окна (в миллисекундах). Обратите внимание, что стоит использовать редактор «Редактор - Без редактора», чтобы не обрезался код.

Если Вы хотите не только закрыть всплывающую форму, но и перенаправить пользователя по какому-то адресу, то код будет таким:

Где «http://aleksius.com/» – URL, на который нужно перенаправить пользователя. Обратите внимание, что время «3500» может быть другим, но должно совпадать для закрытия и перенаправления.

Форма регистрации

Если Вам нужно создать расширенную форму регистрации Joomla 3, например, для сбора дополнительных данных о посетителях сайта, то RSForm Pro поможет Вам в этом.

Шаг №1. Установите и опубликуйте системный плагин «RSForm! Pro Registration Form». В моём примере его версия 1.52.1.

Шаг №2. В Пользователи – Менеджер пользователей – Настройки проверьте, чтобы для опции Разрешить регистрацию пользователей на вкладке Параметры пользователя, было выбрано Да. Если у Вас на сайте установлен какой-то компонент, который может переопределять страницу регистрации, например, Community Builder, то позаботьтесь, чтобы это не происходило.

По умолчанию, сразу после установки плагина «RSForm! Pro Registration Form» происходит подмена формы регистрации Joomla на форму RSForm Pro. Причём, форма регистрации создаётся автоматически (заголовок «RSForm! Pro Registration Form»). Вы можете отредактировать её или сменить на свою. Это можно сделать в настройках RSForm на вкладке Форма регистрации. Там же можно указать URL-адрес, на который будет перенаправлен пользователь, по нажатию на ссылку регистрации (рисунок ниже).

Настройка формы регистрации

Шаг №3. Откройте форму регистрации для редактирования и измените её поля на те, что нужны Вам. Как минимум, если Вы воспользовались созданной плагином «RSForm! Pro Registration Form» формой, её нужно перевести на русский язык. Не забудьте это сделать не только для полей, но и для писем и сообщений о благодарности и для сообщений об ошибках.

По умолчанию, для созданной плагином «RSForm! Pro Registration Form» формы в её свойствах в разделе Регистрация пользователя Joomla! всё уже настроено (рисунок ниже). При необходимости можно что-то изменить.

Настройка формы регистрации Joomla 3

Шаг №4. Дополните свою форму дополнительными полями. Например, полями «Телефон» и «Тип учётной записи».

Поле «Телефон» – служит для сбора номеров телефонов и реализуется без особых сложностей при помощи поля тип Текстовое поле. В принципе, можно настроить правило проверки, которое позволит вводить номера в любом формате даже со специальными символами типа «(, ), -». Об этом можно прочесть в статье «Инструкция RSForm Pro (часть 3). Формы Joomla 3».

А вот поле «Тип учётной записи» позволит закрепить пользователя за той или иной группой пользователей Joomla в зависимости от того, что выберет пользователь. У этого поля будет тип Выпадающий список, и там будет два значения: «Автор» и «Читатель». Это можно использовать, например, для возможности авторов добавлять материалы на сайт из фронтальной части, а читателям – писать комментарии без ввода капчи.

Шаг №5. Создайте поле тип Выпадающий список и в его настройках, в поле Элементы, введите такие значения (рисунок ниже).

Тип учётной записи

Обратите внимание, что цифры «2» и «3» соответствуют ID определённым группам пользователей в Пользователи – Группы (рисунок ниже).

Группы пользователей Joomla

Вставьте следующий код в свойства формы в раздел PHP скрипты в область Скрипт, вызываемый после обработки формы:

Где, «tip-uchjotnoj-zapisi» – название поля с выпадающим списком.

На рисунке ниже показан вид формы в админке.

Форма регистрации в админке

А так форма выглядит на сайте (рисунок ниже).

Форма регистрации Joomla 3

Форма обратной связи

Создание формы обратной связи Joomla 3 не составляет особого труда. Но давайте рассмотрим вариант, когда получателем письма будет тот, кого выберет пользователь из списка в форме, а сам список будет генерироваться на основании данных из таблицы базы данных контактов Joomla.

Шаг №1. Перейдите в Компоненты – Контакты и создайте несколько контактов с указанием их e-mail адресов, имён и должностей. E-mail адреса можно отдельно не указывать, если Вы связали контакт пользователя с существующим на сайте учётной записью (рисунок ниже).

Шаг №2. Перейдите в Компоненты – RSForm! Pro – Управление формами и создайте нужную Вам форму обратной связи.

Одним из полей должно быть поле тип Выпадающий список. В его настройках в поле Элементы вставьте следующий код:

В свойствах формы в разделе E-mail администраторов у Вас не должны быть указаны адреса отправителей и получателей. В свойствах формы в разделе PHP E-mail скрипты, в раздел Скрипт, вызываемый до отправки письма администратору вставьте следующий код:

Где «pochta@vashego.sajta» нужно заменить на e-mail Вашего сайта. С него будут отправляться письма.

На рисунке ниже показан пример формы в админке.

Форма обратной связи в админке

На рисунке ниже показан пример формы на сайте.

Форма обратной связи Joomla 3

Как видите, в поле выпадающего списка значения подтянулись автоматически. Как альтернативу, можете рассмотреть бесплатные модули форм обратной связи RSContact и DJ-EasyContact.

Видео-инструкция по RSForm Pro

В данном видео показаны некоторые моменты, описанные в статье выше.

Отключение суббот и воскресений в календаре – с 00:00.
Запрет выбора конкретных дат в календаре – с 01:29.
Вычисление разницы в днях между двумя полями календаря – с 02:53.
Работа с полем Выбор даты и времени – с 05:54.
Вычисление количества дней между двух дат – с 08:22.
Форма в модальном\всплывающем окне (lightbox) – с 10:44.
Форма регистрации – с 16:04.
Форма обратной связи – с 21:04.

Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки Вы можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.

В следующей статье «Инструкция по Joomla RSForm Pro (часть 6)» мы поговорим об ограничениях на ввод данных в поля формы и о возможностях получения URL-адресов страниц.

Автор статьи – Хорошевский Алексей

Примерно с 2008 года и по сегодняшний день создаю сайты «под ключ» на Joomla и WebSite X5. Также занимаюсь их доработкой, SEO-продвижением, контекстной рекламой, защитой от взлома и оптимизацией скорости загрузки сайта.

Кандидат технических наук по специальности «Информационные технологии».

На этом сайте есть контакты и информация обо мне. На нём Вы найдёте примеры моих работ, а также перечень и цены предоставляемых услуг.

📎📎📎📎📎📎📎📎📎📎