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

Chronoforms 5 - создание формы в режиме Custom

Теперь уберем не нужные нам тэги 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

Chronoforms 5 - создание формы в режиме Custom

И к приведенной выше раскладке формы можно еще в 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;
 
}

 

Чтобы сделать комментарий, нужно авторизоваться на сайте!