contact form added

src/components/Footer.vue

@@ -2,11 +2,18 @@
   v-card.elevation-24
     v-footer(color="basic" padless)
       v-row(justify="center" no-gutters)
-        v-btn.py-2(v-for="link in links" :key="link" :href="link.href" color="white" icon)
+        v-btn(v-for="link in links" :key="link" :href="link.href" color="white" icon)
           v-icon {{link.icon}}
-      v-col.py-4.text-center.white--text.font-weight-bold(color="secondary" cols="12") {{ new Date().getFullYear() }} — Devlup Labs
+      v-col.my-n5.text-center.font-weight-bold(color="secondary" cols="12") 
+        v-btn.text-center.white--text.font-weight-bold(text='Primary', 
+                                                       to='./about', color='white' large
+                                                       @click="viewForm"
+                                                       ) Contact Us
+      v-col.pt-0.pb-1.text-center.white--text.font-weight-bold(color="secondary" cols="12") {{ new Date().getFullYear() }} — Devlup Labs
 </template>
 <script>
+import form from "../views/AboutUs.vue";
+
 export default {
   data() {
     return {
@@ -22,8 +29,28 @@ export default {
           icon: "mdi-linkedin",
           href: "https://www.linkedin.com/company/devlup-labs/"
         }
-      ]
+      ],
+      clicked: false
     };
+  },
+  methods: {
+    scrollForm: function() {
+      if (this.clicked) {
+        window.scrollTo(0, document.body.scrollHeight);
+        setInterval(() => {
+          this.clicked = false;
+        }, 200);
+      }
+    },
+    viewForm: function() {
+      this.clicked = true;
+      setInterval(() => {
+        this.scrollForm();
+      }, 200);
+    }
+  },
+  components: {
+    form: form
   }
 };
 </script>

src/views/AboutUs.vue

@@ -38,8 +38,55 @@ v-container(fluid='' style='margin: 0px; padding: 0px; width: 100%;')
                   h1.font-weight-medium.pa-3(style="text-align: center;color:#000") {{item.heading}}
                   h3.font-weight-light.mb-n.pa-3(style="text-align: center;color:#000") {{item.subheading}}
               v-flex(xs12='',sm12='', md4='',lg4='',xl4='')
-                v-img.mt-5.ml-n3.mr-3(:src="item.src" contain aspect-ratio='2.5')    
+                v-img.mt-5.ml-n3.mr-3(:src="item.src" contain aspect-ratio='2.5')   
 
+
+  div(align='center', class="form-container" justify='center')
+    div.Form(name="formSection" id="formComponent")
+      div.container.col-sm-10(class="my-5" name="")
+        v-row(class="no-gutters pb-5" id="formRow")
+          div.col-lg-5.col-md-5(class="pt-11 pl-7 pb-0" align="center" justify="center")
+            v-img.img-fluid(src="../assets/contactUs.png" id="contactImg" align="center" justify="center")
+          div.col-lg-7.col-md-7( justify='center' class='px-5')
+            div.col-lg-9(align="center" justify="left")
+              iframe(name="hiddenFrame" width="0" height="0" border="0" style="display: none;"
+                    onload="if(submitted){location.reload()}")
+              v-form(class="login my-3" id="user_info_submit" name="form"
+                    action="https://docs.google.com/forms/d/e/1FAIpQLSeyQ2dD8L6DkyYjL_3JzWyZUD1IhOelzgEO8O4kVcdySFVehA/formResponse"
+                    method="POST" target="hiddenFrame"
+                    v-model="validForm"
+                    v-ref="form"
+                    onsubmit="submitted=true;"
+                    )
+                h1(style="color: #1b65c4; font-size: 2.5rem" class="font-weight-bold py-3") Contact Us
+                div.form-row(name="inputEmail")
+                    v-text-field(
+                                  lable="Email: " id="email" name="entry.785378515" color='#1b65c4' 
+                                  type="email"  placeholder="Email" 
+                                  v-model="emailAddress"
+                                  :rules="emailRules")
+                div.form-row(name="inputName")
+                    v-text-field(
+                                  lable="full name: " id="name" name="entry.2032351164" color='#1b65c4' 
+                                  type="text" placeholder="Full Name" 
+                                  counter=50
+                                  :rules="[required('Name'), minLength('Name', 4), maxLength('Name', 50)]")
+                div.form-row(name="inputPhone")
+                    v-text-field(
+                                  lable="phone" color='#1b65c4' id="phone" name="entry.1442733485" 
+                                  type="phone" placeholder="Contact Number"
+                                  counter=true
+                                  v-model="mobileNo"
+                                  :rules="numberRules")
+                div.form-row(name="inputSuggestion")
+                    v-text-field(lable="comments" color='#1b65c4' 
+                                name="entry.1558155518" type="textarea" 
+                                placeholder="What can we do for you?"
+                                id="suggestion"
+                                counter=true
+                                )
+                div.form-row(name="inputButton")
+                  v-btn(color='#1b65c4' class='my-3' type="submit" :disabled="!validForm").white--text Submit
 </template>
 <script>
 export default {
@@ -100,7 +147,47 @@ export default {
         subheading:
           "Self Learning sits at the heart of devlup labs, we believe in proper utilization of resources and peer guidance to propel self learning."
       }
-    ]
+    ],
+    validForm: false,
+    submitted: false,
+    emailAddress: "",
+    emailRules: [
+      v => !!v || "E-mail is required",
+      v => /.+@.+\..+/.test(v) || "E-mail must be valid"
+    ],
+    mobileNo: "",
+    numberRules: [
+      v => !!v || "Mobile number is required",
+      v =>
+        (/^[0-9]{10}/.test(v) && v.length <= 13) ||
+        "Mobile number must be valid"
+    ],
+    required(propertyType) {
+      return v => !!v || `You must input a ${propertyType}`;
+    },
+    minLength(propertyType, minLength) {
+      return v =>
+        (v && v.length >= minLength) ||
+        `${propertyType} must be atleast ${minLength} characters!`;
+    },
+    maxLength(propertyType, maxLength) {
+      return v =>
+        (v && v.length <= maxLength) ||
+        `${propertyType} must be less than ${maxLength} characters!`;
+    }
   })
 };
 </script>
+
+<style scoped>
+#formRow {
+  background-color: white;
+  border-radius: 15px;
+}
+#contactImg {
+  max-height: 300px;
+  max-width: 400px;
+  margin-top: 40px;
+  border-radius: 20px;
+}
+</style>

src/views/Videos.vue

@@ -5,7 +5,7 @@ div(align='center', justify='center')
   div(v-else)
     v-container
       v-row.mt-9
-        v-flex.mb-6(v-for='tutorial in tutorials', :key='tutorial.name', xs12='',sm12='', md6='',lg6='',xl4='')
+        v-flex.mb-6(v-for='tutorial in tutorials', :key='tutorial.name', xs12='',sm12='', md12='',lg6='',xl4='')
           VideoCard(:tutorial='tutorial')
       v-btn(color='#1b65c4' dark='' large href="https://www.youtube.com/channel/UCFaRxxB8-BB5GXH-wlwGqIw") Our Channel
 </template>