Add default <select> field to <EnquiryFormSimple />

src/components/EnquiryForm.css

@@ -16,6 +16,7 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  position: relative;
 }
 
 .EnquiryForm--Input {
@@ -27,12 +28,31 @@
   margin: 0;
   border: none;
   border-bottom: 1px solid #bababa;
-  padding: 0.5em 0;
+  padding: 0.75rem 0.5rem;
   line-height: 1;
   transition: border-color 0.2s;
   resize: none;
 }
 
+.EnquiryForm--Select {
+  border-radius: 0;
+  background: none;
+  appearance: none;
+}
+
+.EnquiryForm--Label.has-arrow:after {
+  content: '';
+  position: absolute;
+  right: 3px;
+  top: 50%;
+  border-right: 1px solid;
+  border-bottom: 1px solid;
+  height: 10px;
+  width: 10px;
+  transform: translateY(-75%) rotate(45deg);
+  pointer-events: none;
+}
+
 .EnquiryForm--Input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px white inset !important;
 }

src/components/EnquiryFormSimple.js

@@ -32,6 +32,21 @@ export default ({
         required
       />
     </label>
+    <label className='EnquiryForm--Label has-arrow'>
+      <select
+        className='EnquiryForm--Input EnquiryForm--Select'
+        name='type'
+        placeholder='Type of enquiry'
+        required
+      >
+        <option selected disabled hidden>
+          Type of Enquiry
+        </option>
+        <option>Need to know more</option>
+        <option>Found a bug</option>
+        <option>Want to say hello</option>
+      </select>
+    </label>
     <label className='EnquiryForm--Label'>
       <textarea
         className='EnquiryForm--Input EnquiryForm--Textarea'