дата в форме обратной связи
Веб-дизайн и поисковая оптимизация
Создание формы обратной связи
Календарь в форме обратной связи
Во многих формах обратной связи требуется ввод даты, например, даты заказа авиабилетов, бронирования номера в гостинице и т.п. Для этого обычно используется простая строчка
.
К сожалению, посетители по-разному могут ввести данные, что иногда создаёт путаницу. Для исключения этого можно немного доработать форму, например, сделав отдельные поля для числа/месяца/года:
Пример рабочий, исходный HTML-код не имеет каких-либо особенностей, и вы можете найти и посмотреть его на странице, нажав Ctrl+U.
Рассмотрим ввод даты в форму обратной связи с помощью виджета Datepicker jQuery UI. Два действующих примера его использования показаны внизу. Для ввода даты щелкаете в поле ввода и выбираете нужное число в выпадающем календаре, после чего оно автоматически вводится в форму. Второй пример отличается от первого раскрывающимися списками для выбора месяца и года, эффектом анимации и ограничением ввода даты: 2 дня назад и 8 месяцев +3 недели +1 день вперед (maxDate: «+8m +3w +1d»).
| Пример 1 Дата: | Пример 2 Дата: |
Сначала рассмотрим, как за несколько минут установить календарик (пример 1) на сайте, а затем более тщательно, для особо любопытных товарищей, разберемся в тонкостях изменения стилей и настроек календаря (пример 2). Кстати, стиль нашего календаря в библиотеке jQuery называется Sunny (Солнечный).
Установка выпадающего календаря jQuery
Итак, процесс установки календаря состоит из 4 шагов (подробно установка скриптов jQuery на сайт описана в статье «Создание фотогалереи jQuery», но читать этот материал необязательно):
На этом установка календаря закончена! Можете открыть страницу с формой обратной связи в браузере и полюбоваться на результат.
Важное замечание 1: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.
Настройка выпадающего календаря jQuery
Чтобы в календаре сделать выбор месяца и года из выпадающих списков, как в Примере 2 вверху, достаточно изменить false на true в двух строчках скрипта установки параметров календаря (см. пункт 3 выше по тексту):
changeMonth: true,
changeYear: true.
В этом же файле вы можете изменить падеж и написание с заглавной или прописной буквы названий месяцев и дней недели.
В заключение, не забывайте, что загрузка скриптов замедляет открытие страницы. При медленном соединении с интернетом это приводит к тому, что выполнение сценариев происходит не сразу, и пользователь некоторое время (до полной загрузки скрипта) не увидит выпадающего календаря.
Далее рассмотрим, как изменить стиль календаря, ввести ограничение диапазона ввода даты и изменить некоторые другие настройки. Это необходимо, чтобы нельзя было, например, заказать билеты на самолет на пять лет вперед или в кинотеатр на прошлый месяц.
Также рассмотрим вывод на странице сайта двух календарей с зависимым выбором даты. Это требуется, например, при указании сроков бронирования номера в гостинице, когда дата выезда не может быть раньше даты заезда, а также при выборе дней вылета/прилета самолетов и др.
Веб-дизайн и поисковая оптимизация
Дата на сайте и в форме обратной связи
В предыдущей статье был рассмотрен вывод даты на сайте с помощью JavaScript. Как было сказано, такой метод имеет существенный недостаток: дата и время считываются с компьютера пользователя, что не всегда соответствует реальному текущему времени. Лучше использовать для вывода даты РНР-скрипт, который будет показывать время на сервере.
Этот фрагмент кода необходимо вставить в нужное место страницы, которая, естественно, должна иметь расширение .php. В нашем случае результат выполнения этой функции выглядит так:
November 6, 2021, 17:51
Для вывода других параметров даты и времени аналогично следует задать элементы:
Особый интерес представляет вставка даты и времени в письма, приходящие с формы обратной связи на сайте. В почтовом ящике вы обычно видите время поступления письма, но иногда важно знать время отправки, которое желательно автоматически указывать в самом теле письма.
Здесь всё проще некуда. Для примера, используем форму обратной связи, создание которой подробно рассмотрено в статье «Создание формы обратной связи на сайте». Чтобы в приходящих письмах была дата отправки, вставим в код рнр-страницы строчки с функцией получения даты (число, месяц, год) и добавим вывод этих данных в текст сообщения (message). Фрагмент кода с новыми элементами выглядит так:
В этом фрагменте новые строчки выделены красным цветом.
В результате вы получите время отправки письма в самом сообщении с сайта.
Инструкция 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 и 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 вставьте следующий код.
В данном коде Вам нужно заменить:
Работа с полем Выбор даты и времени
В 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»).
Чтобы вывести результат вычисления нужно вставить заполнитель «
Добавление нескольких дней к текущей дате
Пример №2. Вычисление количества дней между двух дат. Ниже показано, как рассчитывать количество дней между двумя датами.
Создайте поле тип Текстовое поле. Это поле отвечает за отображение текущей даты (или любой, которую введёт пользователь). В его настройках на вкладке Основное в поле Значение по умолчанию введите следующий код:
Где «d.m.o» – формат даты в виде «день.месяц.год» (формат можно менять). Пользователь сможет сменить эту дату.
Создайте ещё одно поле тип Текстовое поле. Это поле предназначено для ввода второй даты. В его настройках на вкладке Основное в поле Значение по умолчанию введите следующий код (дата может быть любой):
Создайте поле тип Скрытое поле. Оно необходимо для сохранения значения вычисления.
Перейдите в свойства формы в раздел PHP скрипты и в область Скрипт, вызываемый при обработке формы, вставьте следующий код:
Где «tekushchaya_data» – название первого поля, «predstoyashchaya_data» – название второго поля, «skrytoe» – название Вашего скрытого поля.
Чтобы вывести результат вычисления, нужно вставить заполнитель «
Вычисление количества дней между двух дат
Форма в модальном\всплывающем окне (lightbox)
Рассмотрим добавление кнопки\ссылки, по нажатию на которую будет происходить открытие формы во всплывающем окне. То есть, создадим всплывающую форму Joomla 3. По большому счёту, это можно легко и быстро реализовать при помощи модуля «RSForm! Pro Feedback Module» или при помощи плагина Modals, но мы рассмотрим альтернативный вариант.
Предполагается, что форма у Вас уже создана.
Шаг №1. В зависимости от шаблона сайта может понадобиться добавить ниже указанный код в файл «index.php» в корне папки Вашего шаблона сайта (не админки) в секцию « ».
В ссылке «index.php?option=com_rsform&formId=33&tmpl=component» число «33» – это ID Вашей формы, которую нужно открывать. Значения «x: 400, y: 180» – ширина и высота всплывающего окна в пикселях. «Открыть форму» – текст ссылки.
Чтобы сделать ссылку кнопкой, нужно добавить соответствующий класс. В моём случае это «rspbld-button btn btn-info». Данный класс зависит от того, какой у Вас шаблон и как в нём называется CSS-класс для описания кнопок. Код будет выглядеть так:
Сама всплывающая форма будет выглядеть так, как показано на рисунке ниже в верхней части. А в нижней части рисунка показана кнопка, открывающая форму.
Всплывающая форма Joomla 3
Чтобы автоматически закрыть всплывающее окно после того, как пользователь отправит данные и появится сообщение с благодарностью, в свойствах формы в разделе Информация о форме нажмите на Редактировать сообщение благодарности и вставьте следующий код:
Если Вы хотите не только закрыть всплывающую форму, но и перенаправить пользователя по какому-то адресу, то код будет таким:
Где «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. Дополните свою форму дополнительными полями. Например, полями «Телефон» и «Тип учётной записи».
А вот поле «Тип учётной записи» позволит закрепить пользователя за той или иной группой пользователей 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
В данном видео показаны некоторые моменты, описанные в статье выше.
Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки Вы можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.
В следующей статье «Инструкция по Joomla RSForm Pro (часть 6)» мы поговорим об ограничениях на ввод данных в поля формы и о возможностях получения URL-адресов страниц.
Автор статьи – Хорошевский Алексей
Примерно с 2008 года и по сегодняшний день создаю сайты «под ключ» на Joomla и WebSite X5. Также занимаюсь их доработкой, SEO-продвижением, контекстной рекламой, защитой от взлома и оптимизацией скорости загрузки сайта.
Кандидат технических наук по специальности «Информационные технологии».
Немного подробнее обо мне можно прочесть на этом сайте. На нём Вы найдёте примеры моих работ, а также перечень и цены предоставляемых услуг.
Делаем форму обратной связи на сайте
Говорят, что если программист может написать форму обратной связи, он может написать всё.
Форма обратной связи — древнейшее программистское искусство. Тут есть всё: форма с проверкой, приём запроса, обработка, безопасность, хранение и ответ. Это как Hello World, только для самых крутых.
В сегодняшней версии программы — только самые основы этого упражнения. В следующих частях мы прокачаем систему.
Смысл программы в том, что посетитель страницы заполняет нужные поля, пишет текст сообщения и нажимает кнопку «Отправить». На почту владельцу сайта приходит письмо с текстом сообщения и данными о том, кто это сообщение отправил.
Чтобы сделать у себя на сайте такое, нам понадобится:
Сервер для PHP
Для того, чтобы PHP-код исполнялся, нужен какой-то компьютер-исполнитель. Мы называем его сервером — то есть «раздающим». На сервере должна работать программа для PHP, которое отвечает за правильную обработку таких файлов.
Когда мы делали проект «Публикуем свою страницу в интернете», то уже использовали сервер (эту услугу нам предоставила хостинговая компания SpaceWeb). Этот же сервер мы можем использовать для нашей сегодняшней задачи, потому что он тоже умеет работать с PHP-файлами:
Готовим страницу с формой
Возьмём стандартный шаблон страницы и наполним его стилями и кодом для формы.
Пропишем CSS-стили, чтобы наша страница выглядела опрятно. Забежим немного вперёд и используем в стилях разделы input и textarea :
Чтобы сделать форму на странице, мы будем использовать такие теги:
— для ввода имени, почты для связи и темы письма. Они занимают одну строку, нам этого достаточно.
— здесь будут писать само сообщение, поэтому нужно будет сделать это поле побольше и пошире.
Ещё мы воспользуемся тегом
Пишем обработчик формы на PHP
Когда мы заполним и отправим форму на нашей странице, произойдёт следующее:
Логика работы PHP-программы будет такая:
Отправляем PHP-скрипт на сервер
Последнее, что осталось сделать — загрузить файл скрипта на сервер. Для этого сохраним его как post.php и загрузим по адресу mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет своего сервера, можете использовать этот скрипт для тестирования формы обратной связи.
Как загружать файлы, мы рассказывали в статье про публикацию сайта в Сети, поэтому просто сделаем всё по той инструкции:
Теперь, когда мы обновим HTML-страницу, заполним все поля и нажмём «Отправить», на указанную почту придёт письмо с нашим сообщением. Это значит, что форма работает, а мы с вами сделали очередной полезный проект!
Что дальше
Дальше как обычно — улучшаем.