ChronoForms–создаем форму заявки (заказа) часть 2

ChronoForms–создаем форму заявки (заказа) часть 2

В предыдущей статье о ChronoForms, мы рассмотрели поля формы Formatted Text, Text Box, CheckBoxes Group, Radio Box. Во второй части мы продолжаем создавать форму заявки или заказа ChronoForms для Joomla. В этой статье мы рассмотрим поля Drop Down, Datetime Picker, Text Area, Checkbox, Captcha Input, Submit Button компонента ChronoForms.

Можете ознакомиться с предыдущей статьей ChronoForms–создаем форму заявки (заказа) часть 1

 

Выбор одного из параметров Drop Down

Поле Drop Down дает возможность сделать выбор одного из параметра (также можно указать значение мульти выбор) из выпадающего списка, как показано на картинке:

Выбор одного из параметров Drop Down

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

Основные значения:

  • Selected – выбирается параметр который будет выбран по умолчанию, вводите название до знака “=”
  • Multiple – ставим галочку, если хотим дать возможность выбора нескольких параметров, но не все пользователи сами разберуться, что надо зажимать Ctrl для мульти выбора. Можете написать это в инструкции, но если попадется человек который не на Ты с сайтами, может и не разобраться как и куда нажимать даже при наличии инструкции.
  • empty value – пустое значение, можно задать первый параметр и назвать к примеру “пустое значение” или “не выбрано”, если хотите дать возможность не выбирать не один параметр
  • Field title – текст выводимый при наведении на данное поле (всплывающая подсказка), можно в нем и написать инструкцию по работе или просто написать “Выберете один из параметров”
  • Size – размер поля, удобно использовать если Вы указали возможность выбора нескольких параметров (Multiple), и тогда меню уже будет не выпадающее, а просто окно с полосой прокрутки. Если задаешь параметр 2, 3, 4, то все равно выводит 4 строки.
  • Options — задается аналогично CheckBoxes Group и Radio Box

 

Создаем поле выбора даты и времени Datetime Picker

Данное поле удобно, если посетителю сайта надо выбрать дату и/или время в форме. Используем для этого поле Datetime Picker.

Создаем поле выбора даты и времени Datetime Picker

Заполняется label text, а также есть еще два новых поля:

  • Enable Time picker – включить выбор времени
  • Time picker ONLY – выбирать только время без даты

Остальные параметры аналогичны, не забываем сохраняться и при необходимости указывать данное поле обязательным для заполнения (Required)

 

Создаем текстовое поле Text Area

Текстовое поле можно использовать в разных назначениях, если это форма обратной связи, тогда это поле для ввода основного теста сообщения, в нашем же случае это будет примечание. Итак, уважаемые читатели Ageta, перетаскиваем поле Text Area в рабочую область нашей формы. Заходим в конфигурацию Text Area.

Вводим в Label Text “Примечание”. Основные параметры аналогичны, но хотелось остановиться на вкладке Editors:

  • Enable WYSIWYG Editor – включить визуальный редактор, это нужно если хотите, чтобы пользователь мог выбирать шрифт и другое оформление текста.
  • Show editor buttons – показать кнопку открытия/закрытие визуального редактора (работает только при включенном визуальном редакторе)
  • Editor Width, Wditor Height – задает параметры ширины и высоты текстового поля

Я ставлю данное поле не обязательным для заполнения. Если у Вас форма обратной связи или другая форма где требуется обязательное заполнение ставьте галочку на Required.

 

Создаем поле выбора Checkbox

Аналогичен полю CheckBoxes Group, но в отличие от него данное поле предусматривает только один параметр. Т.е. одну ячейку для галочки. Используется ели вы хотите задать не выбор, а именно один параметр, по сути как вопрос да (стоит галочка) или нет (галочка отсутствует). К примеру,

Создаем поле выбора Checkbox

На картинке использовано три поля Checkbox.

Мы будем использовать последний вариант, спрашивая “Ознакомлен с условиями предоставления услуг”, а также сверху через поле Formatted Text, мы расположим ссылку на эти условия. Для ссылки нужно будет в конфигурации Formatted Text включить редактор, написать текст и вставить ссылку.

 

