File-up

by VeryGoodFiddle

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<form id="cc-form">
  <div id="cc-name" class="form-group">
    <label for="cc-name-field">Name on card</label>
    <div class="form-control-static">
      <span class="fake-input"></span>
    </div>
  </div>
  <div id="cc-number" class="form-group">
    <label for="cc-name-field">Number</label>
    <div class="form-control-static">
      <span class="fake-input"></span>
    </div>
  </div>
  <div id="file-upload" class="form-group">
    <label for="file-upload">File upload</label>
    <div class="form-control-static">
      <span class="fake-input"></span>
    </div>
  </div>
  <button type="submit" class="btn btn-info">Submit</button>
</form>

<pre id="state"></pre>
<pre id="response"></pre>
<style media="screen">
  .form-control-static iframe {
    height: 100%;
    vertical-align: middle;
  }
  .form-control-static span.fake-input {
    background-color: #fff;
    border: 1px solid #BFBFBF;
    padding: 1px;
    height: 27px;
    position: relative;
    display: inline-block;
  }
  .form-control-static span.fake-area {
    background-color: #fff;
    border: 1px solid #BFBFBF;
    padding: 1px;
    position: relative;
    display: inline-block;
  }
  iframe {
    border: 0px solid transparent;
  }

  #file-upload .fake-input{
    border:none;
    box-sizing: border-box;
    padding: 10px;
    height: 60px;
  }
</style>
<script type="text/javascript" src="https://js.verygoodvault.io/vgs-collect/1/ACjUHt9JNJkfGHWiN6DBtTbp.js"></script>
<script type="text/javascript">
  var f = VGSCollect.create('tnts8xrfjrt', function (state) {
    document.getElementById('state').innerText = JSON.stringify(state, null, '  ');
  });

  f.field('#cc-name .fake-input', {
      type: 'text',
      name: 'card.name',
      placeholder: 'Joe Business',
      validations: ['required'],
    });

  f.field('#cc-number .fake-input', {
    type: 'text',
    name: 'card.number',
    placeholder:...