Добавление любых дополнительных полей в форму обратной связи Wedal Joomla Callback

Если вы являетесь постоянным читателем wedal.ru, но наверняка уже знакомы с бесплатным и очень удобным модулем обратной связи Wedal Joomla Callback.

Этот модуль позволяет добавлять простые и легкие формы обратной связи в разные части вашего Joomla-сайта. Формы как всплывающие, так и встроенные.

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

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

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

В новой версии Wedal Joomla Callback 2 для Joomla 4+ появился встроенный функционал добавления дополнительных полей, и описанный ниже вариант утратил свою актуальность. Но если вы используете версию модуля 1.x для Joomla 3, то все также можете использовать данный трюк для добавления дополнительных полей в модуль.

Стандартный и измененный вид формы. Постановка задачи

Для начала сформулируем задачу.

Стандартный максимальный набор полей формы обратной связи в модуле Wedal Joomla Callback выглядит следующим образом:

Предположим, что нам требуется более сложная форма, вот такая:

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

Ниже 3 шага, описывающие решение этой задачи.

Шаг 1. Создаем альтернативные макеты формы и письма

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

Создать альтернативный макет очень просто. Идем в папку:

/modules/mod_wedal_joomla_callback/tmpl/

и копируем из нее все файлы в:

/templates/ваш_шаблон/html/ mod_wedal_joomla_callback/

Там всего 4 файла:

• default.php
• default_embeddedform.php
• default_message.php
• default_popupform.php

Если вам не нужны сразу и встроенная и всплывающая формы, то можно скопировать один из двух файлов: default_embeddedform или default_popupform.

После переноса файлов макетов в шаблон необходимо переименовать их, заменив «default» на любое другое слово, написанное английскими буквами. Допустим, это будет «equipment». Также предположим, что нам нужна только встроенная форма обратной связи (а значит, макет popupform можно пропустить).

Таким образом, у нас в папке:

/templates/ваш_шаблон/html/ mod_wedal_joomla_callback/

будет такой набор файлов:

• equipment.php
• equipment_embeddedform.php
• equipment_message.php

Чтобы модуль использовал именно альтернативные макеты, нужно у него в настройках перейти на вкладку «Дополнительно» и в поле «Альтернативный макет» выбрать «equipment»:

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

Шаг 2.  Добавляем дополнительные поля в форму

Для добавления дополнительных полей в форму нам нужно будет отредактировать альтернативный макет equipment_embeddedform.php. Если бы форма требовалась не встроенная, а всплывающая, то мы бы редактировали макет с постфиксом _popupform (надеюсь, это понятно и далее не возвращаюсь к этому уточнению).

Все, что нам нужно сделать – добавить в код макета html-разметку для дополнительных полей. Формат этой разметки может быть любым. Вот здесь вы сможете посмотреть примеры html-кода для полей разных типов:

https://www.w3schools.com/html/html_form_input_types.asp

Нас для поставленной задачи интересует 2 типа полей:

• текстовое поле для ввода роста и веса
• чекбоксы для выбора мест

Для роста и веса html-код полей будет таким:

<div class="inputcont">
    <input type="text" placeholder="Введите ваш рост" value="" class="inputbox form-control" data-error id="WJCForm<?php echo $moduleId ?>_growth" name="WJCForm<?php echo $moduleId ?>_growth" />
</div>

<div class="inputcont">
    <input type="text" placeholder="Введите ваш вес" value="" class="inputbox form-control" data-error id="WJCForm<?php echo $moduleId ?>_weight" name="WJCForm<?php echo $moduleId ?>_weight" />
</div>

Для чекбоксов выбора мест html-код будет таким:

<div class="orientation">
	<div class="checkbox-option">
		<input type="checkbox" id="WJCForm<?php echo $moduleId ?>_orientation1" name="WJCForm<?php echo $moduleId ?>_orientation[]" value="Моря">
		<label for="orientation1">Моря</label>
	</div>

	<div class="checkbox-option">
		<input type="checkbox" id="WJCForm<?php echo $moduleId ?>_orientation2" name="WJCForm<?php echo $moduleId ?>_orientation[]" value="Реки">
		<label for="orientation2">Реки</label>
	</div>

	<div class="checkbox-option">
		<input type="checkbox" id="WJCForm<?php echo $moduleId ?>_orientation3" name="WJCForm<?php echo $moduleId ?>_orientation[]" value="Озера">
		<label for="orientation3">Озера</label>
	</div>

	<div class="checkbox-option">
		<input type="checkbox" id="WJCForm<?php echo $moduleId ?>_orientation4" name="WJCForm<?php echo $moduleId ?>_orientation[]" value="Серфинг">
		<label for="orientation4">Серфинг</label>
	</div>
</div>

 Давайте подробнее рассмотрим этот код:

• Обертки div не являются обязательными и добавлены только для удобства оформления
• Теги label также не являются обязательными и добавлены для отдельного вывода заголовков полей
• Теги полей input – единственные элементы, являющиеся обязательными в этом коде
• У тегов input обязательно должен быть атрибут name, т.к. именно по нему мы будем идентифицировать поле. Названия полей в атрибуте name могут быть любыми, но важно, чтобы они не повторялись в нескольких полях.
• Конструкция WJCForm<?php echo $moduleId ?>_ настоятельно рекомендуется, хотя и не является обязательно в некоторых случаях. Поясню. Если вы не планируете использовать несколько одинаковых форм на одной странице, то включать ID-модуля в названия и идентификаторы полей необязательно. Но все-таки лучше их добавить. Ведь кто знает, куда вас заведет извилистая дорожка веб-разработки…J

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

После выполнения этого шага форма на сайте уже приобретет нужный вам вид. Останется только получить и вывести значения новых полей в макете письма.

Шаг 3.  Добавляем значения дополнительных полей в письмо

Для добавления значений новых полей в письмо нам нужно отредактировать альтернативный макет equipment_message.php. Мы получим в нем значения полей и выведем их в нужном месте письма.

Здесь тоже все максимально тривиально. Для получения значений полей вставляем в начале макета, после строчки:

<?php defined('_JEXEC') or die('Restricted access'); ?>

 Код:

<?php
    $jinput = JFactory::getApplication()->input;
    $growth = $jinput->get('WJCForm'.$moduleId.'_weight', null, 'RAW');
    $weight = $jinput->get('WJCForm'.$moduleId.'_weight', null, 'RAW');
    $orientations = $jinput->get('WJCForm'.$moduleId.'_orientation', array(), 'ARRAY');
?>

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

Подробнее об этом можно почитать здесь:

https://docs.joomla.org/Retrieving_request_data_using_JInput

Далее, выводим в письме наши переменные в том месте, где хотим:

 <?php if (!empty($growth)) { ?>
        <div>
            <span>Рост</span>: <span><?php echo $growth ?></span>
        </div>
    <?php } ?> 

    <?php if (!empty($weight)) { ?>
        <div>
            <span>Вес</span>: <span><?php echo $weight ?></span>
        </div>
    <?php } ?> 

    <?php if (count($orientations) > 0 ) { ?>
        <div>
            <div>Ориентированность в катании:</div>
            <?php foreach ($orientations as $orientation) { ?>
                <div><?php echo $orientation ?></div>
            <?php } ?>
        </div>
    <?php } ?>

По этому коду не должно быть вопросов.

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