Ввод капчи Captcha Input

Для ввода капчи (текста с картинки) используем поле Captcha Input. Капча Вам поможет избавиться от большого потока спама на Ваш электронный ящик

Вводим также название поля перед капчей, к примеру “Введите код с картинки”, делаем этот параметр обязательным для заполнения (Required).

Ввод капчи Captcha Input

Также, чтобы капча заработала нужно выбрать вкладку “Captcha” и напротив параметра “Enabled” поставить да и ниже заполнить какое сообщение выводить при неправильно введённом коде.

 

Кнопка отправки формы Submit Button

Для того, чтобы отправить форму нужна кнопка, ее мы берем также слева, она называется Submit Button и перетаскиваем в рабочую область.

Кнопка отправки формы Submit Button

Входим в конфигурацию. В поле “Text” вводим к примеру слово “Отправить”. Также есть еще интересные поля в настройках:

  • Add Back Button и Back Button Text – добавляем галочку если хотим добавить кнопку возврата к предыдущей страницы и называем эту кнопку (к примеру “Назад”).
  • Add Reset Button и Reset Button Text – добавляет кнопку сброса введенных данных в форме и называем эту кнопку (к примеру “Очистить”).

Также в другой закладке “Other” можно выбрать как кнопку расположить слева, справа или по центру.

12 комментариев
  1. Светлана:

    Разбираюсь в программе. Добавила Каптчу. Сообщения не отсылаются, в окошке кода появляется двойной код (на переднем и на заднем плане другой) ввести код соответственно нельзя,т.к. не видно второго. Что посоветуете?

    • ageta:

      [b]Светлана[/b], немного не понятно какая у Вас проблема. Задний код это может тень или просто для обмана систем автоматического распознавания.

      • Фёдор:

        Эээх все три части прочел. Самое главное в моем случае Вы почему-то не описали)) Или может не захотели.. Мне для приема онлайн-заявки на кредитеование нужен скан паспорта. Соответственно нужна отправка картинок через данную заявку, а картинки почему-то ну никак не хотят оптравляться. А за статью спасибо. Очень помогла разобраться

  2. Павел:

    Enter your email message content here manually or use the auto template generation button.
    Вот такую фигню присылает, вроде все настроил правильно

    • OxoTHuK13:

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

  3. Санёк:

    Ребята, создана форма. Проблема такая:
    Поля для заполнения растянуты на всю страничку, и текст который описывает что заполнить в поле не растянут над полем, а сгрупирован в столбик не больших размеров.
    Как сделать так, что бы поля были меньше и текст был не в несколько сторк, а растягивался над заполняемым полем?

    • ageta:

      [b]Санёк[/b], пункт «Field Size» отвечает за ширину поля в конфигурации этого поля. Насчет текста я немного не понял в чем проблема.

      • Санёк:

        Всё равно длина поля не изменилась:( Оно растягивается на всю страницу, на сайте по максимуму растянуто и при нажатии на «Test Form» тоже на всю пустую страницу растягивается:(

        А с текстом такая проблема:
        вот допустим название поля «ценовая категория за одного человека в сутки»
        а он написан так: ценовая категория
        за одного человека
        в сутки.

        Как с этим быть?

        • ageta:

          [b]Санёк[/b], должно все работать. Вам нужно с помощью FireBug посмотреть какими стилями регулируется и подправить через стили CSS

  4. Олег:

    Здравствуйте! Возникла очень неприятная проблема… Форма выглядит неплохо, функционирует нормально… Но необходимо, чтобы в Drop Down стандартное значение зависело от страницы, с которой мы на эту форму перешли… Возможно ли реализовать такую функцию?..

  5. Евген:

    А можно сделать, чтобы была кнопка вывода на печать?

  6. Алекс:

    Не подскажите, как добавить к форме урл страницы, с которой эту форму вызвали?

Поделитесь своим мнением
Для оформления сообщений Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>