diff --git a/config.js b/config.js
index e1d7415a..54bf712a 100644
--- a/config.js
+++ b/config.js
@@ -46,7 +46,7 @@ module.exports = {
       // SOCKET_API_URL: '"api/"',
       SOCKET_API_URL: '"https://socket.tutorcruncher.com"',
     },
-    port: 8000,
+    port: 5000,
     build_dir: path.resolve(__dirname, 'dev'),
     css_source_map: true,
     public_path: '/',
diff --git a/src/components/con-details.vue b/src/components/con-details.vue
index 05e099f7..4dc7176e 100644
--- a/src/components/con-details.vue
+++ b/src/components/con-details.vue
@@ -1,20 +1,5 @@
 <template>
   <div>
-    <div class="tcs-location">
-      <!--
-      this is the svg for map icon straight from
-      https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/map-marker.svg
-      -->
-      <svg class="tcs-svg" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
-        <path d="M1152 640q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm256 0q0 109-33
-          179l-364 774q-16 33-47.5 52t-67.5 19-67.5-19-46.5-52l-365-774q-33-70-33-179 0-212 150-362t362-150
-          362 150 150 362z"/>
-      </svg>
-      <span>{{ contractor.town }}, {{ contractor.country }}</span>
-    </div>
-
-    <div class="tcs-aside tcs-md" v-html="to_markdown(contractor.tag_line)"></div>
-
     <div class="tcs-md" v-html="to_markdown(contractor.primary_description)"></div>
 
     <div class="tcs-attr" v-for="attr in contractor_extra.extra_attributes">
@@ -59,14 +44,6 @@ export default {
     contractor_extra: function () {
       return this.$root.contractors_extra[this.$route.params.link] || {}
     },
-  },
-  created: function () {
-    // TODO could do something less ugly here like hide the scroll bar at all times
-    this.body_overflow_before = document.body.style.overflow
-    document.body.style.overflow = 'hidden'
-  },
-  destroyed: function () {
-    document.body.style.overflow = this.body_overflow_before
   }
 }
 </script>
