<div id="app">
  <form @submit.prevent>
    <div class="form-group">
       <input type="email" class="form-control" placeholder="Your Email" v-model="email">
    </div>
    <div class="form-group">
        <select class="form-control" v-model="referrer">
          <option value="">How did you hear about us?</option>
          <option v-for="referrer in referrers" :value="referrer">{{ referrer }}</option>
        </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input id="accept" class="form-check-inline" type="checkbox" v-model="accepted">
        <label class="form-check-label" for="accept">
          Accept the terms an conditions
        </label>
      </div>
    </div>
  </form>
  
  <div class="card mt-5">
    <div class="card-header">Request</div>
    <div class="card-body">
      <p>Email: <strong>{{ email }}</strong></p>
      <p>Referrer: <strong>{{ referrer }}</strong></p>
      <p>Accepted: <strong>{{ accepted }}</strong></p>
    </div>
  </div>
</div>

html, body {
  display: grid;
  justify-content: center;
  align-content: center;
  
  height: 100%;
  width: 100%;
}

const app = new Vue({
  el: '#app',
  data: {
    referrers: ['TV', 'Radio', 'Google', 'Other'],
    email: '',
    referrer: '',
    accepted: false,
    showResponse: false
  }
})