Add new contact form

src/Pages.jsx

@@ -33,26 +33,28 @@ export class HomePage extends React.Component {
 }
 
 export class ContactPage extends React.Component {
-    async sendMessage(name,email,subject,message) {
+    async sendMessage(event) {
+        event.preventDefault()
+        let data = new FormData(event.target)
         return fetch("https://ash-api.thatalex.dev/v3/tools/contact", {
             method: "POST",
             headers: {
                 'content-type': "application/json"
             },
             body: JSON.stringify({
-                name,
+                "name": data.get("name"),
-                email,
+                "email": data.get("email"),
-                subject,
+                "subject": "Website form submission",
-                message
+                "message": data.get("message")
             })
         })
             .then(result => {
-                if (result.ok) return true;
+                if (result.ok) window.location.href="/?contact=success"
-                else return false;
+                else return window.location.href="?contact=fail";
             })
             .catch(err => {
                 console.log('Contact request failed with error "' + err.message + '"');
-                return false;
+                return window.location.href="?contact=fail";
             })
     }
 
@@ -60,50 +62,17 @@ export class ContactPage extends React.Component {
         return (
             <div id={"contact"} className={"centered horizontally vertically"}>
                 <div id={"form-container"}>
-                    <div id={"form"}>
+                    <h1 style={{whiteSpace: "nowrap"}}>lets get in touch</h1>
-                        <div style={{textAlign:"center"}}>
+                    <br />
-                            <h1 style={{fontSize:"25px"}}>great, lets talk!</h1>
+                    <form onSubmit={this.sendMessage} style={{textAlign:"center"}}>
-                            <br />
+                        <label htmlFor={"name"}>Name:</label><br />
-                            <input
+                        <input type={"name"} id={"name"} name={"name"} /><br />
-                                id={"name"}
+                        <label htmlFor={"email"}>Email:</label><br />
-                                name={"name"}
+                        <input type={"email"} id={"email"} name={"email"} /><br />
-                                placeholder={"your name.."}
+                        <label htmlFor={"message"}>Message:</label><br />
-                                required
+                        <input type={"message"} id={"message"} name={"message"} /><br />
-                            />
+                        <input type="submit" value="Submit" />
-                            <br />
+                    </form>
-                            <input
-                                id={"email"}
-                                name={"email"}
-                                placeholder={"your email.."}
-                                required
-                            />
-                            <br />
-                            <input
-                                id={"subject"}
-                                name={"subject"}
-                                placeholder={"subject.."}
-                                required
-                            />
-                            <br /><br />
-                            <textarea
-                                style={{width:"30vw",height:"150px",resize:"none"}}
-                                id={"message"}
-                                name={"message"}
-                                placeholder={"'lorem ipsum' yada yada yada.."}
-                                required
-                            />
-                            <br />
-                            <button
-                                type={"button"}
-                                onClick={() => this.sendMessage(
-                                    document.getElementById("name").value,
-                                    document.getElementById("email").value,
-                                    document.getElementById("subject").value,
-                                    document.getElementById("message").value
-                                )}
-                            >Submit</button>
-                        </div>
-                    </div>
                 </div>
             </div>
         )

src/main.css

@@ -39,20 +39,30 @@ a:hover {
     top:0;
     bottom:0;
 }
-input,textarea {
+input[type="text"],
-    border-width:2px;
+input[type="email"],
-    border-radius:20px;
+textarea {
-    border-color:white;
+    background-color: white;
-    text-align:center;
+    border: 1px solid gray;
+    color: black;
 }
-input::placeholder, textarea::placeholder {
+input[type="submit"] {
-    padding-left:5px;
+    background-color: black;
+    border: none;
+    color: white;
 }
 
 /*components*/
-#form-container {
+#contact {
     padding-bottom:5%;
 }
+#form-container {
+    background-color:white;
+    border-radius:10px;
+    border-style:solid;
+    border-color:gray;
+    padding: 5vw 5vh;
+}
 #form {
     width:30vw;
     padding:110px 100px;