Floating Label Update

package-lock.json

         "vue": "^2.5.17"
       }
     },
+    "vue-float-label": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/vue-float-label/-/vue-float-label-1.6.1.tgz",
+      "integrity": "sha1-I1HnGyXyGwbUNWOwRveNlRKgjGY="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

package.json

     "vue-currency-input": "^1.22.3",
     "vue-disable-autocomplete": "0.0.4",
     "vue-eva-icons": "^1.1.1",
+    "vue-float-label": "^1.6.1",
     "vue-js-modal": "^1.3.33",
     "vue-json-excel": "^0.2.98",
     "vue-owl-carousel": "^2.0.3",

public/css/newStyle.css

 
 /* @import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); */
 
+.vfl-label {
+  text-transform: uppercase;
+}
+
+.vfl-label-on-input {
+  top: -1.5em !important;
+}
+
+.vfl-label-on-focus {
+  color: rgb(27, 117, 187) !important;
+}
+
 .uniSelect {
   border-color: rgb(27, 117, 187);
   border-width: 2px;

src/components/property/commercial/createProperty/commercialCreateNew.vue

         <div class="row">
           <div class="col">
             <label v-if="!salesType" class="uniSelectLabel" for="saleType">Sale Type</label>
-            <select class="form-control uniSelect mb-3" name="saleType" v-model="salesType">
-              <option value="Sale">To Sell</option>
-              <option value="Rental">To Rent</option>
-            </select>
+            <float-label label="Sale Type">
+              <select class="form-control uniSelect mb-3" name="saleType" v-model="salesType">
+                <option value="Sale">To Sell</option>
+                <option value="Rental">To Rent</option>
+              </select>
+            </float-label>
           </div>
         </div>
-        <div class="row">
+        <div class="row mt-2">
           <div class="col-md-6">
             <div v-if="!property.propertyName">
               <label for="propertyName" class="uniSelectLabel">PROPERTY NAME</label>
             </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="propertyName"
-              v-model="property.propertyName"
-            />
+            <float-label label="PROPERTY NAME">
+              <input
+                class="form-control uniInput"
+                type="text"
+                name="propertyName"
+                v-model="property.propertyName"
+              />
+            </float-label>
           </div>
           <div class="col-md-6">
             <div v-if="!property.propertyRef">
               <label for="propertyName" class="uniSelectLabel">PROPERTY REFERENCE</label>
             </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="propertyRef"
-              v-model="property.propertyRef"
-            />
+            <float-label label="PROPERTY REFERENCE">
+              <input
+                class="form-control uniInput"
+                type="text"
+                name="propertyRef"
+                v-model="property.propertyRef"
+              />
+            </float-label>
           </div>
         </div>
         <div class="row my-5">
             <div v-if="!property.unit">
               <label for="unit" class="uniSelectLabel">UNIT</label>
             </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="unit"
-              id="unit"
-              v-model="property.unit"
-            />
+            <float-label label="unit">
+              <input
+                class="form-control uniInput"
+                type="text"
+                name="unit"
+                id="unit"
+                v-model="property.unit"
+              />
+            </float-label>
           </div>
         </div>
         <div class="row my-5">
                     >{{ salesType }} Price</label
                   >
                 </div>
-                <currency-input
-                  onClick="this.setSelectionRange(0, this.value.length)"
-                  name="price"
-                  :value="value"
-                  @input="value = $event"
-                  v-model="property.price"
-                  id="price"
-                  class="form-control uniInput"
-                />
+                <float-label label="price">
+                  <currency-input
+                    onClick="this.setSelectionRange(0, this.value.length)"
+                    name="price"
+                    :value="value"
+                    @input="value = $event"
+                    v-model="property.price"
+                    id="price"
+                    class="form-control uniInput"
+                  />
+                </float-label>
               </div>
               <div v-if="salesType === 'Rental'" class="col-md-6">
                 <select
         </div>
         <div class="form-group row">
           <div class="col-md-12">
-            <label class="uniSelectLabel">Virtual Tour (URL)</label>
+            <label v-if="!property.virtualTour" class="uniSelectLabel">Virtual Tour (URL)</label>
             <div class="input-group-prepend">
-              <input
-                class="form-control uniInput"
-                type="link"
-                name="vtlink"
-                id="vtlink"
-                v-model="property.virtualTour"
-              />
+              <float-label label="Virtual Tour (URL)" style="width:100%">
+                <input
+                  class="form-control uniInput"
+                  type="link"
+                  name="vtlink"
+                  id="vtlink"
+                  v-model="property.virtualTour"
+                />
+              </float-label>
             </div>
           </div>
         </div>
         <div class="row">
-          <div class="col-md-12">
-            <label class="uniSelectLabel">Video (URL)</label>
+          <div class="col-md-12 mt-2">
+            <label v-if="!property.video" class="uniSelectLabel">Video (URL)</label>
             <div class="input-group-prepend">
-              <input
-                class="form-control uniInput"
-                type="link"
-                name="vlink"
-                id="vlink"
-                v-model="property.video"
-              />
+              <float-label label="video " style="width:100%">
+                <input
+                  class="form-control uniInput"
+                  type="link"
+                  name="vlink"
+                  id="vlink"
+                  v-model="property.video"
+                />
+              </float-label>
             </div>
           </div>
         </div>

src/components/property/propertyUserField.vue

 <template>
   <div class="row">
-    <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="i">
+    <div class="col-md-4 mb-3 mt-2" v-for="(currentField, i) in fields" :key="i">
       <div class="input-group-prepend">
         <!-- <span class="input-group-text" style="color: #60CBEB">
           <b>{{ GetFirstLetter(currentField.name) }}</b>
         </span> -->
         <div v-if="!setFields[i] && currentField.type !== 'yesno'">
-          <label class="uniSelectLabel">{{ currentField.name }}</label>
+          <label class="uniSelectLabel" style="margin-top:-10px">{{ currentField.name }}</label>
         </div>
-        <input
-          v-if="currentField.type === 'number'"
-          class="form-control uniInput"
-          type="number"
-          name="currentField.name"
-          id="currentField.id"
-          v-model="setFields[i]"
-          @change="UpdateSetFields(currentField, i)"
-        />
+        <float-label :label="currentField.name" style="width:100%;top:-1em !important;">
+          <input
+            v-if="currentField.type === 'number'"
+            class="form-control uniInput"
+            type="number"
+            name="currentField.name"
+            id="currentField.id"
+            v-model="setFields[i]"
+            @change="UpdateSetFields(currentField, i)"
+          />
 
-        <input
-          v-if="currentField.type === 'text'"
-          class="form-control uniInput"
-          type="text"
-          name="currentField.name"
-          id="currentField.id"
-          v-model="setFields[i]"
-          @change="UpdateSetFields(currentField, i)"
-        />
+          <input
+            v-if="currentField.type === 'text'"
+            class="form-control uniInput"
+            type="text"
+            name="currentField.name"
+            id="currentField.id"
+            v-model="setFields[i]"
+            @change="UpdateSetFields(currentField, i)"
+          />
+        </float-label>
       </div>
     </div>
 

src/components/property/residential/createProperty/residentialCreateNew.vue

         <div class="row">
           <div class="col">
             <label v-if="!salesType" class="uniSelectLabel" for="saleType">Sale Type</label>
-            <select class="form-control uniSelect mb-3" name="saleType" v-model="salesType">
-              <option value="Sale">To Sell</option>
-              <option value="Rental">To Rent</option>
-            </select>
+            <float-label label="Sale Type">
+              <select class="form-control uniSelect mb-3" name="saleType" v-model="salesType">
+                <option value="Sale">To Sell</option>
+                <option value="Rental">To Rent</option>
+              </select>
+            </float-label>
           </div>
         </div>
-        <div class="row">
+        <div class="row mt-2">
           <div class="col-md-6">
             <div v-if="!property.propertyName">
               <label for="propertyName" class="uniSelectLabel">PROPERTY NAME</label>
             </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="propertyName"
-              v-model="property.propertyName"
-            />
+            <float-label label="PROPERTY NAME">
+              <input
+                class="form-control uniInput"
+                type="text"
+                name="propertyName"
+                v-model="property.propertyName"
+              />
+            </float-label>
           </div>
           <div class="col-md-6">
             <div v-if="!property.propertyRef">
               <label for="propertyName" class="uniSelectLabel">PROPERTY REFERENCE</label>
             </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="propertyRef"
-              v-model="property.propertyRef"
-            />
+            <float-label label="PROPERTY REFERENCE">
+              <input
+                class="form-control uniInput"
+                type="text"
+                name="propertyRef"
+                v-model="property.propertyRef"
+              />
+            </float-label>
           </div>
         </div>
         <div class="row my-5">
               }}</option>
             </select>
           </div>
