Контакты

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

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

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

Такую форму можно создать c помощью Chronoforms5.

Чтобы пользователь легко мог сориентироваться с выбором получателя, в списке select целесообразно указывать не адреса email, а наименование должностей или что-то другое, указывающее на сферу деятельности специалиста, которому пользователь отправит письмо.

Создаем форму с необходимыми элементами.

«Компоненты» — «Chronoforms5» — «Создать».

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

  • Имя формы: любое имя на латинице без пробелов и спецсимволов
  • Описание: не обязательно, эта информация только для нас
  • Опубликовано: «Да»
  • Режим установки: «Расширенный»
  • Внешнее оформление: на ваш выбор (я обычно ставлю «Нет»)

Остальные можно не указывать.

Сохраняем.

Во вкладке «Проект» (Designer) располагаем элементы формы:

  1. Пользовательский произвольный элемент (левая нижняя менюшка «Advansed» — элемент «Custom»). Его будем использовать для Названия формы и текстовых примечаний.
  2. Имя отправителя (левая верхняя менюшка «Basic» — элемент «Text Box»). Тут о назначении элементов все понятно
  3. Почта отправителя («Basic» — элемент «Text Box»).
  4. Почта получателя («Basic» — элемент «Dropdown»).
  5. Вспомогательное текстовое поле («Basic» — элемент «Text Box»).
  6. Сообщение (обязательное) («Basic» — элемент «Textarea Box»).
  7. Кнопка «отправить» («Basic» — элемент «Submit Button»).

Выглядит это примерно так.

Прописываем соответствующие label.

Настраиваем поля наших элементов формы.

Custom. У этого элемента, судя по всему, возможностей много. В данном случае, используем его как контейнер для html-кода. Для этого кликаем по кнопке «Редактировать». В его настройках только одна вкладка с полями «Label», «Code» и кнопкой переключения в режим редактора (голубая в самом низу окошка). Туда забиваем произвольно название или какой-либо текст. Лэйбл (label) убираем. Получилось следующее.

Text Box. Эти элементы используются как текстовые поля в одну строку для заполнения любых данных (в зависимости от настроек). Настроим все «Text Box», за исключением вспомогательного. Его пока трогать не будем.

Открываем настройки каждого из текстовых полей (кнопка редактирования). Их настройки включают в себя две вкладки: «Общие» (General) и «Проверка» (Validate).

Нас интересуют обе вкладки.

Общие:
  1. Label — надпись к полю
  2. Label position — позиция надписи по отношению к полю
  3. Tooltip — если хотим указать именно свой тултип
  4. Остальное можно оставить как есть

Проверка:

  1. Requared — обязательное поле или нет
  2. Далее типы — указываем для каждого поля свой тип (для имени — «alpha», для почты «email» и т. д.)

Получились такие настройки валидации для имени и email.

Во вспомогательном текстовом поле «Text Box» (у меня это text6) ничего пока не прописываем, кроме настройки типа поля в «Validate». Для него указываем, что это электронный адрес почты (Validate — Email — Yes).

Textarea Box. Здесь ничего особенного нет. В настройках так же две вкладки («Общие» и «Проверка»), как и у «Text Box». Настраиваем по своему усмотрению.

Submit Button. Здесь еще проще — указываем только надпись, которую хотим видеть на самой кнопке (в настройках поле «Value/Label»).

Dropdown. Это основной элемент на  нашей форме, который будет передавать переменную-email по событию выбора элемента из списка.

Открываем редактирование. Видим целых четыре вкладки. Из них нас интересуют только три. Это «Общие» (General), «Проверка» (Validate) и «Событие» (Action).

  1. Dropdown — Общие: >>
  2. Dropdown — Проверка:  >>
  3. Dropdown — События:
    Здесь создаем столько событий, сколько у нас получателей.
    • On — ставим знак равенства (не отрицания)
    • Value selected — прописываем точно так, как у нас заполнена левая часть параметра (в Dropdown — Общие).
    • Action — выбираем функцию
    • Field id, … — указываем наше вспомогательное поле, которое будет принимать переменную (см. выше) и значение переменной — адрес email (document.getElementById('text6').value='nashe@mylo.ru').
    Получиться должно примерно так.

На этом настройка визуальной части полей формы закончена. В следующей статье опишу основные настройки самой формы.

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

Форма входа

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