[[+partition:is=`form`:then=`
<script src="//www.google.com/recaptcha/api.js?render=site-key"></script>
<script src="/assets/js/plugins/customform.min.js?v=[[!randomNumber]]"></script>
<div data-module="form" class="customform">
  <div class="container framed page">
    <form data-id="customform-[[+id]]" method="POST" [[+recaptcha:is=`1`:then=`data-grc-sitekey="[[++grc.site_key]]"`]] data-validations='[[+validations]]' data-messages='[[+messages]]' data-style="default" data-size="large" novalidate>
      <div class="form-top">

      </div>
      <div class="form-main">
        [[+sections]]
      </div>
      <div class="form-bottom">
        <span data-module="divider"></span>
        <div class="input"> 
          <div class="input-inner"> 
            <button type="submit"><span class="text">[[+button_text]]</span></button> 
          </div> 
        </div> 
      </div>
    </form>
    [[+recaptcha:is=`1`:then=`
    <div class="google-recaptcha-label">
      This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy" target="_blank" rel="nofollow noopener noreferrer" title="Privacy Policy">Privacy Policy</a> and <a href="https://policies.google.com/terms" target="_blank" rel="nofollow noopener noreferrer" title="Terms of Service">Terms of Service</a> apply.
    </div>
    `]]
  </div>
</div>
`]]

[[+partition:is=`form.section`:then=`
<div class="form-section">
  [[+hide_top:isnot=`1`:then=`
  <div class="form-section-top">
    <h3 class="form-section-top-title"><span class="form-section-top-title-text">[[+title]]</span></h3>
    <div class="form-section-top-description">
      [[+summary]]
    </div>
  </div>
  `]]
  <div class="form-grid form-section-main">
    [[+groups]]
  </div>
</div>
`]]

[[+partition:is=`form.section.group`:then=`
<div class="form-group">
  <div class="form-group-top">
    <h4 class="form-group-top-title"><span class="form-group-top-title-text">[[+title]]</span></h4>
    <div class="form-group-top-description">
      [[+description]]
    </div>
  </div>
  <div class="form-group-rows">
    <div class="form-grid-table">   
      [[+rows]]
    </div>
  </div>
</div> 
`]]

[[+partition:is=`form.section.group.row`:then=`
<ul>
  [[+columns]]
</ul>
`]]

[[+partition:is=`form.section.row.field[empty]`:then=`
  <li class="empty">&nbsp;</li>
`]]

[[+partition:is=`form.section.row.field[email]`:then=`
  <li><article>
    <div class="input" data-type="email">
      <label for="[[+section.alias]]:[[+name]]"><span class="text">[[+label]]</span></label>
      <div class="input-inner">
        <input type="email" id="[[+section.alias]]:[[+name]]" name="[[+section.alias]]:[[+name]]" placeholder="[[+placeholder]]" />
      </div>
    </div>
  </article></li>
`]]

[[+partition:is=`form.section.row.field[checkbox]`:then=`
  <li><article>
    <div class="input" data-type="checkbox">
      <span class="flabel"><span class="text">[[+label]]</span></span>
      <label for="[[+section.alias]]:[[+name]]">
        <input type="checkbox" id="[[+section.alias]]:[[+name]]" name="[[+section.alias]]:[[+name]]" value="[[+value]]"><span class="checkbox"></span><span class="text">[[+text]]</span>
      </label>
    </div>
  </article></li>
`]]

[[+partition:is=`form.section.row.field[file]`:then=`
  <li><article>
    <div class="input" data-type="file" data-validations='[[+validations]]'>
      <span class="flabel"><span class="text">[[+label]]</span></span>
      <div class="input-inner">
        <label for="[[+section.alias]]:[[+name]]">
          <span class="filename"><span></span></span> <span class="button"><span>Browse</span></span>
          <input type="file" id="[[+section.alias]]:[[+name]]" name="[[+section.alias]]:[[+name]]" placeholder="No file selected">
        </label>
      </div>
    </div>
  </article></li>
`]]

[[+partition:is=`form.section.row.field[listbox-single]`:then=`
  <li><article>
    <div class="input" data-type="select">
      <span class="flabel">[[+label]]</span>
      <div class="input-inner">
        <label for="[[+section.alias]]:[[+name]]">
          <select id="[[+section.alias]]:[[+name]]" name="[[+section.alias]]:[[+name]]">
            [[+options]]
          </select>
        </label>
      </div>
    </div>
  </article></li>
`]]

[[+partition:is=`form.section.row.field[listbox-single].option`:then=`
  <option value="[[+value]]">[[+text]]</option>
`]]

[[+partition:is=`form.section.row.field[radios]`:then=`
  <li><article>
    <div class="input" data-type="radios">
      <span class="flabel"><span class="text">[[+label]]</span></span>
      <span id="[[+section.alias]]:[[+name]]" style="display: hidden;"></span>
      <div class="input-inner">
        [[+options]]
      </div>
    </div>
  </article></li>
`]]

[[+partition:is=`form.section.row.field[radios].option`:then=`
  <div class="option">
    <label for="[[+section.alias]]:[[+name]]:[[+idx]]">
      <input type="radio" id="[[+section.alias]]:[[+name]]:[[+idx]]" name="[[+section.alias]]:[[+name]]" value="[[+value]]"><span class="radio"></span><span class="text">[[+text]]</span>
    </label>
  </div>
`]]

[[+partition:is=`form.section.row.field[text]`:then=`
  <li><article>
    <div class="input" data-type="text">
      <label for="[[+section.alias]]:[[+name]]"><span class="text">[[+label]]</span></label>
      <div class="input-inner">
        <input type="text" id="[[+section.alias]]:[[+name]]" name="[[+section.alias]]:[[+name]]" placeholder="[[+placeholder]]" />
      </div>
    </div>
  </article></li>
`]]

[[+partition:is=`form.section.row.field[textarea]`:then=`
  <li><article>
    <div class="input" data-type="textarea">
      <label for="[[+section.alias]]:[[+name]]"><span class="text">[[+label]]</span></label>
      <div class="input-inner">
        <textarea id="[[+section.alias]]:[[+name]]" name="[[+section.alias]]:[[+name]]" placeholder="[[+placeholder]]"></textarea>
      </div>
    </div>
  </article></li>
`]]

[[+partition:is=`form.section.row.field[date]`:then=`
  <li><article>
    <div class="input" data-type="date">
      <label for="[[+section.alias]]:[[+name]]"><span class="text">[[+label]]</span></label>
      <div class="input-inner">
        <input type="text" class="datepicker" id="[[+section.alias]]:[[+name]]" name="[[+section.alias]]:[[+name]]" placeholder="[[+placeholder]]" />
      </div>
    </div>
  </article></li>
`]]

[[+partition:is=`form.section.row.field[number]`:then=`
  <li><article>
    <div class="input" data-type="number">
      <label for="[[+section.alias]]:[[+name]]"><span class="text">[[+label]]</span></label>
      <div class="input-inner">
        <input type="text" class="number" id="[[+section.alias]]:[[+name]]" name="[[+section.alias]]:[[+name]]" placeholder="[[+placeholder]]" />
      </div>
    </div>
  </article></li>
`]]