-          <div v-if="propertyType === 'Commercial'" class="col-md-2">
-            <div v-if="!property.unit">
-              <label for="unit" class="uniSelectLabel">UNIT</label>
-            </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="unit"
-              id="unit"
-              v-model="property.unit"
-            />
-          </div>
         </div>
         <div class="row my-5">
           <div class="col-md-6">
                     >{{ salesType }} Price</label
                   >
                 </div>
-                <currency-input
-                  onClick="this.setSelectionRange(0, this.value.length)"
-                  name="price"
-                  :value="value"
-                  @input="value = $event"
-                  v-model="property.price"
-                  id="price"
-                  class="form-control uniInput"
-                />
+                <float-label label="Price">
+                  <currency-input
+                    onClick="this.setSelectionRange(0, this.value.length)"
+                    name="price"
+                    :value="value"
+                    @input="value = $event"
+                    v-model="property.price"
+                    id="price"
+                    class="form-control uniInput"
+                  />
+                </float-label>
               </div>
               <div v-if="salesType === 'Rental'" class="col-md-6">
                 <select
           </div>
         </div>
         <div class="form-group row">
-          <div class="col-md-12">
-            <label class="uniSelectLabel">Virtual Tour (URL)</label>
+          <div class="col-md-12 mt-2">
+            <label v-if="!property.virtualTour" class="uniSelectLabel">Virtual Tour (URL)</label>
             <div class="input-group-prepend">
