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

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

В прошлой статье, мы рассмотрели как скачать и установить ChronoForms, а также как настроить простую форму обратной связи. В этой статье мы более подробно рассмотрим настройку формы ChronoForms, которую можно будет использовать как заявку на какое либо мероприятие или заказ на оказание услуг, а также для сайтов с небольшим количеством товара можно использовать для замены компонента Интернет-магазина, а также для сложных товаров (с большим количеством параметров).

Мы с Вами создадим форму заказа услуг для сайта (продвижение в ПС, в соц.сетях или рекламы). Эту форму взял для примера, чтобы Вам была понятна суть создания и настройки формы заявки/заказа. А Вы уже сами переделаете под свой лад. Я активно использую ChronoForms, если делаю сайт для клиентов на Joomla. Для какого то это опросные листы по оборудованию (чтобы определиться какое именно оборудование заказать), а для кого то форма записи на курс/тренинг или предварительная запись на какие либо процедуры. Использование компонента ChronoForms достаточно широкое.

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

ChronoForms–создание форм, заявок и бланков заказа для Joomla. Быстрый старт

После установки компонента, мы заходим в закладку “Easy Form Wizard” (Простой мастер форм). Как говорилось в предыдущих статьях слева отображены поля, справа рабочая область формы куда слева перетаскиваются нужные поля формы. Поля можно перемещать по форме, удалять и входить в настройки поля, указывая текст который будет выводиться в форме, а также параметры этого поля.

 

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

Часто бывает необходимо писать вводный текст в форме, для этого нам и понадобится поле Formatted Text (Форматированный текст).

С левой части перетаскиваем в правую рабочую часть Formatted Text. Справа нажав на значок Configure (Конфигурация)

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

Вводите необходимый текст. Нажимаете Add/Remove editor если хотите включить/выключить визуальный редактор. Он понадобиться для оформления Вами текста. Не забываем нажимать “Apply”, для применения настроек. Описание появиться только после сохранения формы (для сохранения формы нужно обязательно ее назвать в закладке Form Settings).

Если вы хотите увеличить пробел между этим полем и следующем используйте новую строку, если не помогло в визуальном редакторе выберите HTML и с новой строки добавьте код <p>&nbsp;</p> и сохраните.

 

Создаем поля ввода данных Text Box

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

Создаем поля ввода данных Text Box

В закладке “General” (общее), в графе “Label Text” мы вводим название отображаемое в форме, а графа “Field Name” – это внутреннее имя этого элемента, пока оно нас не интересует.

 

Создаем поля ввода данных Text Box

Other (Другое):

Instructions for users – инструкции для пользователя

Tooltip – подсказки

Создаем поля ввода данных Text Box

Вот как они выглядят на сайте, Instructions for users – отображается внизу под полем ввода данных, а подсказки Tooltip выводятся справа и обозначаются вопросиками.

Instructions for users можно использовать и написать так что поле “обязательно для заполнения”, также можно самим в названиях полей дописывать звездочку “ * ”, и внизу вставить поле Formatted Text, в котором Вы опишите, что звездочка означает, что поле обязательно для заполнения.

Создаем поля ввода данных Text Box

Validation (Проверка) – проверяет на соответствие введенные данные, можно указать какие данные должны вводиться (номер телефона, email…), если выбранные параметр не будет совпадать то выдаст ошибку.

Required – выбираем, это означает, что поле обязательное для заполнения

Обязательно нажимаем “Apply”, т.е. применить внесенные изменения и закрываем форму.

Тоже самое повторяем для полей ввода почтового ящика (Validation->Email), номер телефона (Validation->Phone), Адреса сайта (Validation->URL). Поле ввода сайта я сделал не обязательным.

 

Создаем поле выбора параметров CheckBoxes Group

Также в левой панели находим данный тип поля и перетаскиваем в правую рабочую область. Заходим в конфигурацию, называем поле (General->Label Text)

Создаем поле выбора параметров CheckBoxes Group

Field title – всплывающая подсказка при наведении на поле

Checked value – значение по умолчанию, указывайте первую часть в поле Options, до знака равно (читайте далее)

