WL-11 [Test] - Netlify form implementation + Install Axios

components/Contact.vue

@@ -7,6 +7,7 @@
       method="POST"
       data-netlify="true"
       data-netlify-honeypot="bot-field"
+      @submit.prevent="handleSubmit"
     >
       <input type="hidden" name="form-name" value="contact" />
       <div class="flex flex-wrap -mx-3 mb-4">
@@ -21,6 +22,8 @@
             class="appearance-none block w-full bg-gray-100 placeholder-gray-700 text-gray-700 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
             id="grid-first-name"
             type="text"
+            name="fullname"
+            v-model="form.fullname"
             placeholder="Jane Doe"
           />
         </div>
@@ -35,6 +38,8 @@
             class="appearance-none block w-full bg-gray-100 placeholder-gray-700 text-gray-700 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
             id="grid-email"
             type="text"
+            name="email"
+            v-model="form.email"
             placeholder="janedoe@example.com"
           />
         </div>
@@ -43,6 +48,8 @@
       <textarea
         rows="3"
         class="w-full mb-4 bg-gray-100 appearance-none rounded py-2 px-4 placeholder-gray-700 text-gray-700 sm:text-sm sm:leading-5 focus:outline-none focus:bg-white"
+        name="message"
+        v-model="form.message"
         placeholder="Hi, ..."
       ></textarea>
       <button
@@ -56,7 +63,41 @@
 </template>
 
 <script>
-export default {};
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      form: {
+        fullname: "",
+        email: "",
+        message: ""
+      }
+    };
+  },
+  methods: {
+    encode(data) {
+      return Object.keys(data)
+        .map(
+          key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`
+        )
+        .join("&");
+    },
+    handleSubmit() {
+      const axiosConfig = {
+        header: { "Content-Type": "application/x-www-form-urlencoded" }
+      };
+      axios.post(
+        "/",
+        this.encode({
+          "form-name": "contact",
+          ...this.form
+        }),
+        axiosConfig
+      );
+    }
+  }
+};
 </script>
 
 <style></style>

package-lock.json

@@ -3170,6 +3170,14 @@
       "integrity": "sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
+      "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -6367,6 +6375,11 @@
         }
       }
     },
+    "follow-redirects": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
+      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",

package.json

@@ -10,6 +10,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "axios": "^0.21.0",
     "core-js": "^3.6.5",
     "nuxt": "^2.14.6"
   },

static/Contact.html

@@ -19,6 +19,7 @@
         class="appearance-none block w-full bg-gray-100 placeholder-gray-700 text-gray-700 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
         id="grid-first-name"
         type="text"
+        name="fullname"
         placeholder="Jane Doe"
       />
     </div>
@@ -33,6 +34,7 @@
         class="appearance-none block w-full bg-gray-100 placeholder-gray-700 text-gray-700 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
         id="grid-email"
         type="text"
+        name="email"
         placeholder="janedoe@example.com"
       />
     </div>
@@ -41,6 +43,7 @@
   <textarea
     rows="3"
     class="w-full mb-4 bg-gray-100 appearance-none rounded py-2 px-4 placeholder-gray-700 text-gray-700 sm:text-sm sm:leading-5 focus:outline-none focus:bg-white"
+    name="message"
     placeholder="Hi, ..."
   ></textarea>
   <button