-              <input
-                class="form-control uniInput"
-                type="link"
-                name="vtlink"
-                id="vtlink"
-                v-model="property.virtualTour"
-              />
+              <float-label label="Virtual Tour (URL)" style="width:100%">
+                <input
+                  class="form-control uniInput"
+                  type="link"
+                  name="vtlink"
+                  id="vtlink"
+                  v-model="property.virtualTour"
+                />
+              </float-label>
             </div>
           </div>
         </div>
         <div class="row">
-          <div class="col-md-12">
-            <label class="uniSelectLabel">Video (URL)</label>
+          <div class="col-md-12 mt-2">
+            <label v-if="!property.video" class="uniSelectLabel">Video (URL)</label>
             <div class="input-group-prepend">
-              <input
-                class="form-control uniInput"
-                type="link"
-                name="vlink"
-                id="vlink"
-                v-model="property.video"
-              />
+              <float-label label="Video (URL)" style="width:100%">
+                <input
+                  class="form-control uniInput"
+                  type="link"
+                  name="vlink"
+                  id="vlink"
+                  v-model="property.video"
+                />
+              </float-label>
             </div>
           </div>
         </div>

src/components/timeshare/sell/contentSection.vue

             <div id="sendmessage">Your details has been sent. Thank you!</div>
             <div id="errormessage"></div>
             <div class="form-row">
-              <div class="form-group col-md-6">
+              <div class="form-group col-md-6 mt-2">
                 <div class="input-group">
                   <label v-if="!sellItem.region" class="uniSelectLabel" for="weekInfoRegionSelect"
                     >REGION</label
                   >
-
-                  <select
-                    id="weekInfoRegionSelect"
-                    class="form-control uniSelect"
-                    v-model="sellItem.region"
-                    @change="regionChange()"
-                    style="font-size: 15px"
-                  >
-                    <option v-for="(region, r) in regions" :key="r" :value="region">{{
-                      region.regionName
-                    }}</option>
-                  </select>
+                  <float-label label="REGION" style="width:100%">
+                    <select
+                      id="weekInfoRegionSelect"
+                      class="form-control uniSelect"
+                      v-model="sellItem.region"
+                      @change="regionChange()"
+                      style="font-size: 15px"
+                    >
+                      <option v-for="(region, r) in regions" :key="r" :value="region">{{
+                        region.regionName
+                      }}</option>
+                    </select>
+                  </float-label>
                 </div>
 
                 <!-- <input
                 />-->
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
+              <div class="form-group col-md-6 mt-2">
                 <div class="input-group">
                   <label v-if="!sellItem.resort" class="uniSelectLabel" for="weekInfoResortSelect"
                     >RESORT NAME</label
                   >
