build.html

<div class="hidden" data-form-builder-id="{{ id }}">
  <form v-if="isConfigured" v-on:submit.prevent="onSubmit" class="fl-form" v-bind:class="{ 'form-offline': isOffline, 'loading-form': isSending || isLoading && !blockScreen }">
    <template v-if="isSending">
      <div class="sending-form">
        <div class="spinner-holder animated">
          <div class="spinner-overlay" data-translate="widgets.form.loading">Loading...</div>
          <p v-html="isSendingMessage"></p>
        </div>
      </div>
    </template>
    <template v-if="isLoading && !blockScreen">
      <div class="sending-form">
        <div class="spinner-holder animated">
          <div class="spinner-overlay" data-translate="widgets.form.loading">Loading...</div>
          <p v-html="isLoadingMessage"></p>
        </div>
      </div>
    </template>
    <div v-if="!isSent" class="form-html">
      <div v-if="isOffline" class="text-danger" v-bind:class="{ 'cover-form' : blockScreen }" v-html="isOfflineMessage"></div>
      <div v-if="hasRequiredFields" class="required-info-label">\{{$t("widgets.form.sending.requiredFields")}}</div>
      <template v-for="field in fields">
        <component :is="field._type" v-bind="field" v-on:_input="onInput" v-on:_error="onError" v-on:_reset="reset" v-if="field.enabled"></component>
      </template>
      <div class="callout callout-danger" v-if="error">
        <p>\{{ error }}</p>
      </div>
    </div>
    <transition name="fade">
      <div v-if="isSent">{{{ resultHtml }}}</div>
    </transition>
  </form>
  <div v-else-if="!isConfigured && isPlaceholder">
    <form class="fl-form placeholder">
      <div class="form-html">
        <div class="form-group clearfix" _type="flTitle">
          <h2>Example form</h2>
        </div>
        <div class="form-group clearfix" _type="flParagraph">
          <p>Click on this example to configure your own form</p>
        </div>
        <div class="form-group clearfix" _type="flInput">
          <label>Name</label>
          <input type="text" name="field-1" placeholder="Enter your name" class="form-control">
        </div>
        <div class="form-group clearfix" _type="flSelect">
          <label>Type of enquiry</label>
          <label class="select-proxy-display">
            <span class="icon fa fa-chevron-down"></span>
            <span class="select-value-proxy">-- Select one</span>
            <select name="field-3" class="form-control hidden-select">
              <option value="">-- Select one</option>
              <option value="Option 1">Option 1</option>
              <option value="Option 2">Option 2</option>
            </select>
          </label>
        </div>
        <div class="form-group clearfix" _type="flTextarea">
          <label>Message</label>
          <textarea name="field-2" rows="4" class="form-control"></textarea>
        </div>
        <div class="form-btns clearfix">
          <button type="submit" class="btn btn-primary pull-right">Submit</button>
          <button type="reset" class="btn btn-secondary pull-right">Clear</button>
        </div>
      </div>
    </form>
  </div>
  <div v-else class="col-sm-12 loading-message">
    <!-- Show loading animation -->
    <div class="spinner-holder animated">
      <div class="spinner-overlay">Loading...</div>
    </div>
  </div>
</div>