@@ -74,30 +51,12 @@ export default {
 <style lang="scss">
 @import '../conf';
 
-.tcs-location {
-  margin-bottom: 10px;
-  float: right;
-  span {
-    display: inline-block;
-    padding-top: 4px;
-    vertical-align: top;
-    font-weight: 500;
-  }
-}
-
 .tcs-md {
   p {
     margin: 0 0 8px;
   }
 }
 
-.tcs-aside {
-  font-size: 22px;
-  margin-bottom: 10px;
-  color: $hightlight;
-  min-height: 28px;
-}
-
 h3 {
   margin-top: 12px;
   margin-bottom: 4px;
diff --git a/src/components/enquiry.vue b/src/components/enquiry.vue
new file mode 100644
index 00000000..4098f7f6
--- /dev/null
+++ b/src/components/enquiry.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <div class="tcs-submitted" v-if="submitted" v-html="$root.get_text('enquiry_submitted_thanks', {}, true)"></div>
+    <div v-else>
+      <p class="tcs">
+        {{ $root.get_text('contractor_enquiry_message', {contractor_name: contractor.name}) }}
+      </p>
+      <form class="tcs" @submit.prevent="submit">
+        <div v-for="field in visible_fields">
+          <input_ :field="field"></input_>
+        </div>
+        <div v-for="field in attribute_fields">
+          <input_ :field="field" prefix="attributes"></input_>
+        </div>
+        <div class="tcs-field tcs-submit">
+          <button type="submit">
+            {{ $root.config.submit_enquiry }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+var input = require('./input')
+
+export default {
+  name: 'enquiry',
+  props: ['contractor'],
+  components: {
+    'input_': input
+  },
+  computed: {
+    visible_fields: function () {
+      return this.$root.enquiry_form_info.visible || []
+    },
+    attribute_fields: function () {
+      return this.$root.enquiry_form_info.attributes || []
+    }
+  },
+  data: () => ({
+    submitted: false
+  }),
+  methods: {
+    submit: function () {
+      this.$set(this.$root.enquiry_data, 'contractor', this.contractor.id)
+      this.$root.submit_enquiry(this.submission_complete)
+    },
+    submission_complete: function () {
+      this.submitted = true
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+@import '../conf';
+
+form.tcs {
+  margin: auto;
+  max-width: 450px;
+}
+
+p.tcs {
+  margin: 0 0 10px;
+}
+
+.tcs-submitted {
+  text-align: center;
+  font-size: 20px;
+  padding: 30px 40px;
+}
+
+.tcs-submit {
+  text-align: right;
+  button {
+    font-size: 17px;
+    padding: 6px 12px;
+    border: none;
+    border-radius: 4px;
+
+    background-color: $button-colour;
+    color: white;
+    transition: all .3s ease;
+    outline: none;
+    cursor: pointer;
+    &:hover {
+      background-color: darken($button-colour, 20%);
+    }
+  }
+}
+</style>
diff --git a/src/components/input.vue b/src/components/input.vue
new file mode 100644
index 00000000..79281269
--- /dev/null
+++ b/src/components/input.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="tcs-field">
+    <textarea v-if="is_textarea"
+              :name="name"
+              :placeholder="field.label"
+              :required="field.required"
+              :maxlength="field.max_length || 255"
+              :value="value"
+              @input="changed"
+              rows="5">
+    </textarea>
+    <input v-else
+           :type="field.type"
+           :name="name"
+           :placeholder="field.label"
+           :required="field.required"
+           :maxlength="field.max_length || 255"
+           :value="value"
+           @input="changed">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'input',
+  props: {
+    field: Object,
+    prefix: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    is_textarea: function () {
+      // TODO return this.field.type === 'text' && this.field.max_length > 500
+      return this.field.type === 'text' && this.prefix === 'attributes'
+    },
+    name: function () {
+      return this.prefix + '.' + this.field.field
+    },
+    value: function () {
+      if (this.prefix === '') {
+        return this.$root.enquiry_data[this.field.field] || ''
+      } else {
+        return (this.$root.enquiry_data[this.prefix] || {})[this.field.field] || ''
+      }
+    }
+  },
+  methods: {
+    changed: function (event) {
+      if (this.prefix === '') {
+        this.$set(this.$root.enquiry_data, this.field.field, event.target.value)
+      } else {
+        var obj = this.$root.enquiry_data[this.prefix] || {}
+        obj[this.field.field] = event.target.value
+        this.$set(this.$root.enquiry_data, this.prefix, obj)
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+@import '../conf';
+
+$border-colour: #66afe9;
+.tcs-field {
+  padding: 8px 0;
+  width: 100%;
+  input, textarea {
+    font-size: 16px;
+    width: calc(100% - 26px);
+    padding: 10px 12px;
+    border-radius: 5px;
+    border: 1px solid #aaa;
+    font-family: inherit;
+    outline: none;
+    &:focus {
+      border-color: $border-colour;
+      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px lighten($border-colour, 20%);
+    }
+  }
+}
+</style>
diff --git a/src/components/modal.vue b/src/components/modal.vue
index a57546d8..a65419f0 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -19,12 +19,34 @@
 
         <div class="tcs-body">
           <div class="tcs-content">
-            <con-details :contractor="contractor"></con-details>
+            <div class="tcs-location">
+              <!--
+              this is the svg for map icon straight from
+              https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/map-marker.svg
+              -->
+              <svg class="tcs-svg" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+                <path d="M1152 640q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm256 0q0 109-33
+                  179l-364 774q-16 33-47.5 52t-67.5 19-67.5-19-46.5-52l-365-774q-33-70-33-179 0-212 150-362t362-150
+                  362 150 150 362z"/>
+              </svg>
+              <span>{{ contractor.town }}, {{ contractor.country }}</span>
+            </div>
+
+            <div class="tcs-aside tcs-md">{{ contractor.tag_line }}</div>
+
+            <div class="tcs-scroll">
+              <enquiry v-if="show_enquiry" :contractor="contractor"></enquiry>
+              <con-details v-else :contractor="contractor"></con-details>
+            </div>
           </div>
           <div class="tcs-extra">
             <img :src="contractor.photo" :alt="contractor.name">
-            <!--<button>Contact {{ contractor.name }}</button>-->
-            <p v-html="contact_html"></p>
+            <button v-if="show_enquiry" @click="switch_show">
+              {{ $root.get_text('contractor_details_button', {contractor_name: contractor.name}) }}
+            </button>
+            <button v-else @click="switch_show">
+              {{ $root.get_text('contractor_enquiry_button', {contractor_name: contractor.name}) }}
+            </button>
           </div>
         </div>
 
@@ -38,17 +60,25 @@
 
 <script>
 var con_details = require('./con-details')
+var enquiry = require('./enquiry')
 
 export default {
   name: 'tcs-modal',
   methods: {
     close: function () {
       this.$router.push({name: 'index'})
+    },
+    switch_show: function () {
+      this.show_enquiry = !this.show_enquiry
     }
   },
   components: {
-    'con-details': con_details
+    'con-details': con_details,
+    'enquiry': enquiry,
   },
+  data: () => ({
+    show_enquiry: false
+  }),
   computed: {
     contractor: function () {
       for (var contractor of this.$root.contractors) {
@@ -57,13 +87,10 @@ export default {
           return contractor
         }
       }
-    },
-    contact_html: function () {
-      let raw = this.$root.config.contact_html
-      return raw.replace('{name}', this.contractor.name).replace('{contact_link}', this.$root.config.contact_link)
     }
   },
   created: function () {
+    this.$root.get_enquiry()
     // TODO could do something less ugly here like hide the scroll bar at all times
     this.body_overflow_before = document.body.style.overflow
     document.body.style.overflow = 'hidden'
@@ -98,6 +125,24 @@ export default {
   transition: all .3s ease;
 }
 
+.tcs-location {
+  margin-bottom: 10px;
+  float: right;
+  span {
+    display: inline-block;
+    padding-top: 4px;
+    vertical-align: top;
+    font-weight: 500;
+  }
+}
+
+.tcs-aside {
+  font-size: 22px;
+  margin-bottom: 10px;
+  color: $hightlight;
+  min-height: 28px;
+}
+
 svg.tcs-svg {
   width: $svg-size;
   height: $svg-size;
@@ -133,8 +178,6 @@ svg.tcs-svg {
 .tcs-body {
   display: flex;
   justify-content: space-between;
-  max-height: calc(94vh - 130px);
-  overflow-y: auto;
 }
 
 .tcs-content {
@@ -142,12 +185,17 @@ svg.tcs-svg {
   padding-right: 10px;
   color: #444;
   width: calc(100% - 200px);
+  margin-right: 5px;
+  .tcs-scroll {
+    max-height: calc(94vh - 180px);
+    overflow-y: auto;
+  }
 }
 
 .tcs-extra {
   text-align: center;
+  width: $extra-width;
   img {
-    width: $extra-width;
     height: $extra-width;
     border-radius: 4px;
   }
@@ -162,16 +210,11 @@ svg.tcs-svg {
     border: none;
     transition: all .3s ease;
     outline: none;
+    cursor: pointer;
     &:hover {
       background-color: darken($button-colour, 20%);
     }
   }
-  p {
-    max-width: $extra-width;
-  }
-  a {
-    color: $hightlight;
-  }
 }
 
 // auto applied:
diff --git a/src/conf.scss b/src/conf.scss
index dc3f6c51..2ee5d2b3 100644
--- a/src/conf.scss
+++ b/src/conf.scss
@@ -3,10 +3,10 @@ $border-radius: 3px;
 // model background colour
 $back-colour: 35;
 // highlight sections of modals
-$hightlight: #1f2e50;
+$hightlight: #016997;
 // svgs on modals
 $svg-size: 22px;
 // section on right (with image) on modals
 $extra-width: 200px;
 // contact button on modals
-$button-colour: #5cb85c;
+$button-colour: $hightlight;
diff --git a/src/main.js b/src/main.js
index 5f48ae86..d9bb5d5e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,7 @@ import VueRouter from 'vue-router'
 import app from './app'
 import grid from './components/grid'
 import modal from './components/modal'
+import {to_markdown} from './utils'
 
 let dsn = process.env.NODE_ENV === 'production' && 'https://e8143a1422274f0bbf312ed8792f4e86@sentry.io/128441'
 Raven.config(dsn, {release: process.env.RELEASE}).addPlugin(RavenVue, Vue).install()
@@ -29,6 +30,15 @@ const ConfiguredVueRouter = config => new VueRouter({
   ]
 })
 
+const STRINGS = {
+  skills_label: 'Skills',
+  contractor_enquiry_message: 'Please enter your details below to enquire about tutoring with {contractor_name}.',
+  contractor_enquiry_button: 'Contact {contractor_name}',
+  contractor_details_button: 'Show Profile',
+  submit_enquiry: 'Submit Enquiry',
+  enquiry_submitted_thanks: 'Enquiry submitted, thank you.\n\nYou can now close this window.'
+}
+
 module.exports = function (public_key, config) {
   config = config || {}
   let error = null
@@ -52,16 +62,14 @@ module.exports = function (public_key, config) {
     config.element = '#socket'
   }
 
-  if (config.contact_html === undefined) {
-    config.contact_html = 'To request tutoring from {name} please <a href="{contact_link}">get in touch</a> with us.'
-  }
-
-  if (config.contact_link === undefined) {
-    config.contact_link = '/contact'
+  if (config.console === undefined) {
+    config.console = console
   }
 
-  if (config.skills_label === undefined) {
-    config.skills_label = 'Skills'
+  for (let k of Object.keys(STRINGS)) {
+    if (config[k] === undefined) {
+      config[k] = STRINGS[k]
+    }
   }
 
   return new Vue({
@@ -74,6 +82,8 @@ module.exports = function (public_key, config) {
       config: config,
       error: null,
       public_key: public_key,
+      enquiry_form_info: null,
+      enquiry_data: {},
     },
     components: {
       app
@@ -82,7 +92,7 @@ module.exports = function (public_key, config) {
       // get_data is called by components, eg. grid
       handle_error: function (error_message) {
         this.error = error_message || 'unknown'
-        console.error(this.error)
+        config.console.error(this.error)
         Raven.captureException(new Error(this.error))
       },
       get_list: function () {
@@ -98,7 +108,7 @@ module.exports = function (public_key, config) {
           let contractors
           try {
             if (xhr.status !== 200) {
-              throw new Error(`bad response ${xhr.status}`)
+              throw new Error(`bad response ${xhr.status} at "${url}"`)
             } else {
               contractors = JSON.parse(xhr.responseText)
             }
@@ -130,14 +140,60 @@ response text:   "${xhr.responseText}"`)
         xhr.open('GET', url)
         xhr.onload = () => {
           if (xhr.status !== 200) {
-            throw new Error(`bad response ${xhr.status}`)
+            throw new Error(`bad response ${xhr.status} at "${url}"`)
           } else {
             let con = JSON.parse(xhr.responseText)
             Vue.set(this.contractors_extra, link, con)
           }
         }
         xhr.send()
-      }
+      },
+      get_enquiry: function () {
+        if (this.enquiry_form_info !== null) {
+          return
+        }
+        let xhr = new window.XMLHttpRequest()
+        let url = `${config.api_root}/${public_key}/enquiry`
+        xhr.open('GET', url)
+        xhr.onload = () => {
+          if (xhr.status !== 200) {
+            throw new Error(`bad response ${xhr.status} at "${url}"`)
+          } else {
+            this.enquiry_form_info = JSON.parse(xhr.responseText)
+          }
+        }
+        xhr.send()
+      },
+      get_text: function (name, replacements, is_markdown) {
+        let s = this.config[name]
+        for (let [k, v] of Object.entries(replacements || {})) {
+          s = s.replace('{' + k + '}', v)
+        }
+        if (is_markdown === true) {
+          return to_markdown(s)
+        } else {
+          return s
+        }
+      },
+      submit_enquiry: function (callback) {
+        let data = JSON.stringify(this.enquiry_data)
+        let xhr = new window.XMLHttpRequest()
+        let url = `${config.api_root}/${public_key}/enquiry`
+        xhr.open('POST', url)
+        xhr.onload = () => {
+          if (xhr.status !== 201) {
+            this.handle_error(`\
+Connection error
+requested url:   "${url}"
+response status: ${xhr.status}
+response text:   "${xhr.responseText}"`)
+          } else {
+            this.enquiry_data = {}
+            callback()
+          }
+        }
+        xhr.send(data)
+      },
     }
   })
 }
diff --git a/src/utils.js b/src/utils.js
index 9626548b..c88939f4 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -6,10 +6,11 @@ marked.setOptions({
   smartLists: true,
 })
 
-export function to_markdown (t) {
+function to_markdown (t) {
   if (t === null || t === undefined) {
     return ''
   } else {
     return marked(t)
   }
 }
+export { to_markdown }
diff --git a/test/unit/index.js b/test/unit/index.js
index 3584c4c5..2127fb17 100644
--- a/test/unit/index.js
+++ b/test/unit/index.js
@@ -2,7 +2,7 @@
 /* eslint-disable no-extend-native */
 Function.prototype.bind = require('function-bind')
 
-// require all test files (files that ends with .spec.js)
+// const testsContext = require.context('./specs', true, /main\.js$/)
 const testsContext = require.context('./specs', true)
 testsContext.keys().forEach(testsContext)
 
diff --git a/test/unit/specs/_shared.js b/test/unit/specs/_shared.js
new file mode 100644
index 00000000..8169ccd8
--- /dev/null
+++ b/test/unit/specs/_shared.js
@@ -0,0 +1,73 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import modal from 'src/components/modal'
+
+const dft_response = [200, {'Content-Type': 'application/json'}, '[{"name": "Foobars", "link": "foobar"}]']
+
+class TestConsole {
+  log_ = []
+  warning_ = []
+  error_ = []
+
+  log () {
+    this.log_.push(Array.from(arguments).join())
+  }
+
+  warning () {
+    this.warning_.push(Array.from(arguments).join())
+  }
+
+  error () {
+    this.error_.push(Array.from(arguments).join())
+  }
+}
+
+const enquiry_options = {
+  visible: [
+    {field: 'first_field', type: 'text', label: 'Foobar', max_length: 255}
+  ],
+  attributes: [
+    {field: 'custom_field', type: 'text', label: 'Custom Field', max_length: 2047}
+  ]
+}
+
+const vm_data = {
+  contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
+  config: {},
+  contractors_extra: {'fred-bloggs': {'extra_attributes': [{'name': 'Bio', 'value': 'I am great'}]}},
+  enquiry_form_info: enquiry_options,
+  enquiry_data: {},
+  method_calls: {},
+}
+
+const dft_router = new VueRouter({routes: [
+  {path: '/', name: 'index', component: {render: h => h('div', {attrs: {'class': 'index'}})}},
+  {path: '/:link', name: 'modal', component: modal},
+]})
+
+const generate_vm = (router, vm_data_) => {
+  Vue.use(VueRouter)
+  return new Vue({
+    el: document.createElement('div'),
+    router: router || dft_router,
+    render: h => h('router-view'),
+    data: vm_data_ || vm_data,
+    methods: {
+      __record_call: function (method_name) {
+        if (this.hasOwnProperty('method_calls')) {
+          this.method_calls[method_name] = (this.method_calls[method_name] || 0) + 1
+        }
+      },
+      get_details: function () { this.__record_call('get_details') },
+      get_enquiry: function () { this.__record_call('get_enquiry') },
+      get_text: function (name, replacements) { this.__record_call('get_text') },
+      submit_enquiry: function (callback) {
+        this.__record_call('submit_enquiry')
+        this.enquiry_data = {}
+        callback()
+      },
+    }
+  })
+}
+
+export {dft_response, TestConsole, enquiry_options, vm_data, generate_vm}
diff --git a/test/unit/specs/modal.js b/test/unit/specs/con-details.js
similarity index 50%
rename from test/unit/specs/modal.js
rename to test/unit/specs/con-details.js
index d1b2b444..2656278e 100644
--- a/test/unit/specs/modal.js
+++ b/test/unit/specs/con-details.js
@@ -1,55 +1,12 @@
 import Vue from 'vue'
-import VueRouter from 'vue-router'
-import modal from 'src/components/modal'
-
-const vm_data = {
-  contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
-  config: {contact_html: 'name is: {name}'},
-  contractors_extra: {'fred-bloggs': {'extra_attributes': [{'name': 'Bio', 'value': 'I am great'}]}},
-}
-
-describe('modal.vue', () => {
-  it('should render contractor details', done => {
-    Vue.use(VueRouter)
-    const router = new VueRouter({routes: [
-        {path: '/', name: 'index', component: {render: h => h('div')}},
-        {path: '/:link', name: 'modal', component: modal},
-    ]})
-    const vm = new Vue({
-      el: document.createElement('div'),
-      router: router,
-      render: h => h('router-view'),
-      data: vm_data,
-      methods: {get_details: function (url, link) {}}
-    })
-    router.push({name: 'modal', params: {link: 'fred-bloggs'}})
-    Vue.nextTick(() => {
-      expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
-      expect(vm.$el.querySelector('.tcs-aside').textContent).to.equal('hello\n')
-      expect(vm.$el.querySelector('.tcs-attr h3').textContent).to.equal('Bio')
-      expect(vm.$el.querySelector('.tcs-attr p').textContent).to.equal('I am great')
-      done()
-    })
-  })
-})
+import {generate_vm} from './_shared'
 
 describe('modal.vue', () => {
-  it('should closes on tcs-modal-mask', done => {
-    Vue.use(VueRouter)
-    const router = new VueRouter({routes: [
-        {path: '/', name: 'index', component: {render: h => h('div', {attrs: {'class': 'index'}})}},
-        {path: '/:link', name: 'modal', component: modal},
-    ]})
-    const vm = new Vue({
-      el: document.createElement('div'),
-      router: router,
-      render: h => h('router-view'),
-      data: vm_data,
-      methods: {get_details: function (url, link) {}}
-    })
-    router.push({name: 'modal', params: {link: 'fred-bloggs'}})
+  it('should close on tcs-modal-mask', done => {
+    const vm = generate_vm()
+    vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
     Vue.nextTick(() => {
-      expect(vm.$el.attributes['class'].value).to.equal('tcs-modal-mask')
+      expect(vm.$el.attributes['class'].value).to.contain('tcs-modal-mask')
       // this is clicking the background
       vm.$el.click()
       Vue.nextTick(() => {
@@ -60,16 +17,25 @@ describe('modal.vue', () => {
   })
 })
 
-describe('modal.vue', () => {
+describe('con-details.vue', () => {
+  it('should render contractor details', done => {
+    const vm = generate_vm()
+    vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
+    Vue.nextTick(() => {
+      expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
+      expect(vm.$el.querySelector('.tcs-aside').textContent).to.equal('hello')
+      expect(vm.$el.querySelector('.tcs-attr h3').textContent).to.equal('Bio')
+      expect(vm.$el.querySelector('.tcs-attr p').textContent).to.equal('I am great')
+      done()
+    })
+  })
+})
+
+describe('con-details.vue', () => {
   it('should render only five qual levels', done => {
-    Vue.use(VueRouter)
-    const router = new VueRouter({routes: [
-        {path: '/', name: 'index', component: {render: h => h('div', {attrs: {'class': 'index'}})}},
-        {path: '/:link', name: 'modal', component: modal},
-    ]})
     const _vm_data = {
       contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
-      config: {contact_html: 'name is: {name}'},
+      config: {},
       contractors_extra: {
         'fred-bloggs': {
           extra_attributes: [{'name': 'Bio', 'value': 'I am great'}],
@@ -89,14 +55,8 @@ describe('modal.vue', () => {
       }
     }
 
-    const vm = new Vue({
-      el: document.createElement('div'),
-      router: router,
-      render: h => h('router-view'),
-      data: _vm_data,
-      methods: {get_details: function (url, link) {}}
-    })
-    router.push({name: 'modal', params: {link: 'fred-bloggs'}})
+    const vm = generate_vm(null, _vm_data)
+    vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
     Vue.nextTick(() => {
       expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
       expect(vm.$el.querySelector('.tcs-skills').textContent).to.include('GCSE')
@@ -112,16 +72,11 @@ describe('modal.vue', () => {
   })
 })
 
-describe('modal.vue', () => {
+describe('con-details.vue', () => {
   it('should render markdown', done => {
-    Vue.use(VueRouter)
-    const router = new VueRouter({routes: [
-        {path: '/', name: 'index', component: {render: h => h('div', {attrs: {'class': 'index'}})}},
-        {path: '/:link', name: 'modal', component: modal},
-    ]})
     const _vm_data = {
       contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
-      config: {contact_html: 'name is: {name}'},
+      config: {},
       contractors_extra: {
         'fred-bloggs': {
           extra_attributes: [{'name': 'Bio', 'value': 'I am **great**', 'type': 'text_extended'}],
@@ -129,14 +84,8 @@ describe('modal.vue', () => {
       }
     }
 
-    const vm = new Vue({
-      el: document.createElement('div'),
-      router: router,
-      render: h => h('router-view'),
-      data: _vm_data,
-      methods: {get_details: function (url, link) {}}
-    })
-    router.push({name: 'modal', params: {link: 'fred-bloggs'}})
+    const vm = generate_vm(null, _vm_data)
+    vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
     Vue.nextTick(() => {
       expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
       expect(vm.$el.querySelector('.tcs-attr').innerHTML).to.include('I am <strong>great</strong>')
diff --git a/test/unit/specs/enquiry.js b/test/unit/specs/enquiry.js
new file mode 100644
index 00000000..3d1bdaf8
--- /dev/null
+++ b/test/unit/specs/enquiry.js
@@ -0,0 +1,56 @@
+import Vue from 'vue'
+import {generate_vm} from './_shared'
+
+describe('enquiry.vue', () => {
+  it('should render contractor details then form', done => {
+    const vm = generate_vm()
+    vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
+    Vue.nextTick(() => {
+      expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
+      expect(vm.$el.querySelector('.tcs-aside').textContent).to.equal('hello')
+      vm.$el.querySelector('.tcs-extra button').click()
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('input').attributes['placeholder'].value).to.equal('Foobar')
+        expect(vm.$el.querySelector('input').attributes['name'].value).to.equal('.first_field')
+        expect(vm.$el.querySelector('textarea').attributes['placeholder'].value).to.equal('Custom Field')
+        expect(vm.$el.querySelector('textarea').attributes['name'].value).to.equal('attributes.custom_field')
+        done()
+      })
+    })
+  })
+})
+
+describe('enquiry.vue', () => {
+  it('should submit form', done => {
+    const vm = generate_vm()
+    vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
+    Vue.nextTick(() => {
+      expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
+      vm.$el.querySelector('.tcs-extra button').click()
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('input').attributes['placeholder'].value).to.equal('Foobar')
+        expect(vm.$el.querySelector('input').value).to.equal('')
+        expect(vm.enquiry_data).to.deep.equal({})
+        vm.$el.querySelector('input').value = 'the new value'
+        vm.$el.querySelector('input').dispatchEvent(new window.Event('input'))
+
+        vm.$el.querySelector('textarea').value = 'X'
+        vm.$el.querySelector('textarea').dispatchEvent(new window.Event('input'))
+
+        Vue.nextTick(() => {
+          expect(vm.$el.querySelector('input').value).to.equal('the new value')
+          expect(vm.enquiry_data).to.deep.equal({first_field: 'the new value', attributes: {custom_field: 'X'}})
+
+          expect(vm.method_calls['submit_enquiry']).to.equal(undefined)
+          vm.$el.querySelector('form').dispatchEvent(new window.Event('submit'))
+          Vue.nextTick(() => {
+            expect(vm.method_calls['submit_enquiry']).to.equal(1)
+            expect(vm.enquiry_data).to.deep.equal({})
+            done()
+          })
+        })
+      })
+    })
+  })
+})
+
diff --git a/test/unit/specs/grid.js b/test/unit/specs/grid.js
index 9500c40c..5bb43ea6 100644
--- a/test/unit/specs/grid.js
+++ b/test/unit/specs/grid.js
@@ -19,7 +19,6 @@ describe('grid.vue', () => {
         get_list: function () {
           this.contractors.push({name: 'Fred Bloggs', link: 'fred-bloggs', photo: 'http://path/to/img.jpg'})
         },
-        to_markdown: (t) => t
       }
     })
     expect(vm.$el.querySelector('h3').textContent).to.equal('Fred Bloggs')
diff --git a/test/unit/specs/main.js b/test/unit/specs/main.js
index ecc51029..65448607 100644
--- a/test/unit/specs/main.js
+++ b/test/unit/specs/main.js
@@ -1,6 +1,5 @@
 import socket from 'src/main'
-
-const dft_response = [200, {'Content-Type': 'application/json'}, '[{"name": "Foobars", "link": "foobar"}]']
+import {dft_response, TestConsole, enquiry_options} from './_shared'
 
 describe('main.js', done => {
   let server
@@ -22,9 +21,9 @@ describe('main.js', done => {
     const vm = socket('public_key', {
       element: '#foobar'
     })
-
+    vm.enquiry_form_info = 'foobar'  // prevent get_enquiry making a GET request
     expect(vm.$el.parentNode.attributes['id'].value).to.equal('outer')
-    // no time for get_data to be called so wont fail
+    // no time for get_data to be called so should be empty
     expect(vm.contractors).to.be.empty
 
     setTimeout(() => {
@@ -40,6 +39,7 @@ describe('main.js', () => {
     server = sinon.fakeServer.create()
     server.autoRespond = true
     server.respondWith('/public_key/contractors', dft_response)
+    server.respondWith('/public_key/enquiry', dft_response)  // to prevent errors with get_enquiry
   })
   after(() => { server.restore() })
 
@@ -64,6 +64,7 @@ describe('main.js', () => {
     server = sinon.fakeServer.create()
     server.autoRespond = true
     server.respondWith('/public_key/contractors', [404, {}, 'badness'])
+    server.respondWith('/public_key/enquiry', dft_response)  // to prevent errors with get_enquiry
   })
   after(() => { server.restore() })
 
@@ -72,14 +73,18 @@ describe('main.js', () => {
     el.setAttribute('id', 'socket')
     document.body.appendChild(el)
 
-    const vm = socket('public_key')
+    let test_console = new TestConsole()
+    const vm = socket('public_key', {console: test_console, v: 404})
 
     setTimeout(() => {
-      !expect(vm.error).to.not.equal(null)
+      expect(vm.error).to.not.equal(null)
       expect(vm.error).to.contain('Error: bad response 404')
       expect(vm.error).to.contain('response status: 404')
       expect(vm.error).to.contain('response text:\nbadness')
       expect(vm.error).to.not.contain('Connection error')
+      expect(test_console.log_).to.have.lengthOf(0)
+      expect(test_console.warning_).to.have.lengthOf(0)
+      expect(test_console.error_).to.have.lengthOf(1)
       done()
     }, 50)
   })
@@ -91,12 +96,96 @@ describe('main.js', () => {
     el.setAttribute('id', 'socket')
     document.body.appendChild(el)
 
-    const vm = socket('the-public-key', {api_root: 'http://localhost:12345678'})
+    let test_console = new TestConsole()
+    const vm = socket('the-public-key', {api_root: 'http://localhost:12345678', console: test_console})
 
     setTimeout(() => {
       expect(vm.error).to.contain('Connection error')
       expect(vm.error).to.contain('response status: 0')
+      expect(test_console.error_).to.have.lengthOf(1)
       done()
     }, 50)
   })
 })
+
+describe('main.js', () => {
+  let server
+  before(() => {
+    server = sinon.fakeServer.create()
+    server.autoRespond = true
+    server.respondWith(dft_response)
+  })
+  after(() => { server.restore() })
+
+  it('should convert text', () => {
+    let el = document.createElement('div')
+    el.setAttribute('id', 'socket')
+    document.body.appendChild(el)
+
+    const vm = socket('public-key', {contractor_enquiry_button: 'Speak to {contractor_name}'})
+    vm.enquiry_form_info = 'x'  // prevent get_enquiry making a GET request
+    let text = vm.get_text('skills_label')
+    expect(text).to.equal('Skills')
+    text = vm.get_text('contractor_enquiry_button', {'contractor_name': 'foobar'})
+    expect(text).to.equal('Speak to foobar')
+  })
+})
+
+describe('main.js', () => {
+  let server
+  before(() => {
+    server = sinon.fakeServer.create()
+    server.autoRespond = true
+    server.respondWith('/public-key/contractors', dft_response)
+    server.respondWith('/public-key/enquiry', [200, {'Content-Type': 'application/json'}, '{"response": "ok"}'])
+  })
+  after(() => { server.restore() })
+
+  it('should get enquiry info', done => {
+    let el = document.createElement('div')
+    el.setAttribute('id', 'socket')
+    document.body.appendChild(el)
+
+    const vm = socket('public-key')
+    vm.get_enquiry()
+
+    setTimeout(() => {
+      expect(vm.enquiry_form_info).to.deep.equal({response: 'ok'})
+      done()
+    }, 50)
+  })
+})
+
+describe('main.js', () => {
+  let server
+  before(() => {
+    server = sinon.fakeServer.create()
+    server.autoRespond = true
+    server.respondWith('/public-key/contractors', dft_response)
+    server.respondWith('/public-key/enquiry',
+        [200, {'Content-Type': 'application/json'}, JSON.stringify(enquiry_options)])
+    server.respondWith('POST', '/public-key/enquiry',
+        [201, {'Content-Type': 'application/json'}, '{"response": "ok"}'])
+  })
+  after(() => { server.restore() })
+
+  it('should post enquiry data', done => {
+    let el = document.createElement('div')
+    el.setAttribute('id', 'socket')
+    document.body.appendChild(el)
+
+    const vm = socket('public-key')
+    vm.get_enquiry()
+
+    setTimeout(() => {
+      vm.$set(vm.enquiry_data, 'first_field', 'foobar')
+      expect(vm.enquiry_data).to.deep.equal({first_field: 'foobar'})
+      let callback = () => {
+        expect(vm.enquiry_data).to.deep.equal({})
+        done()
+      }
+      vm.submit_enquiry(callback)
+    }, 50)
+  })
+})
+