adds styling and linting

components/feedbackForm.vue

@@ -1,15 +1,36 @@
 <template>
-  <div>
-    <form
-      netlify
-      action="/"
-      method="POST"
-      name="feedback"
-    >
+  <div class="feedback-form">
+    <form netlify method="POST" name="feedback">
       <input type="hidden" name="form-name" value="feedback" />
+      <label for="name">Name</label>
       <input type="text" name="name" />
-      <input type="email" placeholder="email" required>
-      <input type="string" placeholder="feedback" required>
+      <label for="name">Email</label>
+      <input type="email" name="email" required />
+      <label for="feedback">What is your feedback?</label>
+      <textarea wrap="soft" name="feedback" required></textarea>
+      <button type="submit">Submit</button>
     </form>
   </div>
 </template>
+<style scoped>
+.feedback-form {
+  margin: 40px 40px;
+  min-width: 300px;
+  width: 45%;
+}
+input,
+textarea,
+button {
+  font-size: inherit;
+  margin: 15px 0;
+  padding: 12px 20px;
+  width: 100%;
+}
+
+button {
+  background-color: teal;
+  border: 1px solid black;
+  color: white;
+  width: 50%;
+}
+</style>

pages/index.vue

@@ -3,9 +3,14 @@
 </template>
 
 <script>
-import FeedbackForm from '../components/FeedbackForm.vue';
+import FeedbackForm from '../components/FeedbackForm.vue'
 export default {
   name: 'IndexPage',
   components: { FeedbackForm },
 }
 </script>
+<style>
+* {
+  font-family: 'Helvetica', sans-serif;
+}
+</style>