Контакты

Поиск по сайту

Категория: Chronoforms5 Опубликовано: 25 Март 2015

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

Теперь разберем основные настройки, касающиеся вывода на страницу и работы самой формы.

Открываем форму. Во вкладках «Общие» (General) и «Проект» (Designer) мы уже указали все необходимые настройки.

Следующая вкладка «Code» (код). Она содержит сгенерированный html-код формы и настройку режима его генерации. Сам код можно править прямо в текстовом поле «Код формы» (Html code). Режим генерации выбирается один из двух — мастер проекта (то, что мы создали во вкладке «Проект») и пользовательский. С первым режимом все понятно. А пользовательский фиксирует состояние формы на тот момент, когда этот режим был применен. Изменения формы в мастере проекта, произведенные уже после применения режима «Пользовательский код» игнорируются, т.е мы их не увидим на странице. И работать они тоже не будут. Поэтому лучше использовать способ генерации «Мастер формы» (Designer).

Теперь главная вкладка — «Установка» (Install). Здесь основные настройки формы, касающиеся ее непосредственного вывода на страницу, событий и методов передачи данных. Настроек много. Остановимся на тех, которые нужны на этой конкретной форме.

При создании новой формы здесь генерируются два основных события «On load» и «On submit», пока пустые.

Для того, чтобы наша форма отображалась на странице, нужно к событию «Onload» приаттачить генерацию ее html-кода (режим генерации мы установили во вкладке «Код»). Для этого из верхней левой менюшки «Basic» перетаскиваем мышью в область события элемент «HTML (Render Form)», открываем его и проверяем настройки.

В нашем случае они такие:

  • Page: 1
  • Submit event: submit
  • Form method: File
  • Form Class: chronoform
  • Sign «*»: Yes
  • Relative Url: Yes
  • Ajax: No

К событию «On submit» приаттачиваем две отправки email и вывод сообщения на страницу. Тоже верхнее левое меню «Basic». Оттуда перетаскиваем два «email» и один «Display Message». Вот что у нас получилось.

Теперь редактируем их.

Первый «email» будет отвечать за пересылку сообщения с сайта выбранному пользователем получателю.

Настройки из вкладки «Общие» (General) нам нужны такие:

  • Enable: Yes
  • Subject: Сообщение от посетителя сайта sitename
  • From Name: sitename
  • From Email: info@sitename.ru
  • Email Format: Html
  • Template Generate: Auto

Template Generate ставим пока Auto (чтобы компонент при сохранении сгенерировал нам «балванку» сообщения). Потом, когда мы ее по своему усмотрению поправим, переключим настройку на «Custom».

Остальные оставляем как есть, пустыми.

Настройки из вкладки «Расширенные» (Advanced) нужны такие:

  • To Email (dinamic): text6

Остальные не трогаем. Text6 — это созданное нами вспомогательное поле, куда передается адрес получателя, выбранный пользователем из списка select (наш элемент «Dropdown4» на форме).

Второй «email» будет отвечать за отправку сообщения пользователю со «спасибо за сообщение» или копией письма.

Настройки из вкладки «Общие» (General) нам нужны такие:

  • Enable: Yes
  • Subject: Сообщение с сайта sitename
  • From Name: sitename
  • From Email: info@sitename.ru
  • Email Format: Html
  • Template Generate: Auto

Template Generate тоже пока Auto. Остальные оставляем как есть.

Настройки из вкладки «Расширенные» (Advanced) нам нужны такие:

  • To Email (dinamic) text3

Остальные опять не трогаем. Еext3 — это поле, куда пользователь вбивает свой email при заполнении формы.

Display Message. Здесь все просто. Редактор html-кода работает аналогично редактору кода для работы с контентом Joomla. Если хотим вставить сюда значение какого-либо из полей формы, то указываем имя поля в фигурных скобках без пробелов.

У меня код сообщения получился таким:

<p><b><em>Уважаемый(ая) {text2}!</em></b></p>
<p>Спасибо за Ваше сообщение! Мы ответим на него в ближайшее время на Ваш e-mail.</p>

Сохраняем. Закрываем. Создаем в меню Joomla пункт с формой и смотрим ее на странице.

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

Все работает. Теперь наводим окончательную красоту.

Наша форма — «Проект» (Designer) — Вспомогательное поле text6. Скрываем его с помощью настроек из вкладки «General». Настройка «Load State» ставим «parent hidden». Значение label убираем совсем. Теперь этого поля на странице не видно.

Теперь правим тексты наших писем, делаем их более наглядными. Форма Вкладка «Install» — элементы «email» внутри события «On submit». По умолчанию они генерируются в виде таблицы, но можно переписать их начисто по своему усмотрению, оставив коды вставки полей формы (или добавив другие). Не забываем переключить режим генерации сообщения на «Custom» (если мы этого не сделаем — слетит наш  вариант сообщения).

Код сообщения первого email (для сотрудника).

<h3>{dropdown4} ООО "Фирма"<br>
посетитель сайта {text2} отправил(ла) следующее сообщение:</h3>
{textarea5}
<p><br><br>Ответ на данное сообщение необходимо отправить на email {text3}</p>

Код сообщения второго email (для посетителя, отправившего сообщение).

<h3>Уважаемый(ая) {text2}!</h3>
<p>Благодарим за Ваше сообщение.<br>
Наш сотрудник получил его и ответит в ближайшее время на Ваш email.</p>

Сохраняем. Закрываем. Проверяем.

На сайте получилось вот такое сообщение.

И такие два письма для отправителя и для сотрудника.

Добавить сообщение

Форма входа

Индекс цитирования Яндекс.Метрика