From a8613ac6c65d5b860c780cdf0abd6a9ffdad8d44 Mon Sep 17 00:00:00 2001
From: midblep <mrrmiddynight@gmail.com>
Date: Mon, 5 Jul 2021 23:04:46 +0200
Subject: [PATCH] attempt fix for netlify form

---
 pages/contact.tsx  | 12 ++++++++----
 styles/globals.css |  9 +++++++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/pages/contact.tsx b/pages/contact.tsx
index 09e1d90..1260a0f 100644
--- a/pages/contact.tsx
+++ b/pages/contact.tsx
@@ -35,20 +35,24 @@ export default function Contact() {
                     <section>
                         <div>
                             <h4>{"📨 Shoot us an email"}</h4>
-                            <form netlify>
+                            <form name="contact" method="POST" data-netlify="true">
                                 <div>
                                     <label>Name</label>
-                                    <input type="text" />
+                                    <input type="text" name="name" />
                                 </div>
 
                                 <div>
                                     <label>Email</label>
-                                    <input type="email" />
+                                    <input type="email" name="name" />
                                 </div>
 
                                 <div>
                                     <label>Message</label>
-                                    <textarea></textarea>
+                                    <textarea name="message" rows={10}></textarea>
+                                </div>
+
+                                <div>
+                                    <button type="submit">Send</button>
                                 </div>
                             </form>
                         </div>
diff --git a/styles/globals.css b/styles/globals.css
index b68024a..df3b8c7 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -158,6 +158,15 @@ form input, form textarea {
   padding: 0.3em 0.4em;
 }
 
+form button {
+  background-color: var(--background-color-dark);
+  border-radius: var(--padding-sm);
+  border: unset;
+  padding: 0.3em 0.6em;
+  font-size: 1em;
+  cursor: pointer;
+}
+
 
 /* mobile */
 @media(max-aspect-ratio: 5/4) {