Options – нужно задать параметры для выбора, они имеют формат “данные=данные”. Первая часть до рано, это то значение которое отсылается на почту, а второе значение после знака равно, то что отображается на сайте. Они могут быть как одинаковые, так и разные.

     То_что отсылается_на_почту=То_что_отображается_на_сайте

Я выбрал:

     Продвижение в соц.сетях=Продвижение в соц.сетях
     Продвижение в поисковых системах=Продвижение в поисковых системах
     Реклама=Реклама

По умолчанию CheckBoxes Group и Radio Box распологаются в строчку, если хотите в столбец, то нужно выбрать конфигурацию поля, закладка Other и поставить галочку Checkboxes Vertical.

 

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

Находим и перемещаем поле Radio Box. Он подразумевает выбор только одного параметра из списка, в отличие от CheckBoxes Group, в котором можно выбрать несколько параметров. Это может быть что угодно, вы можете задать вопрос с выбором ответов ДА или НЕТ, дать возможность выбрать из нескольких предложенных вариантов и т.д.

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

Заходим в настройки,

Field title – текст для всплывающей подсказки

Field Default Value – можно задать значение по умолчанию, вписывайте первое значение перед знаком равно

Options – задается аналогично CheckBoxes Group

Я ввел:

     до 5000р=до 5000р
     до 10000р=до 10000р
     до 15000р=до 15000р
     до 30000р=до 30000р

А можно конечно написать так:

     выбрал 5000р, маловато конечно=до 5000р
     выбрал 10000р, вот это нормально=до 10000р
     выбрал 15000р, отлично — работаем=до 15000р
     выбрал 30000р, держись зубами за него=до 30000р

Первая часть до ровно уйдет Вам на почту, вторая будет отображаться на сайте. Только в таком случае случайно не перешлите ответ с цитированием)))

 

В следующей статье мы рассмотрим поля Drop Down, Datetime Picker, Text Area, Checkbox, Captcha Input, Submit Button, а также в третьей части рассмотрим настройку формы.

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

14 комментариев
  1. Vladimir:

    Спасибо за статью — очень толково. Я всё поставил и работает. Но вот хотелось бы узнать: ввод международного номера телефона можно как-то формализовать (код страны, города, телефон)?
    И еще: в случае ошибки с вводом форму предлагается заполнить заново, но в поле правильного email’а вылезает текст кода …script… и т.д. Можно ли это как-то исправить?

  2. Lana:

    «в поле правильного email’а вылезает текст кода …script… и т.д. Можно ли это как-то исправить?»
    то же самое

  3. Vladimir:

    Я решил: нужно выключить плагин «Контент — Скрытие электронной почты» (админ.панель>плагины…).

    • ageta:

      [b]Vladimir[/b][quote]Спасибо за статью — очень толково[/quote]
      Спасибо, приятно слышать теплые слова, стимулирует писать статьи дальше.
      [quote]Я решил[/quote]
      Отлично, спасибо что написали решение, думаю многим может пригодиться. А то сейчас у меня даже нет времени на написание новых статей и ответом на комментарии.

  4. Igor:

    Создал новую форму. Но вкладки имейл как на вашем скриншоте у меня нет. Что я делаю не так? Вот такое только есть http://clip2net.com/clip/m74783/1375803047-clip-4kb.png

  5. zagazat:

    выводит ошибку, якобы я не ввёл имя формы. хотя я ввёл и в менюшке всё заполнил. но почему то выводи «Form name can NOT be empty!» и всё. чёт подбешивает. Joomla 2.5 у меня.

  6. zagazat:

    теперь ошибка не выскакиывает, но форма просто не отображается.

  7. Александр:

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

  8. Анастасия:

    Добрый день! Спасибо за прекрасные подробные статьи.
    Возникла проблемка — сообщение от формы приходит на почту, но оно пустое, данных из формы в нем нет.

  9. Мишаня:

    Как сделать сверку двух полей? ( типа пароли не совпадают, но не для пароля )

  10. Olga Onix:

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

  11. Владимир:

    В 5 версии появилось поле Secondary checkbox label, но при тестировании оно почему-то не отображается. Подскажите, пожалуйста — это глюк шаблона, или это поле нужно где-то включать?

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