Basic form for contact

Doesn't fully work yet.

src/App.js

@@ -1,7 +1,7 @@
-import React from "react";
+import React, {Component} from "react";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 import About from "./components/About";
-import Contact from "./components/Contact";
+import ContactForm from "./components/Contact";
 import Home from "./components/Home";
 import PostDetail from "./components/PostDetail";
 import Blog from "./components/Blog";
@@ -13,7 +13,7 @@ function App() {
       <Navbar />
       <Switch>
         <Route component={About} path="/about" />
-        <Route component={Contact} path="/contact" />
+        <Route component={ContactForm} path="/contact" />
         <Route component={PostDetail} path="/blog/:slug" />
         <Route component={Blog} path="/blog" />
         <Route component={Home} path="/" />

src/components/Contact.js

@@ -1,5 +1,55 @@
-import React from "react";
+import React, {Component} from "react";
 
-export default function Contact(props) {
+class ContactForm extends Component {
-  return <div>Contact</div>;
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'Write your full name here.',
+      email: 'Write your email here.',
+      subject: 'Write why you are writing here.',
+      message: 'Write your message here.'
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleChange(event) {
+    this.setState({name: event.target.name});
+    this.setState({email: event.target.email});
+    this.setState({subject: event.target.subject});
+    this.setState({message: event.target.message});
+  }
+
+  handleSubmit(event) {
+    alert('You will get and email from us shortly!');
+    alert('These are the details you have submitted!' + this.state.name);
+    event.preventDefault();
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <label>
+          Name:
+          <input type="text" name={this.state.name} onChange={this.handleChange} />
+        </label>
+        <label>
+          Email:
+          <input type="text" email={this.state.email} onChange={this.handleChange} />
+        </label>
+        <label>
+          Subject:
+          <textarea nasubjectme={this.state.nasubjectme} onChange={this.handleChange} />
+        </label>
+        <label>
+          Message:
+          <textarea name={this.state.message} onChange={this.handleChange} />
+        </label>
+        <input type="submit" value="Submit" />
+      </form>
+    );
+  }
 }
+
+export default ContactForm;