Блог о Joomla, новости и уроки по Joomla, K2, Virtuemart, JoomShopping
Chronoforms 5 - создание формы в режиме Custom

Чтобы создать форму с нужной нам разметкой, удобно добавить поля формы, а потом переключиться с режима кода Wizard designer на Custom code.

thumb-chronoforms5-custom-code-01.jpg

Теперь уберем не нужные нам тэги div и добавим свою раметку, например, так:

<div class="row-fluid">
 <div class="span6">
  <input name="name" id="name" value="" placeholder="Ваше имя" class="validate[&#039;required&#039;] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
  <input name="email" id="email" value="" placeholder="Ваш email" class="validate[&#039;required&#039;,&#039;email&#039;] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
  <input name="phone" id="phone" value="" placeholder="Ваш телефон" class="form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
 </div>
<div class="span6">
<textarea name="message" id="message" placeholder="Сообщение" rows="3" cols="40" class="validate[&#039;required&#039;] form-control A" title="" style="" data-wysiwyg="0" data-load-state="" data-tooltip=""></textarea>
<input name="submitbutton" id="submitbutton" type="submit" value="Отправить" class="form-control A" style="" data-load-state="" />
</div>
</div>

Также во вкладке Styles выберем Form theme: none

thumb-chronoforms5-custom-code-02.jpg

И к приведенной выше раскладке формы можно еще в css файлы шаблона добавить следующий код:

.moduletable-back2 input, .moduletable-back2 textarea {
 box-sizing: border-box;
 font-size: 16px;
 height: 36px;
 line-height: 18px;
 margin: 0 0 10px;
 padding: 8px;
 width:100%;
}
.moduletable-back2 textarea {
width:100%;
height: 82px;
 
}
Самое читаемое

Делаем мобильную версию сайта с Mobile Joomla – часть II

Это вторая часть из цикла трех статей делаем мобильную версий сайта Mobile Joomla. MJ – мощный компонент для создания…

Шаблоны отображения категории товаров, страницы товара и модулей товаров Virtuemart 3. Меняем отображение вида товаров в разных категориях Виртуемарт 3

В ряде случаев, при разработке интернет-магазина на Virtuemart 3 приходится на разных страницах сайта показывать товары…

Дочерние товары в Virtuemart 3. Для чего нужны и как создать дочерние товары в Виртуемарт 3

Начать, наверное, стоит с того, что такое дочерние товары. В Virtuemart 3 есть такое понятие, как дочерние товары. Что…

Установка и первичная настройка интернет-магазина Virtuemart 3 на Joomla 3

Начнем с того, что Virtuemart 3 практически не отличается от своей предыдущей версии Virtuemart 2. Как пишут…

Как добавить иконки (картинки) "Скидка", "Новинка", "Хит продаж", "Рекомендуем" в Virtuemart 3

Давайте посмотрим, как добавить иконки (картинки) "Скидка", "Новинка", "Хит продаж", "Рекомендуем" в наш…

Настройка безопасного пути для счетов в Virtuemart 3

После установки Virtuemart 3 на ваш сайт появляется предупреждение о том, что не создана папка по безопасному пути. Эта…

Покупка в 1 клик Virtuemart 3. Заказ за 1 клик в карточке товара и на странице категории товоаров в Виртуемарт 3

Бывает очень удобно реализовывать для интернет-магазина на Virtuemart 3 покупку в 1 клик. Удобно, конечно, это в первую…