-
-                  <select
-                    id="weekInfoResortSelect"
-                    class="form-control uniSelect"
-                    v-model="sellItem.resort"
-                    @change="resortChange()"
-                  >
-                    <option value="Other">Other</option>
-                    <option v-for="(resort, r) in filteredResort" :key="r" :value="resort">{{
-                      resort.resortName
-                    }}</option>
-                  </select>
+                  <float-label label="RESORT NAME" style="width:100%">
+                    <select
+                      id="weekInfoResortSelect"
+                      class="form-control uniSelect"
+                      v-model="sellItem.resort"
+                      @change="resortChange()"
+                    >
+                      <option value="Other">Other</option>
+                      <option v-for="(resort, r) in filteredResort" :key="r" :value="resort">{{
+                        resort.resortName
+                      }}</option>
+                    </select>
+                  </float-label>
                 </div>
                 <!-- <input
                     type="text"
                   v-model="sellItem.otherResortName"
                 />
               </div>
-              <div class="form-group col-md-6">
+              <div class="form-group col-md-6 mt-2">
                 <div v-if="sellItem.otherResort">
                   <label v-if="!sellItem.region" class="uniSelectLabel" for="region">REGION</label>
                 </div>
                   <option v-for="(region, r) in regions" :key="r">{{ region.regionName }}</option>
                 </select>
               </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="number"
-                  class="form-control"
-                  name="unitNumber"
-                  id="unitNumber"
-                  placeholder="UNIT NUMBER"
-                  v-model="sellItem.unitNumber"
-                  data-msg="Please enter unit number"
-                />
+              <div class="form-group col-md-6 mt-2">
+                <float-label>
+                  <input
+                    type="number"
+                    class="form-control"
+                    name="unitNumber"
+                    id="unitNumber"
+                    placeholder="UNIT NUMBER"
+                    v-model="sellItem.unitNumber"
+                    data-msg="Please enter unit number"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="number"
-                  class="form-control"
-                  name="week"
-                  id="week"
-                  placeholder="UNIT / WEEK NUMBER"
-                  v-model="sellItem.module"
-                  data-msg="Please enter week number"
-                />
+              <div class="form-group col-md-6 mt-2">
+                <float-label>
+                  <input
+                    type="number"
+                    class="form-control"
+                    name="week"
+                    id="week"
+                    placeholder="UNIT / WEEK NUMBER"
+                    v-model="sellItem.module"
+                    data-msg="Please enter week number"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
+              <div class="form-group col-md-6 mt-2">
                 <label v-if="!sellItem.season" class="uniSelectLabel" for="region">SEASON</label>
+                <float-label label="SEASON">
+                  <select
+                    class="form-control uniSelect"
+                    name="region"
+                    id="region"
+                    v-model="sellItem.season"
+                  >
+                    <option v-for="(season, r) in seasons" :key="r">{{ season.name }}</option>
+                  </select>
+                </float-label>
 
-                <select
-                  class="form-control uniSelect"
-                  name="region"
-                  id="region"
-                  v-model="sellItem.season"
-                >
-                  <option v-for="(season, r) in seasons" :key="r">{{ season.name }}</option>
-                </select>
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
+              <div class="form-group col-md-6 mt-2">
                 <label v-if="!sellItem.bedrooms" class="uniSelectLabel" for="region"
                   >BEDROOM/S</label
                 >
+                <float-label label="BEDROOM/S">
+                  <select
+                    class="form-control uniSelect"
+                    name="region"
+                    id="region"
+                    v-model="sellItem.bedrooms"
+                  >
+                    <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
+                  </select>
+                </float-label>
 
-                <select
-                  class="form-control uniSelect"
-                  name="region"
-                  id="region"
-                  v-model="sellItem.bedrooms"
-                >
-                  <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
-                </select>
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
+              <div class="form-group col-md-6 mt-2">
                 <label v-if="!sellItem.maxSleep" class="uniSelectLabel" for="region"
                   >SLEEP MAX</label
                 >
+                <float-label label="SLEEP MAX">
+                  <select
+                    class="form-control uniSelect"
+                    name="region"
+                    id="region"
+                    v-model="sellItem.maxSleep"
+                  >
+                    <option v-for="(item, i) in maxSleep" :key="i">{{ item }}</option>
+                  </select>
+                </float-label>
 
