Merge pull request #11 from Lintercat/feature/contact-form-alerts

Add feedback on form submission

package.json

@@ -25,7 +25,8 @@
     "vue-axios": "^2.0.2",
     "vue-motion": "^0.2.2",
     "vue-router": "^3.0.1",
-    "vue-scrollto": "^2.9.0"
+    "vue-scrollto": "^2.9.0",
+    "vue-sweetalert2": "^1.2.4"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/assets/style/_animations.scss

@@ -32,3 +32,21 @@
     transform: translateX(0);
   }
 }
+
+@keyframes shake-animation {
+  10%, 90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%, 80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%, 50%, 70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%, 60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}

src/components/Contact-form.vue

@@ -13,7 +13,7 @@
       label(for='lead-message') ¿Cómo podemos ayudarte?
       textarea(v-model='lead.message' rows='3' id='lead-message')
     .form-control
-      button(@click='submit') ¡Comencémos!
+      button(@click='submit' :class='{shake: hasError}') ¡Comencémos!
 </template>
 
 <script>
@@ -28,16 +28,37 @@ export default {
         email: '',
         message: '',
         createdAt: Date.now()
-      }
+      },
+      hasError: false
     }
   },
 
   methods: {
     submit () {
       const target = process.env.PROSPECTS_API_URL
-      axios.post(target, this.lead)
-        .then(response => { console.log(response) })
-        .catch(error => { console.error(error) })
+      if (this.lead.name && this.lead.company && this.lead.email) {
+        axios.post(target, this.lead)
+          .then(response => {
+            this.$swal({
+              title: 'Gracias por contactarnos',
+              text: 'Nos comunicaremos contigo lo más pronto posible',
+              type: 'success'
+            }).then(() => { this.resetInputs() })
+          })
+          .catch(() => { this.hasError = true })
+      } else {
+        this.hasError = true
+      }
+      setTimeout(() => { this.hasError = false }, 820)
+    },
+    resetInputs () {
+      this.lead = {
+        name: '',
+        company: '',
+        email: '',
+        message: '',
+        createdAt: Date.now()
+      }
     }
   }
 }
@@ -74,6 +95,13 @@ export default {
     width: 100%;
   }
 
+  .shake {
+    animation: shake-animation 0.82s cubic-bezier(.36,.07,.19,.97) both;
+    transform: translate3d(0, 0, 0);
+    backface-visibility: hidden;
+    perspective: 1000px;
+  }
+
   button {
     @include button($expand: true);
     margin-top: 15px;

src/main.js

@@ -6,6 +6,7 @@ import VueAxios from 'vue-axios'
 import VueMotion from 'vue-motion'
 import VeeValidate from 'vee-validate'
 import VueScrollTo from 'vue-scrollto'
+import VueSweetalert2 from 'vue-sweetalert2'
 
 Vue.use(VueAxios, axios)
 Vue.use(VueMotion)
@@ -14,6 +15,7 @@ Vue.use(VueScrollTo, {
   duration: 1500,
   easing: 'ease-out'
 })
+Vue.use(VueSweetalert2)
 
 Vue.config.productionTip = false
 

yarn.lock

@@ -7451,6 +7451,10 @@ svgo@^0.7.0:
     sax "~1.2.1"
     whet.extend "~0.9.9"
 
+[email protected]:
+  version "7.15.1"
+  resolved "https://registry.yarnpkg.com/sweetalert2/-/sweetalert2-7.15.1.tgz#edd9bd4d5501b22e18755686a343c7afe3e9adb2"
+
 symbol-tree@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
@@ -7952,6 +7956,12 @@ vue-style-loader@^3.0.0, vue-style-loader@^3.0.1:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue-sweetalert2@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/vue-sweetalert2/-/vue-sweetalert2-1.2.4.tgz#7b7c9b56b02d26c1016f20a3fe342e1f2f0524fa"
+  dependencies:
+    sweetalert2 "7.x"
+
 vue-template-compiler@^2.5.2:
   version "2.5.13"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.13.tgz#12a2aa0ecd6158ac5e5f14d294b0993f399c3d38"