Пример разных видов MIGX

test.md

<form method="post" action="{$_modx->makeUrl($_modx->resource.id)}" class="ajax_form" id="testingForm" name="testingForm">

  <input type="hidden" name="startTime" value="">
  <input type="hidden" name="finishTime" value="">

  <div class="testingForm--header">
    <div class="form-row">
      <div class="col">
        <div class="form-group">
          <label aria-label="{'test_name_company' | lexicon}">{'form_name_company' | lexicon}
            <input class="form-control [[+fi.error.test_name_company]]" required type="text" name="test_name_company" onkeyup='checkParams()' value="[[!+fi.test_name_company]]">
          </label>
        </div>
      </div>
      <div class="col">
        <div class="form-group">
          <label aria-label="{'form_name' | lexicon}">{'form_name' | lexicon}
            <input class="form-control [[+fi.error.test_username]]" required type="text" name="test_username" onkeyup='checkParams()' value="[[!+fi.test_username]]">
          </label>
        </div>
      </div>
    </div>

    <div class="form-row">
      <div class="col">
        <div class="form-group">
          <label aria-label="{'test_surname' | lexicon}">{'form_surname' | lexicon}
            <input class="form-control [[+fi.error.test_surname]]" required type="text" name="test_surname" onkeyup='checkParams()' value="[[!+fi.test_surname]]">
          </label>
        </div>
      </div>
      <div class="col">
        <div class="form-group">
          <label aria-label="{'test_position' | lexicon}">{'form_the_post' | lexicon}
            <input class="form-control [[+fi.error.test_position]]" required type="text" name="test_position" value="[[!+fi.test_position]]">
          </label>
        </div>
      </div>
    </div>

    <div class="form-row">
      <div class="col">
        <div class="form-group">
          <label aria-label="{'test_email' | lexicon}">{'form_email_address' | lexicon}
            <input class="form-control [[+fi.error.test_email]]" required type="email" name="test_email" onkeyup='checkParams()' value="[[!+fi.test_email]]">
          </label>
        </div>
      </div>
      <div class="col">
        <div class="form-group">
          <label aria-label="{'test_email_head' | lexicon}">{'form_email_head' | lexicon}
            <input class="form-control [[+fi.error.test_email_head]]" required type="email" name="test_email_head" value="[[!+fi.test_email_head]]">
          </label>
        </div>
      </div>
    </div>

    <div class="form-row">
      <div class="col">
        <div class="form-group">
          <label aria-label="{'test_phone' | lexicon}">{'form_mob_phone' | lexicon}
            <input class="form-control [[+fi.error.test_phone]]" required type="tel" name="test_phone" onkeyup='checkParams()' value="[[!+fi.test_phone]]">
          </label>
        </div>
      </div>
      <div class="col">

      </div>
    </div>

    <div class="form-row">
      <div class="col">
        <div class="start__wrap mt-3">
          <button type="button" id="btn_start" class="btn__start" disabled>{'test_start' | lexicon}</button>
        </div>
      </div>
    </div>
  </div>

  <div class="testingForm__wrap">
    {foreach $_modx->resource.testing | fromJSON as $item}
    {set $index = $item@index + 1}

    <div class="task__item">
      <div class="task__item--header">
        <div class="h3 task__item--title">{'test_task' | lexicon} №{$index}</div>
        <div class="task__item--time">{$item.time_question}</div>
      </div>
      <div class="task__item--name">{$item.name}</div>
      <div class="task__item--description">{$item.description}</div>
      {if $item.image}
      {foreach $item.image | fromJSON as $items}
      <div class="task__item--image zoom-gallery">
        <a href="/{$items.image}" data-source="{$items.image}">
          <img src="/{$items.image}"class="img-responsive">
        </a>
      </div>
      {/foreach}
      {/if}
      {if $item.video}
      <div class="task__item--video">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="{$item.video}"></iframe>
        </div>
      </div>
      {/if}
      {if $item.video_file}
      <div class="task__item--video">
        <div class="embed-responsive embed-responsive-16by9">
          <video width="320" height="240" controls>
            <source src="{$item.video_file}" type="video/mp4">
          </video>
        </div>
      </div>
      {/if}
      <div class="task__item--decision">
        <div class="h4">{'test_decision' | lexicon}</div>
        <span class="note">{$item.note_answer}</span>
        {switch $item.type}
          {case 'description'}
          <label for="answer_{$index}">
            <textarea class='form-control' name='answer_{$index}' id='answer_{$index}' cols='30' require rows='4' maxlength='1000' placeholder='{'test_answer_placeholder' | lexicon}'></textarea>
          </label>
          {case 'listbox'}
          <label>
            <select name="answer_{$index}">
              {foreach $item.answer | fromJSON as $item}
              <option value='{$item.value}' {('fi.answer_' + $index) | placeholder | FormItIsSelected : $item.value}>{$item.value}</option>
              {/foreach}
            </select>
          </label>
          {case 'checkbox'}
            {foreach $item.answer | fromJSON as $item}
            <label for="answer_{$index}{$item@index}">
              <input type='checkbox' name='answer_{$index}[]' id='answer_{$index}{$item@index}' value='{$item.value}' />
              <span>{$item.value}</span>
            </label>
            {/foreach}
          {case 'radio'}
            {foreach $item.answer | fromJSON as $item}
            <label for="answer_{$index}{$item@index}">
              <input type='radio' name='answer_{$index}' id='answer_{$index}{$item@index}' value='{$item.value}' />
              <span>{$item.value}</span>
            </label>
            {/foreach}
        {/switch}
      </div>
    </div>
    {/foreach}

    <div id="finishForm">
      <button class="btn__finish" type="submit">{'form_button' | lexicon}</button>
    </div>

  </div>

  [[+fi.success:is=`1`:then=`
  <div class="alert alert-success">[[+fi.successMessage]]</div>
  `]]
  [[+fi.validation_error:is=`1`:then=`
  <div class="alert alert-danger">[[+fi.validation_error_message]]</div>
  `]]

</form>