-                <select
-                  class="form-control uniSelect"
-                  name="region"
-                  id="region"
-                  v-model="sellItem.maxSleep"
-                >
-                  <option v-for="(item, i) in maxSleep" :key="i">{{ item }}</option>
-                </select>
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="number"
-                  class="form-control"
-                  name="levy"
-                  id="levy"
-                  placeholder="Levy Amount"
-                  v-model="sellItem.levyAmount"
-                  data-msg="Please enter levy amount"
-                />
+              <div class="form-group col-md-6 mt-2">
+                <float-label>
+                  <input
+                    type="number"
+                    class="form-control"
+                    name="levy"
+                    id="levy"
+                    placeholder="Levy Amount"
+                    v-model="sellItem.levyAmount"
+                    data-msg="Please enter levy amount"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
+              <div class="form-group col-md-6 mt-2">
                 <label v-if="!sellItem.weekType" class="uniSelectLabel" for="region"
                   >WEEK TYPE</label
                 >
-                <select
-                  class="form-control uniSelect"
-                  name="region"
-                  id="region"
-                  v-model="sellItem.weekType"
-                >
-                  <option :key="0">Flexi</option>
-                  <option :key="1">Fixed</option>
-                  <option :key="2">Module</option>
-                  <option :key="3">Syndicate</option>
-                </select>
+                <float-label label="WEEK TYPE">
+                  <select
+                    class="form-control uniSelect"
+                    name="region"
+                    id="region"
+                    v-model="sellItem.weekType"
+                  >
+                    <option :key="0">Flexi</option>
+                    <option :key="1">Fixed</option>
+                    <option :key="2">Module</option>
+                    <option :key="3">Syndicate</option>
+                  </select>
+                </float-label>
               </div>
             </div>
           </div>
             <h2>Detailed Individual Information</h2>
           </div>
           <div class="form">
-            <div class="row">
+            <div class="row mb-2">
               <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  name="name"
-                  class="form-control"
-                  id="name"
-                  placeholder="Name"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your name"
-                  v-model="indiv.name"
-                />
+                <float-label>
+                  <input
+                    type="text"
+                    name="name"
+                    class="form-control"
+                    id="name"
+                    placeholder="Name"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your name"
+                    v-model="indiv.name"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
               <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  name="surname"
-                  id="surname"
-                  placeholder="Surname"
-                  data-msg="Please enter your surname"
-                  v-model="indiv.surname"
-                />
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    name="surname"
+                    id="surname"
+                    placeholder="Surname"
+                    data-msg="Please enter your surname"
+                    v-model="indiv.surname"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
             </div>
-            <div class="row">
+            <div class="row mb-2">
               <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  name="idnum"
-                  class="form-control"
-                  id="idnum"
-                  placeholder="ID Number"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your ID number"
-                  v-model="indiv.idNumber"
-                />
+                <float-label>
+                  <input
+                    type="text"
+                    name="idnum"
+                    class="form-control"
+                    id="idnum"
+                    placeholder="ID Number"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your ID number"
+                    v-model="indiv.idNumber"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
               <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  name="company"
-                  id="company"
-                  placeholder="Company Reg Number"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your company reg number"
-                  v-model="indiv.companyRegNumber"
-                />
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    name="company"
+                    id="company"
+                    placeholder="Company Reg Number"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your company reg number"
+                    v-model="indiv.companyRegNumber"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
             </div>
-            <div class="row">
+            <div class="row mb-2">
               <div class="form-group col-md-6">
                 <div class="input-group">
-                  <label
-                    v-if="!indiv.howMarried || indiv.howMarried === 'N/A'"
-                    for="howMarried"
-                    class="uniSelectLabel"
-                    >Marital Status</label
-                  >
-                  <select class="form-control uniSelect" id="howMarried" v-model="indiv.howMarried">
-                    <option value="N/A">N/A</option>
-                    <option value="In Community Of Property">In Community Of Property</option>
-                    <option value="Out of Community Of Property"
-                      >Out of Community Of Property</option
+                  <span v-if="!indiv.howMarried">
+                    <label v-if="indiv.howMarried === 'N/A'" for="howMarried" class="uniSelectLabel"
+                      >Marital Status</label
                     >
-                    <option value="Other">Other</option>
-                    <option value="Traditional Wedding">Traditional Wedding</option>
-                    <option value="Single">Single</option>
-                    <option value="Divorced">Divorced</option>
-                    <option value="Widow">Widow</option>
-                    <option value="Committed Relationship">Committed Relationship</option>
-                    <option value="Partner">Partner</option>
-                  </select>
+                  </span>
+
+                  <float-label label="Marital Status" style="width:100%">
+                    <select
+                      class="form-control uniSelect"
+                      id="howMarried"
+                      v-model="indiv.howMarried"
+                    >
+                      <option value="N/A">N/A</option>
+                      <option value="In Community Of Property">In Community Of Property</option>
+                      <option value="Out of Community Of Property"
+                        >Out of Community Of Property</option
+                      >
+                      <option value="Other">Other</option>
+                      <option value="Traditional Wedding">Traditional Wedding</option>
+                      <option value="Single">Single</option>
+                      <option value="Divorced">Divorced</option>
+                      <option value="Widow">Widow</option>
+                      <option value="Committed Relationship">Committed Relationship</option>
+                      <option value="Partner">Partner</option>
+                    </select>
+                  </float-label>
                 </div>
                 <div class="validation"></div>
               </div>
               <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  name="email"
-                  id="email"
-                  placeholder="Email Address"
-                  data-msg="Please enter your email address"
-                  v-model="indiv.emailAddress"
-                />
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    name="email"
+                    id="email"
+                    placeholder="Email Address"
+                    data-msg="Please enter your email address"
+                    v-model="indiv.emailAddress"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
             </div>
             <div class="row">
               <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  name="cell"
-                  class="form-control"
-                  id="cell"
-                  placeholder="Cell Number"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your cell number"
-                  v-model="indiv.cellNumner"
-                />
+                <float-label>
+                  <input
+                    type="text"
+                    name="cell"
+                    class="form-control"
+                    id="cell"
+                    placeholder="Cell Number"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your cell number"
+                    v-model="indiv.cellNumner"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
               <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  name="landline"
-                  id="landline"
-                  placeholder="Landline Number"
-                  data-msg="Please enter your landline number"
-                  v-model="indiv.landlineNumber"
-                />
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    name="landline"
+                    id="landline"
+                    placeholder="Landline Number"
+                    data-msg="Please enter your landline number"
+                    v-model="indiv.landlineNumber"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
             </div>
             <h2>Spouse Details</h2>
           </div>
           <div v-if="indiv.howMarried === 'In Community Of Property'" class="form">
-            <div class="form-row">
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  placeholder="SPOUSE NAME"
-                  data-msg="Please enter your spouse's name"
-                  v-model="indiv.spouseName"
-                />
+            <div class="form-row mb-2">
+              <div class="form-group col-md-6 mt-2">
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="SPOUSE NAME"
+                    data-msg="Please enter your spouse's name"
+                    v-model="indiv.spouseName"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  placeholder="SPOUSE SURNAME"
-                  data-msg="Please enter your spouse's surname"
-                  v-model="indiv.spouseSurname"
-                />
+              <div class="form-group col-md-6 mt-2">
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="SPOUSE SURNAME"
+                    data-msg="Please enter your spouse's surname"
+                    v-model="indiv.spouseSurname"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  placeholder="SPOUSE EMAIL"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your spouse's email"
-                  v-model="indiv.spouseEmail"
-                />
+              <div class="form-group col-md-6 mt-2">
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="SPOUSE EMAIL"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your spouse's email"
+                    v-model="indiv.spouseEmail"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  placeholder="SPOUSE TELEPHONE"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your spouse's telephone number"
-                  v-model="indiv.spouseTelephone"
-                />
+              <div class="form-group col-md-6 mt-2">
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="SPOUSE TELEPHONE"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your spouse's telephone number"
+                    v-model="indiv.spouseTelephone"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  placeholder="SPOUSE CELL NUMBER"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your spouse's cellphone number"
-                  v-model="indiv.spouseCellnumber"
-                />
+              <div class="form-group col-md-6 mt-2">
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="SPOUSE CELL NUMBER"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your spouse's cellphone number"
+                    v-model="indiv.spouseCellnumber"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
             </div>
                   v-model="indiv.address.streetNumber"
                   disabled
                 />
+
                 <div class="validation"></div>
               </div>
               <div class="form-group col-md-6">

src/main.js

 import Vuetify from "vuetify";
 import VueShareSocial from "vue-share-social";
 import VueCurrencyInput from "vue-currency-input";
+import VueFloatLabel from "vue-float-label";
 
 Vue.use(VueShareSocial);
 Vue.use(EvaIcons);
 Vue.use(Vuetify);
+Vue.use(VueFloatLabel);
 
 Vue.use(VueGoogleMaps, {
   load: {